本文探讨了利用AI自动生成架构图、流程图和思维导图的方案。通过结构化的提示词和迭代修改，AI工具能够快速生成可定制的图表，极大地提高了工作效率，并适用于技术文档、项目规划、知识管理和演示汇报等多种场景。文章还介绍了Draw.io工具，并深入探讨了XML在Draw.io中的作用，为读者提供了更全面的理解。

💡 **绘制效率提升**：相比传统手动绘制，AI可以将图表创建时间从小时级缩短至分钟级，显著提高工作效率。

🎨 **可定制性强**：通过结构化提示词和迭代修改，可以精确控制图表样式、结构和内容，满足个性化需求。

🛠️ **Draw.io工具介绍**：Draw.io（现为 diagrams.net）是一款免费的在线流程图和图表绘制工具，支持多种图表类型，界面友好，功能强大。

💾 **XML文件作用**：Draw.io 的图表数据主要存储为 XML 格式，XML 格式具有可读性、跨平台和版本控制友好的优点。

⚙️ **XML文件结构**：详细介绍了Draw.io XML 文件的基本结构，包括<mxfile>、<diagram>、<mxGraphModel>、<mxCell>等关键元素，以及它们的作用。

AI自动生成复杂架构图，流程图，思维导图方案

1. 背景

在我们自己去绘制架构图，流程图，思维导图的时候，我们通常需要花费大量的时间去绘制。目前的一些直接生图的模型也只能生成简单的流程图，不能生成复杂的架构图,而且生成后不利于修改。下面是一些AI自动生成复杂架构图，流程图，思维导图的结果例子

2. 方案

2.1 准备工作

这里我们用cursor演示，其他AI编辑器也可以

搜索插件商店，安装draw.io插件

什么是draw.io，这里理解成一个画图工具即可，具体说明在补充说明处

生成提示词

# Role: Draw.io图表生成助手## Profile- Author: lgldl- Version: 0.1- Language: 中文- Description: 你是一个专业的 Draw.io（Diagrams.net）图表生成助手，能够根据用户需求生成符合 Draw.io 语法的图表，输出 XML 格式代码（mxGraph 格式），可直接导入 Draw.io。### 图表设计能力1. 生成三种专业图表：架构图（系统架构）、流程图（步骤和决策点）、思维导图（层级关系）2. 使用专业颜色方案，包括主色调、副色调、强调色，确保视觉协调与专业性3. 生成符合Draw.io标准的XML格式，支持直接导入使用### 技术实现能力1. 精通Draw.io语法与优化，包括形状库应用、连接设置和样式定义2. 提供完整可用的图表代码，确保无语法错误，支持直接导入3. 根据用户需求定制图表结构、流程和内容，支持动态数据更新## Rules1. 图表中标签、描述等内容使用简洁的中文，符合技术文档表达习惯2. 标签不超过10个字，确保清晰易读3. 使用指定的色彩方案：主色调#3366CC、副色调#7FBFFF、强调色#FF99664. 字体使用Helvetica，大小为12，连接线使用箭头表示流向5. 不使用不存在的组件或库，确保图表可立即使用## Workflow1. 首先，了解用户需求的图表类型（架构图、流程图或思维导图）2. 然后，根据需求生成符合Draw.io语法的XML代码3. 最后，提供导入指南和简短说明，确保用户可以顺利使用## InitializationAs a Draw.io图表生成助手, you must follow the Rules, you must talk to user in 中文，you must greet the user. Then introduce yourself and introduce the Workflow.## 详细技术规格【主色调】- 颜色值：#3366CC（深蓝色）- 用途：主要形状填充（fillColor）、连接线（strokeColor），统一视觉，传递专业与信任感- XML 示例：fillColor="#3366CC" strokeColor="#3366CC"【副色调】- 颜色值：#7FBFFF（天蓝色）- 用途：次要形状、标签背景或高亮元素，增强层次感，搭配主色调- XML 示例：fillColor="#7FBFFF"【强调色】- 颜色值：#FF9966（珊瑚橙）- 用途：突出重要元素、关键节点、特殊流程- XML 示例：fillColor="#FF9966"【字体颜色】- 深色背景：#FFFFFF（白色）  - 用途：深色填充上使用，保证高对比度与可读性  - XML 示例：fontColor="#FFFFFF"- 浅色背景：#333333（深灰）  - 用途：浅色填充上使用，清晰易读  - XML 示例：fontColor="#333333"【背景色】- 浅色模式：#FFF  - 用途：整体背景，干净专业，适配浅色模式  - XML 示例：<mxGraphModel backgroundColor="#FFFFFF" />【图表类型详细要求】- 架构图：包含用户指定的组件（如服务器、数据库、存储），使用对应形状库，清晰展示数据流- 流程图：包含开始、步骤、决策、结束节点，使用泳道区分角色或标注流程顺序- 思维导图：以中心节点为核心，分支清晰，使用副色调渐变增强视觉效果【输出要求】- 创建完整的 Draw.io 文件，后缀为`.drawio`- 附带简短中文文本描述，说明图表结构、颜色使用

上面是我设计的一套结构化的Prompt，以便更精准地控制生成结果。需要个性化，只需要更改对应的位置即可,如需要生成不同的颜色，只需要更改主色调与副色调部份即可这套提示词在claude-4上表现更佳

在我们设定提示词之后，发送我们的要求即可，这是我们第一次生成的内容：

我们想要他修改哪个部份，继续让他更改即可，如：

这是二次补充的内容

这里的神兽体系太乱了，我们直接截图让他修改

这就是我们最终优化完成的效果

我们可以不断的补充内容给AI让他生成我们最终需要的效果。

3. 总结与应用

通过本文介绍的方案，我们可以看到AI生成复杂架构图、流程图和思维导图的显著优势：

效率提升：相比传统手动绘制，使用AI可将图表创建时间从小时级缩短至分钟级，大大提高工作效率可定制性强：通过结构化提示词和迭代修改，可以精确控制图表样式、结构和内容

应用场景

技术文档：快速生成系统架构图，帮助团队理解复杂系统项目规划：创建详细流程图，明确项目各阶段和决策点知识管理：如本文展示的中国神话体系思维导图，帮助组织和展示复杂知识体系演示汇报：为演示文稿生成直观清晰的图表，提升沟通效果

我的微信是:

欢迎大家添加交流

4. 补充说明

AI生成失败的相关补救

AI自动生成的文件可能会存在一些错误，包含一些我们不需要的元素

如图所示，我们把问题发给他进行修复即可

修复后即可正常打开

Draw.io 是什么

Draw.io（现为 diagrams.net）是一个免费的在线流程图和图表绘制工具，支持创建流程图、组织结构图、UML 图、网络拓扑图等多种图表。它以用户友好的界面和强大的功能受到广泛欢迎。Draw.io 支持将图表保存为多种格式，其中 XML 是其核心文件格式之一，用于存储图表的结构化数据。XML 格式允许用户以文本方式保存、编辑和共享图表，便于版本控制和程序化处理。

XML 在 Draw.io 中的作用

Draw.io 的图表数据主要存储为 XML 格式（通常以 .drawio 文件扩展名保存，实际上是 XML 文件）。XML 文件包含图表的完整描述，包括节点、连接线、样式、文本等信息。这种格式具有以下优点：

可读性：XML 是文本格式，易于阅读和手动编辑。跨平台：支持在不同平台和工具间导入导出。版本控制友好：便于与 Git 等版本控制系统结合，跟踪图表变更。可扩展性：开发者可以通过解析 XML 实现自动化处理或自定义功能。

Draw.io XML 文件的基本结构

Draw.io 的 XML 文件主要基于 mxGraph 库（Draw.io 的底层图形库）的格式。一个典型的 Draw.io XML 文件结构如下：

<mxfile host="app.diagrams.net" modified="2025-06-18T15:03:00.000Z" agent="..." version="...">  <diagram id="..." name="Page-1">    <mxGraphModel dx="..." dy="..." grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="..." pageHeight="..." math="0" shadow="0">      <root>        <mxCell id="0" />        <mxCell id="1" parent="0" />        <!-- 图表元素 -->        <mxCell id="..." value="..." style="..." vertex="1" parent="1">          <mxGeometry x="..." y="..." width="..." height="..." as="geometry" />        </mxCell>        <!-- 连接线 -->        <mxCell id="..." source="..." target="..." edge="1" parent="1">          <mxGeometry relative="1" as="geometry" />        </mxCell>      </root>    </mxGraphModel>  </diagram></mxfile>

关键元素说明

<mxfile>：根节点，包含文件元信息，如主机、修改时间等。<diagram>：表示一个图表页面，包含页面名称和 ID。<mxGraphModel>：定义图表的网格、缩放比例等全局属性。<root>：包含所有图表元素的容器。<mxCell>：表示图表中的节点（vertex）或连接线（edge）。
id：元素的唯一标识符。value：节点的文本内容（支持 HTML 格式）。style：定义样式，如形状、颜色、字体等。vertex：值为 1 表示节点，edge 为 1 表示连接线。source 和 target：连接线的起点和终点，引用节点的 id。
<mxGeometry>：定义元素的位置（x, y）和大小（width, height）。

简单 XML 示例

以下是一个简单的 Draw.io XML 示例，表示一个包含两个矩形节点和一条连接线的图表：

<mxfile>  <diagram name="Page-1">    <mxGraphModel>      <root>        <mxCell id="0" />        <mxCell id="1" parent="0" />        <!-- 矩形节点1 -->        <mxCell id="2" value="Node 1" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">          <mxGeometry x="100" y="100" width="100" height="50" as="geometry" />        </mxCell>        <!-- 矩形节点2 -->        <mxCell id="3" value="Node 2" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">          <mxGeometry x="300" y="100" width="100" height="50" as="geometry" />        </mxCell>        <!-- 连接线 -->        <mxCell id="4" source="2" target="3" edge="1" parent="1">          <mxGeometry relative="1" as="geometry" />        </mxCell>      </root>    </mxGraphModel>  </diagram></mxfile>

如何编辑 XML 文件

因为安装了插件之后，默认是打卡的图表编辑

选择文本编辑即可用文本编辑器打开

注意事项

XML 文件较大时，手动编辑可能复杂，建议结合 Draw.io 的图形界面操作。确保 id 唯一，避免冲突。复杂的样式属性可在 Draw.io 官网或 mxGraph 文档中查找详细说明。

通过 XML，Draw.io 提供了强大的灵活性，适合开发者在博客或技术文档中展示图表结构，或进行程序化处理。更多信息可参考 diagrams.net 官网 或 mxGraph 文档。