AI 可编辑绘图

一张图需要两种文件

图片适合阅读，源文件适合修改。做技术图时，我会先保留 .drawio 源文件，再按使用场景导出 SVG、PNG 或 PDF。不要把“看起来像一张图”和“关系表达准确”混为一谈。

这条流程面向结构化图表。插画、产品照片等视觉任务应使用相应的图像工具；不要为了追求可编辑而把所有图都做成方框。

从描述到交付的六步

1. 先列节点和关系

写清楚有哪些角色、系统或步骤，谁连接谁，箭头表示调用、数据还是时间顺序。架构图中的相邻位置不等于真实依赖；流程图中的每个分支都应有明确含义。

2. 确定读者和图的粒度

给管理者看的概览图与研发排错用的细节图，不应该承载相同数量的信息。先控制在一屏能读清的范围；复杂系统可以拆成总览和局部图。

3. 让 AI 输出可编辑结构

指定输出 draw.io 格式，并要求文字、节点、连线保持可编辑。可以使用 Bruce Drawio 辅助生成与校验，也可以在对话中提供清楚的结构描述。

4. 在实际编辑器中打开

使用 Draw.io Quick Launcher 将支持的图表代码送入编辑器，或直接打开本地 .drawio 文件。支持范围以扩展当前说明为准；如果识别失败，保留代码并手动导入，不要反复覆盖原稿。

5. 检查语义，再调整版式

先逐条核对连线、节点名称与分支条件，再调整对齐、字号和间距。AI 容易生成视觉上整齐、但关系并不准确的图；校验 XML 格式也不能验证业务逻辑。

6. 导出并留下源文件

按交付场景导出图片，在目标文档中查看实际清晰度。把源文件、导出图和简短说明一起保存；后续改图时，始终从源文件开始。

可复制的绘图提示词

请为下面的流程生成一份可编辑的 draw.io 图表：

流程：参考资料 → 内容整理 → 人工核验 → 文档交付。
人工核验不通过时，返回“内容整理”。

要求：
1. 输出 draw.io XML，文字、节点和连线分别可编辑。
2. 从左到右排列，分支标明“通过 / 需修改”。
3. 使用清楚的中文标签，不增加未提供的业务步骤。
4. 提交前核对节点、箭头方向与分支是否一致。
5. 如果无法校验或预览，请明确说明，不要宣称已通过。

容易踩的坑

• 只有图片，没有源文件。 改一个词也可能需要重新生成。
• 用颜色代替说明。 即使黑白打印或无法区分颜色，读者也应能看懂关系。
• 一张图塞进所有层级。 过多交叉连线会让图失去解释价值。
• 把内部架构交给未批准的服务。 使用样例或脱敏资料，先确认处理边界。
• 把导出成功当作验收通过。 最后必须在实际交付位置看一遍。

工具入口

• Bruce Drawio：Agent Skill 与图表生成工作流。
• Draw.io Quick Launcher：连接 AI 对话与图表编辑器。
• diagrams.net：打开与编辑图表时，留意所选择的存储位置。