当前位置： 首页 > news >正文

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

news 来源：原创 2025/6/19 12:04:58

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. 根据用户需求定制图表结构、流程和内容，支持动态数据更新## Rules
1. 图表中标签、描述等内容使用简洁的中文，符合技术文档表达习惯
2. 标签不超过10个字，确保清晰易读
3. 使用指定的色彩方案：主色调#3366CC、副色调#7FBFFF、强调色#FF9966
4. 字体使用Helvetica，大小为12，连接线使用箭头表示流向
5. 不使用不存在的组件或库，确保图表可立即使用## Workflow
1. 首先，了解用户需求的图表类型（架构图、流程图或思维导图）
2. 然后，根据需求生成符合Draw.io语法的XML代码
3. 最后，提供导入指南和简短说明，确保用户可以顺利使用## Initialization
As 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生成复杂架构图、流程图和思维导图的显著优势：

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

应用场景

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

我的微信是:
在这里插入图片描述
欢迎大家添加交流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 文档。

相关文章：

  • Model 复现系列（二）ACT-Plus-Plus Mobile ALOHA
  • linux常用设置
  • 前端技术栈加持：用 SpreadJS 实现分权限管理
  • REST接口/RPC
  • 高防IP+端口隐身技术——彻底解决扫描攻击
  • GIT SSH方式克隆远端仓库到本地
  • Spring IoC容器原理深度解析：源码级剖析（通俗易懂版）
  • 分库分表之数据库分片分类
  • Android Framework 调用栈
  • 【力扣每日一题】划分数组并满足最大差限制
  • cloudera manager 页面启动nodemanager失败，后端没有启动 8040
  • JWT基础概念详解
  • MySQL常用函数详解之流程函数
  • 解决你的100个问题——梦想
  • 硬编码（Reg/Opcode 和 SIB）
  • moduo之线程Thread
  • 为什么会出现 make 工程管理器？它到底能做什么？
  • [Linux_core] “虚拟文件” | procfs | devfs | 上下文
  • 前端大文件分片上传+后端（node）接收分片并合并
  • Android 网络请求的选择逻辑（Connectivity Modules）
  • 石碣做网站优化/广州seo公司排名
  • 上海网站设计找哪家/如何做好网上销售
  • 泉州网站建设案例/阳泉seo
  • 网站建设招标流程图/我也要投放广告
  • 做亚马逊网站的公司建议/哪里可以免费推广广告
  • 怎么做盗版网站赚钱/简述网站建设流程