AI 绘图神器来了！用自然语言秒生成专业流程图

告别复杂的绘图工具，只需要说出你的需求，AI 就能帮你画出漂亮的流程图、架构图、UML 图...

产品亮点

使用美化功能，增加提示词之后的效果

一句话生成专业图表

不需要学习任何绘图软件，只需要用自然语言描述，AI 就能帮你生成：

• 流程图 - 业务流程、用户旅程、决策树
• 架构图 - 系统架构、微服务、网络拓扑
• UML 图 - 类图、时序图、用例图
• 思维导图 - 知识梳理、项目规划、头脑风暴

核心特性

1. 实时流式生成

边思考边绘制，看着图表从无到有的过程，就像看 AI 在画画

2. 智能理解需求

• "画一个电商系统的微服务架构图"
• "创建一个用户注册登录的流程图"
• "设计一个 Kubernetes 集群架构"

AI 完全理解你的意图，自动生成专业图表

3. 随时修改调整

不满意？告诉 AI：

• "把登录框移到左边"
• "添加一个支付模块"
• "改成深色主题"

AI 会精确修改，不影响其他部分

4. 导出标准格式

生成的图表完全兼容 Draw.io 格式，可以：

• 导出为 .drawio 文件
• 保存为 PNG/JPG 图片
• 导入到 Draw.io 继续编辑

适用场景

产品经理

• 快速画出产品流程图
• 设计用户交互流程
• 规划功能模块架构

开发工程师

• 绘制系统架构图
• 设计数据库 ER 图
• 编写技术文档配图

学生 & 教师

• 制作课程思维导图
• 整理知识点关系图
• 创建学习笔记配图

企业培训

• 制作培训流程图
• 绘制组织架构图
• 设计业务流程图

技术实现

前端技术栈

• Next.js 15 - React 全栈框架
• React Drawio - 强大的绘图组件
• AI SDK - Vercel AI SDK 流式对话
• Tailwind CSS - 现代化 UI 样式

AI 能力

• SiliconFlow - 支持多种大模型
  • DeepSeek V3.2 - 推理能力强，适合复杂图表
  • Kimi-K2-Thinking - 推理能力强，响应快
  • GLM-4.6 - 全能型模型

核心特性实现

流式渲染

AI 生成 XML 时实时解析并渲染，用户可以看到图表逐步生成的过程

增量更新

通过 edit_diagram 工具调用，实现精确的局部修改，不影响已有内容

本地存储

API Key 加密存储在浏览器 sessionStorage，不上传服务器，保护隐私安全

使用教程

1. 设置 API Key

首次使用需要配置 SiliconFlow API Key：

1. 访问 SiliconFlow 官网 注册账号 ，并访问 Bizyair 官网 登录获取赠送额度 ，如果想体验美图的功能
2. 获取 API Key（新用户赠送免费额度）
3. 点击右上角设置按钮，输入 API Key
4. 保存后即可开始使用

2. 开始创作

在输入框描述你想要的图表，例如：

画一个电商系统的微服务架构图，包括：
- 用户服务
- 订单服务
- 支付服务
- 商品服务
使用 API Gateway 作为统一入口

点击发送，AI 会实时生成专业的架构图！

3. 修改调整

对生成的图表不满意？继续对话：

把支付服务移到右边
添加一个消息队列
用蓝色主题

AI 会精确修改你指定的部分

4. 导出使用

满意后可以：

• 下载为 .drawio 文件
• 导出为图片
• 继续在 Draw.io 中编辑

开源代码

项目完全开源，欢迎 Star 和贡献！

GitHub: 仓库地址

本地运行

# 克隆项目
git clone https://github.com/Of-qinhai/siliconflow-ai-drawio.git

# 安装依赖
cd siliconflow-ai-drawio
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:4000 即可使用

# 一键部署
./deploy.sh

环境变量配置（可选）

如果你想为所有用户提供统一的 API Key，可以配置环境变量：

# .env.local
SILICONFLOW_API_KEY=你的API_KEY

使用技巧

1. 描述要详细

越详细的描述，AI 生成的图表越准确。可以包括：

• 模块名称和数量
• 连接关系和方向
• 颜色和样式偏好

2. 分步骤生成

复杂图表可以分步骤：

1. 先生成主要框架
2. 再添加细节模块
3. 最后调整样式

3. 善用修改功能

不需要重新生成整个图表，只需要告诉 AI 修改哪里

4. 选择合适的模型

• 复杂图表 → DeepSeek V3.2（推理能力强）
• 快速生成 → Qwen 系列（响应快）
• 平衡选择 → GLM-4.6（全能型）

未来规划

• 支持更多图表类型（甘特图、时序图、ER 图）
• 图表模板库（一键套用常见模板）
• 多人协作编辑
• AI 图表美化（自动优化布局和配色）
• 导出更多格式（SVG、PDF、Visio）

致谢

感谢以下开源项目和SiliconFlow云平台：

• Next.js
• React Drawio
• Vercel AI SDK
• Bizyair
• SiliconFlow

联系我

• 微信公众号：[码中悟道]
• GitHub: [[email protected]]
• 邮箱: [[email protected]]

---

如果觉得有用，欢迎点赞、在看、分享！

让更多人体验拥抱 AI 的各种魅力。