一文教你把 AI 生成的流程图“变好看”
大模型画流程图常见三宗罪:节点挤、分支乱、配色土。
下边这个方案带你彻底解决(附提示词)⬇️⬇️⬇️
1、核心思路(极简版)
让模型输出合法的 draw.io XML;
预设配色/形状/方向/间距等“审美参数”;
给清单式流程数据(节点+分支+标签);
导入drawio文件并下载流程图。
2、大模型生成结构化数据
提示词:帮我生成一个关于[主题]的流程文档,可能包含:起点、步骤、判断、终点等要素,示例:电商退货流程,
• 起点:开始:用户申请退货
• 步骤:商家接收申请
• 判断:退货原因?(质量问题→商家承担运费;非质量问题→用户承担运费)
• 判断:检查退回商品?(符合→退款成功;不符合→拒绝退款)
• 终点:流程结束
3、“审美参数”设置
复制提示词直接使用:你现在是“draw.io 流程图生成器”。请根据“流程数据”生成可导入 diagrams.net 的 .drawio(XML):
1)根节点必须包含:<mxfile><diagram><mxGraphModel><root>;并包含 id=0 和 id=1 的默认单元。
2)每个节点用 <mxCell vertex="1" parent="1">,包含 <mxGeometry x y width height as="geometry">。
3)连线用 <mxCell edge="1" parent="1" source= target= style="endArrow=block;html=1;strokeColor=#4A5568;strokeWidth=2;">,并在 value 写条件文字(如 Yes/No)。
4)样式按如下审美参数:方向 Top→Down;节点形状/颜色按我给定;节点间距 y=100、x=220;统一圆角样式 rounded=1;whiteSpace=wrap;html=1;。
5)只输出 XML 内容(从 <?xml ...?> 到 </mxfile>),不要解释、不要 Markdown 代码块。
4、保存drawio文件
如果你的大模型无法直接生成drawio文件,则打开txt文档,将生成的代码粘进去并修改文件后缀为.drawio
5、导入与导出
- 导入:打开
app.diagrams.net → 文件(File) → 导入(Import) → 从设备选择 .drawio 文件
- 编辑:可以左右拖拽节点、对齐布局、添加 Logo 或注释说明
- 导出:文件(File) → 导出为(Export as) → PNG / SVG(记得勾选“透明背景”“高分辨率”)
- 小技巧:在菜单中选择“调整图形 → 布局 → 垂直流” 可以一键理顺布局,让图更整齐
6、获取示例模版
好看的流程图=结构清晰 + 审美预设 + 可编辑。
用这套 Prompt 模板,你能让 AI 一步产出“可导入、可微调、可导出”的成品图。
如果需要我把模板 + 示例打包成 .drawio 源文件合集,评论区扣「流程图」。