画技术架构图，是很多开发者的痛点。
你要打开 draw.io，拖拖拽拽找图标，调整对齐，选配色，画箭头...一张简单的微服务架构图，可能要折腾半小时。更痛苦的是，画到一半发现结构不对，得重来。
其他技能帮你生成SVG、png又不可修改和编辑，真痛苦！！！
有没有更简单的方式？
今天介绍亲测的 FlowForge，就是来解决这个问题的。
它是一个 Claude Code Skill，你只需要用自然语言描述想要什么图，它就能自动生成专业的 .drawio 文件。流程图、架构图、对比图、时间轴...说句话就搞定。
GitHub：
一句话生成专业图表
FlowForge 的使用方式极其简单。在 Claude Code 里直接说：
画一个用户注册流程图
帮我画 RAG 的检索流程
对比一下 PPO、DPO、GRPO 算法
画一个微服务架构图
然后 FlowForge 会：
- 理解你的需求 —— 识别图表类型和结构
- 展示 ASCII 草图 —— 先用文字草图跟你确认结构对不对
- 生成 draw.io 文件 —— 输出专业的
.drawioXML 文件 - 你在 draw.io 里打开 —— 可以继续编辑调整
整个过程就像有个设计师在听你描述，然后快速出图给你看。
为什么用 draw.io XML
FlowForge 选择生成 draw.io XML 格式，而不是直接出图片，这个设计很巧妙：
可编辑 —— 生成的不是死图，你可以在任何 draw.io 编辑器里继续调整位置、修改文字、换配色。
跨平台 —— 浏览器、桌面应用、VS Code 插件、Confluence 都支持 draw.io 格式。
生成可控 —— 用绝对坐标和显式样式，Claude 能输出稳定可预测的布局，不会每次生成都长得不一样。
简单说，FlowForge 不是替代 draw.io，而是帮你快速生成初稿，然后你在 draw.io 里精修。
11种布局算法，什么图都能画
FlowForge 内置了 11 种布局算法，覆盖了大部分技术图表场景：
流程类：
flow—— 线性流程，A → B → Cflow-vertical—— 纵向流程，自上而下loop—— 循环流程，CI/CD、训练循环
结构类：
layers—— 层级堆叠，多层架构图tree—— 树形结构，决策树、分类hub—— 中心辐射，一个核心 + 多个分支
对比类：
compare—— 左右对比，A vs Bcolumns—— 并列列，3+ 个概念并列matrix—— 矩阵，多维度对比
其他：
funnel—— 漏斗，筛选转化timeline—— 时间轴，版本演进sequence—— 序列图，组件交互
基本上，你平时画的技术图表，这里都有对应的布局。
5套配色主题，告别"彩虹色"灾难
画技术图最怕什么？配色灾难。
有些人画图，每个节点一个颜色，最后变成"彩虹图"，看着就乱。FlowForge 内置了 5 套专业配色主题，帮你解决这个问题：
tech-blue（默认） —— 蓝灰为主 + 暖色点缀，技术文档标配
morandi —— 灰绿 + 烟紫，设计作品集、品牌方案
mint —— 薄荷绿 + 暖黄，产品流程、用户旅程
terracotta —— 陶土 + 沙色，商业策略、运营流程
indigo —— 靛蓝 + 紫罗兰，技术演示、产品发布
FlowForge 的配色原则是**"节制优于装饰"**。大部分节点用主导色系，强调色只用在关键节点上，像手术刀一样精准，而不是像刷子一样乱刷。
草图先行，避免返工
FlowForge 有一个很贴心的设计：生成 XML 前先展示 ASCII 草图。
比如你说"画一个 RAG 流程"，它不会直接生成文件，而是先给你看：
[用户查询] → [Query理解] → [向量检索] → [重排序] → [生成回答]
↓
[知识库]
你可以说"不对，少了缓存层"，或者"检索和重排序应该是并行的"。确认结构没问题了，再生成正式的图表。
这个"草图先行"的工作流，能避免很多返工。毕竟改文字草图比改 XML 文件容易多了。
亲测有效的使用场景
根据项目文档和示例，FlowForge 特别适合这些场景：
系统架构图 —— 微服务架构、数据平台架构、LLM 全栈架构
算法对比图 —— PPO vs DPO vs GRPO、不同模型架构对比
流程图 —— CI/CD 流水线、用户注册流程、数据处理流程
决策树 —— 技术选型决策、数据库选择流程
时间轴 —— 产品版本演进、技术发展历程
项目仓库里有个 gallery/ 文件夹，里面有 9 个示例图，覆盖了全部 5 套主题和常用图表类型，可以直接参考。
怎么安装使用
FlowForge 是 Claude Code 的 Skill，安装很简单：
方式一：作为插件安装（推荐）
在 Claude Code 里执行：
/plugin install https://github.com/winstonyoyo/flowforge-skill
方式二：手动安装
git clone https://github.com/winstonyoyo/flowforge-skill.git
cp -r flowforge-skill/skills/FlowForge ~/.claude/skills/
装完后重启 Claude Code，就可以直接用了。
设计理念：确定性优于智能
FlowForge 的设计理念很有意思："布局是确定性的"。
什么意思？每种图表类型都有明确的坐标公式，不是让 AI "猜" 位置。比如 flow 类型的节点，第一个在 (100, 100)，第二个在 (300, 100)，第三个在 (500, 100)... 是固定的规则，不是随机的。
这样做的好处是：
- 可预测 —— 同样的描述，生成同样的布局
- 可调试 —— 布局有问题，可以查公式找原因
- 可扩展 —— 新增图表类型，只需要定义新的布局公式
这种"确定性优于智能"的思路，在 AI 工具里反而更实用。毕竟画图不需要创造性，需要稳定性和可控性。
GitHub：
写在最后
FlowForge 解决的是一个很实际的问题：降低画技术图的门槛。
不是每个人都擅长用 draw.io，也不是每个人都有时间慢慢调整布局。FlowForge 让你用自然语言描述需求，快速生成专业图表的初稿，然后你在 draw.io 里精修。
它的定位很明确：不是替代设计师，而是帮开发者快速出图。11种布局、5套主题、草图先行的工作流，都是围绕这个目标设计的。
如果你也经常需要画架构图、流程图，又不想在 draw.io 里拖拖拽拽，FlowForge 值得一试。
关注
如果这篇文章对你有帮助，欢迎点赞、收藏、转发。我会持续分享实用的 AI 编程工具和效率技巧，关注我，一起用 AI 更高效地工作。
