Skip to content

README.md

Latest commit

 

History

History
181 lines (133 loc) · 6.85 KB

README.md

File metadata and controls

181 lines (133 loc) · 6.85 KB
Raw

AI 智能绘图

English | 中文

一个基于 Next.js 构建的智能绘图应用程序，利用 AI 的强大功能创建和操作各种类型的图表，包括 Draw.io (diagrams.net)、Mermaid、PlantUML、Excalidraw，以及通过自然语言命令支持 20 多种其他图表格式。

🔗 在线演示:

de5e647f-a83a-4b28-bd56-b449f587e472.png 01669c29-60a7-4777-af14-0982d6c6daa8.png 409fd263-800f-4183-8df9-71691307633c.png 6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png 7736141c-e820-450d-8260-5f5b0c846388.png e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png

🌟 主要功能

  • AI 驱动的图表创建: 将自然语言描述转换为专业图表
  • 多格式支持: 支持 Draw.io XML、Mermaid、PlantUML、Excalidraw，以及通过 Kroki 支持 20 多种其他格式
  • 智能编辑: 通过对话式 AI 提示修改现有图表
  • 实时预览: 在与 AI 交互时查看更改
  • 版本历史: 跟踪和恢复图表的先前版本
  • 可折叠聊天面板: 展开或折叠聊天界面以最大化工作区
  • 灵活渲染: 具有回退机制的多种渲染选项
  • 模型配置: 直接从浏览器自定义 AI 模型

🎯 支持的图表类型

Draw.io (diagrams.net)

使用 AI 驱动的 XML 生成和修改功能创建和编辑专业流程图、过程图和复杂可视化图表。

Mermaid

在专用工作区中生成流程图、序列图、甘特图等，并提供实时 SVG 预览。

PlantUML

内置渲染代理，支持 plantuml.com、kroki.io 或自定义端点创建 UML 图表。

Excalidraw

结合 AI 辅助的徒手风格绘图，用于有机图表创建。

Graphviz

使用 DOT 语言语法创建图形图表。Graphviz 通过 kroki.io 服务提供支持，该服务提供强大的图形可视化功能。

Kroki (20 多种格式)

使用 kroki.io 服务在各种格式中生成图表，通过单一界面支持：

  • PlantUML: UML 图表、活动图、序列图等
  • Mermaid: 流程图、序列图、甘特图等
  • BPMN: 业务流程建模符号，用于工作流图
  • Graphviz: 图形可视化和网络图
  • BlockDiag: 方框图
  • C4-PlantUML: 软件架构图
  • Ditaa: ASCII 艺术到图像转换
  • Erd: 实体关系图
  • Vega/Vega-Lite: 数据可视化
  • 以及其他 15 多种格式

🛠 工作原理

AI 智能绘图利用现代 Web 技术在自然语言和图表表示之间架起桥梁：

  • Next.js 应用路由器: 具有服务器端渲染的快速、现代 React 框架
  • AI SDK 集成: 与 OpenAI 兼容 API 的无缝通信
  • 上下文感知提示: 为每种图表类型设计的智能提示工程
  • 实时流式传输: 具有流式响应的即时反馈
  • 格式特定工具: 为每种图表格式设计的专用工具（[display_mermaid]、[display_plantuml] 等）

应用程序将您的自然语言请求转换为结构化图表代码，然后实时渲染。

🚀 入门指南

先决条件

  • Node.js 18+
  • npm 或 yarn

安装

  1. 克隆仓库：
git clone https://github.com/shenpeiheng/ai-smart-draw.git
cd ai-smart-draw
  1. 安装依赖：
npm install
# 或
yarn install
  1. 在根目录创建 .env.local 文件。您可以使用 env.example 作为模板：
cp env.example .env.local

然后使用您的 OpenAI 凭据更新 .env.local。

OpenAI 配置

  • OPENAI_API_KEY (必需): 来自您 OpenAI 账户的密钥
  • OPENAI_MODEL (可选): 默认为 gpt-4o-mini，如果您喜欢其他已发布的变体可以覆盖
  • OPENAI_BASE_URL (可选): 默认为 https://api.openai.com/v1；如果您自托管代理或网关，请设置此项

示例片段：

OPENAI_API_KEY="sk-your-key"
# OPENAI_MODEL="gpt-4o-mini"
# OPENAI_BASE_URL="https://api.openai.com/v1"

可选：从浏览器配置

  • 点击任何工作区标题中的 模型设置 按钮，覆盖当前浏览器的 API 密钥、基础 URL 或模型。值存储在 localStorage 中，仅在您提交聊天请求时发送到服务器
  • 留空任何字段以回退到上述服务器端环境变量
  • 使用 拉取列表 按钮调用 /api/models 助手，将当前凭据转发到 GET /models 并列出可选择的模型 ID
  1. 运行开发服务器：
npm run dev
  1. 在浏览器中打开 http://localhost:3000 查看应用程序
    • / -> Draw.io (XML 工作流、图表历史、文件上传)
    • /mermaid -> Mermaid (由您配置的 OpenAI 兼容模型驱动的实时预览 + 定义卡)
    • /plantuml -> PlantUML (具有远程预览的基于文本的图表)
    • /excalidraw -> Excalidraw (由相同模型驱动的自由形式画布)
    • /kroki -> Kroki (由 kroki.io 驱动的多格式图表)
    • /graphviz -> Graphviz (由 kroki.io 驱动的图形可视化图表)

🌐 用户界面功能

可折叠聊天面板

  • 切换聊天面板以最大化您的工作区
  • 折叠时，浮动按钮可快速访问以恢复聊天面板
  • 流畅的动画提供无缝用户体验

响应式设计

  • 针对桌面和笔记本电脑使用进行了优化
  • 移动友好的界面和适当的消息

统一导航

  • 在不同图表类型之间轻松切换
  • 所有图表工作区的一致界面

🚀 部署

部署 Next.js 应用的最简单方法是使用 Next.js 创建者提供的 Vercel 平台。

查看 Next.js 部署文档了解更多详情。

或者您可以使用此按钮进行部署。 Deploy with Vercel

📁 项目结构

app/                  # Next.js 应用路由和页面
  api/                # 不同图表类型的 API 路由
  [diagram-type]/     # 每种图表类型的独立页面
components/           # React 组件
  ui/                 # 可重用的 UI 组件
  [feature]/          # 特定功能的组件
contexts/             # React 上下文提供者
lib/                  # 实用函数和助手
public/               # 静态资源，包括示例图片

✅ 待办事项

  • 允许 LLM 修改 XML 而不是每次都从头生成
  • 提高形状流式更新的流畅性
  • 添加可折叠聊天面板以更好地利用工作区

📄 许可证

该项目基于 MIT 许可证。

⭐ 星标历史

Star History Chart