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 文档。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/85421.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/85421.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/85421.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

129. 求根节点到叶节点数字之和 --- DFS +回溯（js）

129. 求根节点到叶节点数字之和 --- DFS +回溯（js）

129. 求根节点到叶节点数字之和 --- DFS 回溯&#xff08;js&#xff09; 题目描述解题思路完整代码 题目描述 129. 求根节点到叶节点数字之和 解题思路 和 257. 二叉树的所有路径&#xff08;js&#xff09; 是一样的思路。 不一样的地方就是遇到叶子节点的时候把路径拼接…
阅读更多...
SpringBoot电脑商城项目--修改默认收货地址

SpringBoot电脑商城项目--修改默认收货地址

1. 修改默认收货地址-持久层 1.1 规划sql语句 检测当前用户向设置为默认收货地址的这条数据是否存在 SELECT * FROM t_address WHERE aid#{aid} 在修改用户的收获默认地址之前&#xff0c;先将所有的收货地址设置为非默认 UPDATE t_address SET is_default0 WHERE uid#{uid} …
阅读更多...
LabVIEW FPGA 资源扩展

LabVIEW FPGA 资源扩展

针对NI CompactRIO 9045 控制器 Kintex-7 70T FPGA 资源不足问题&#xff0c;通过 NI 9151 R 系列可重配置 I/O 模块扩展外部 FPGA 处理能力&#xff0c;在保留原有机箱架构下实现实时任务分流&#xff0c;解决Slice、LUT 等资源紧张问题&#xff0c;提升系统并行处理能力。 ​…
阅读更多...
【漏洞复现】Apache Kafka Connect 任意文件读取漏洞(CVE-2025-27817)

【漏洞复现】Apache Kafka Connect 任意文件读取漏洞(CVE-2025-27817)

文章目录 前言一、Apache Kafka 简介二、漏洞描述三、影响版本四、FOFA查询语句五、漏洞原理分析六、漏洞复现七、修复建议前言 由于Apache Kafka客户端未对用户输入进行严格验证和限制，未经身份验证的攻击者可通过构造恶意配置读取环境变量或磁盘任意内容，或向非预期位置发…
阅读更多...
day13-软件包管理

day13-软件包管理

1.每日复盘与今日内容 1.1复盘 yum源/apt源配置文件,核心下载地址.二进制部署服务.编译安装软件. 2.软件包管理-实战部分 2.1 yum源/apt源配置 源下载软件的地址配置多种源 1️⃣系统也有默认的源&#xff0c;里面也包含很多常用的软件. 2️⃣安装nginx、yum源 3️⃣安…
阅读更多...
榕壹云快递寄件系统：聚合快递、智能追踪、二次开发，一站式物流解决方案

榕壹云快递寄件系统：聚合快递、智能追踪、二次开发，一站式物流解决方案

在电商物流高速发展的今天&#xff0c;快递寄件需求呈现爆炸式增长。传统分散的寄件方式效率低下&#xff0c;用户迫切需要一个整合多家快递公司的便捷平台。榕壹云公司开发的快递寄件系统应运而生&#xff0c;通过聚合多家快递资源、优化操作流程、提供丰富的功能模块&#xf…
阅读更多...
一款功能强大的专业CSV编辑工具

一款功能强大的专业CSV编辑工具

Rons Data Edit是一款为Windows操作系统设计的现代CSV文件编辑器&#xff0c;它结合了优雅、强大和易用性&#xff0c;它可以打开任何格式的分隔文本文件(如CSV、TSV等)&#xff0c;并允许用户完全控制文件的内容和结构。 功能特点 支持明暗主题&#xff0c;可以在预定义的20多…
阅读更多...
什么是软件架构？和系统设计有何区别？

什么是软件架构？和系统设计有何区别？

一、软件架构的定义与核心要素 1.1 基本概念 软件架构(Software Architecture)是指系统的高层结构，包含： 组件(Components)及其相互关系指导设计的架构原则和决策满足质量属性(Quality Attributes)的技术方案引用权威定义：IEEE 1471标准将架构描述为"系统的基本组织，…
阅读更多...
九尾狐编程语言新算法“超维时空演算体”

九尾狐编程语言新算法“超维时空演算体”

一、核心架构设计 1&#xff0e;量子&#xfe63;生物混合计算基座 ◇底层采用量子纠缠拓扑网络&#xff0c;处理超越经 典计算复杂度的问题&#xff08;如 NP - Hard 优化&#xff09;&#xff0e;中层嵌入类脑脉冲神经网络&#xff0c;模拟人脑跨领域联想能力&#xff0c;…
阅读更多...
RoboVerse--为机器人学习打造的大一统世界--UC Berkeley...--2025.4.26

RoboVerse--为机器人学习打造的大一统世界--UC Berkeley...--2025.4.26

ROBOVERSE 包含一个可扩展的仿真平台、大规模的合成数据集&#xff0c;以及统一的基准测试。 该仿真平台通过统一协议&#xff0c;支持新任务和演示的无缝接入&#xff0c;保证了灵活性和可扩展性。该数据集包含 1,000 多个多样化任务及超过 1,000 万个状态转换&#xff0c;构…
阅读更多...
Fiddler抓包工具实战指南：结合Charles、Postman优化Web与移动调试流程

Fiddler抓包工具实战指南：结合Charles、Postman优化Web与移动调试流程

在Web开发与移动端调试的工作流程中&#xff0c;网络请求的可视化、分析和控制能力对开发效率有着决定性影响。特别是在处理复杂接口联调、性能瓶颈排查&#xff0c;甚至安全漏洞分析时&#xff0c;一款可靠的抓包工具几乎成为了每一位开发者的“标配”。 Fiddler作为长期深受…
阅读更多...
6/19作业

6/19作业

思维导图 单选题 树 1. 向一棵平衡二叉树中插入一个结点后&#xff0c;一定会改变其平衡性。 &#xff08; &#xff09; A 正确 B 错误 正确答案&#xff1a;B 你的答案&#xff1a;A 官方解析&#xff1a; 向平衡二叉树中插入节点并不一定会改变其平衡性。平衡二叉树(如AVL树…
阅读更多...
angular 图斑点击，列表选中并滚动到中间位置

angular 图斑点击，列表选中并滚动到中间位置

如图所示&#xff1a; html代码&#xff1a; 1. #listContainer 2. [attr.data-id]"center.id" <div class"resTableCss" #listContainer><div *ngFor"let center of tbList" [attr.data-id]"center.id" class"res-it…
阅读更多...
Java线程同步的简单理解

Java线程同步的简单理解

为什么需要线程同步 对于以下代码&#xff1a;两个线程对同一个变量分别进行100000次加一和减一操作&#xff0c;但是每次运行的输出基本都是不同的&#xff08;注意线程的join操作保证了两个线程都运行完之后才执行System.out.println&#xff09; import org.junit.Test;pu…
阅读更多...
Makefile的通用模板 + 倒计时小程序（13）

Makefile的通用模板 + 倒计时小程序（13）

文章目录 Makefile 的通用模板1. Makefile 的推导原则2. 设计 Makefile 的通用模板3. 通用模板代码&#xff08;可以直接拿来用&#xff09; Linux 第一个系统程序-进度条&#xff08;7-3.00.00&#xff09;1. 补充回车与换行2. 行缓冲区3. 倒计时小程序 Makefile 的通用模板 …
阅读更多...
【ArcGIS】水文分析与流域划分

【ArcGIS】水文分析与流域划分

【ArcGIS】水文分析与流域划分 一、基础数据处理1、下载数据2、拼接DEM数据3、填充洼地4、流向分析5、流量分析6、河网生成&#xff08;栅格计算器&#xff09;7、河网分级8、河流链接&#xff08;提取子流域的关键&#xff09; 二、多个小流域提取1、捕捉倾泻点2、集水区&…
阅读更多...
【C++】简单工厂模式/工厂方法模式/抽象工厂模式对比

【C++】简单工厂模式/工厂方法模式/抽象工厂模式对比

目录 一、简单工厂模式&#xff08;Simple Factory Pattern&#xff09;二、工厂方法模式&#xff08;Factory Method Pattern&#xff09;三、抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;四、三者对比总结五、选择建议如果这篇文章对你有所帮助&#xff0c…
阅读更多...
博图SCL中CONTINUE语句详解：高效循环控制案例

博图SCL中CONTINUE语句详解：高效循环控制案例

博图SCL中CONTINUE语句详解&#xff1a;高效循环控制利器 在博图&#xff08;TIA Portal&#xff09;的SCL&#xff08;结构化控制语言&#xff09;编程中&#xff0c;CONTINUE语句是优化循环流程的强大工具。它允许您**跳过当前循环迭代的剩余代码&#xff0c;直接进入下一次…
阅读更多...
django HttpResponse 加返回码

django HttpResponse 加返回码

在Django框架中&#xff0c;HttpResponse对象是用来构造HTTP响应并将其发送回客户端的。当你创建一个HttpResponse对象时&#xff0c;你可以指定一个返回码&#xff08;或状态码&#xff09;&#xff0c;这是HTTP响应的一部分&#xff0c;用来表示请求的处理结果。状态码是三位…
阅读更多...
【俄语图片文字识别】批量识别俄语图片文字，识别俄语图片文字的操作步骤和注意事项

【俄语图片文字识别】批量识别俄语图片文字，识别俄语图片文字的操作步骤和注意事项

场景&#xff1a;在俄语学习&#xff0c;俄语工作中经常遇到一些文字图片&#xff0c;如何将韩语图片文字从图片上扣下来&#xff0c;我们可以直接复制粘贴&#xff0c;提高我们的工作效率 我们会用到一款小工具&#xff1a; 软件操作步骤&#xff1a; 第一步、打开软件 第二…
阅读更多...
最新文章

Copyright @ 2022~2023