AI自動生成復雜架構圖,流程圖,思維導圖

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 回溯&#xff08;js&#xff09; 題目描述解題思路完整代碼 題目描述 129. 求根節點到葉節點數字之和 解題思路 和 257. 二叉樹的所有路徑&#xff08;js&#xff09; 是一樣的思路。 不一樣的地方就是遇到葉子節點的時候把路徑拼接…

SpringBoot電腦商城項目--修改默認收貨地址

1. 修改默認收貨地址-持久層 1.1 規劃sql語句 檢測當前用戶向設置為默認收貨地址的這條數據是否存在 SELECT * FROM t_address WHERE aid#{aid} 在修改用戶的收獲默認地址之前&#xff0c;先將所有的收貨地址設置為非默認 UPDATE t_address SET is_default0 WHERE uid#{uid} …

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 簡介二、漏洞描述三、影響版本四、FOFA查詢語句五、漏洞原理分析六、漏洞復現七、修復建議前言 由于Apache Kafka客戶端未對用戶輸入進行嚴格驗證和限制,未經身份驗證的攻擊者可通過構造惡意配置讀取環境變量或磁盤任意內容,或向非預期位置發…

day13-軟件包管理

1.每日復盤與今日內容 1.1復盤 yum源/apt源配置文件,核心下載地址.二進制部署服務.編譯安裝軟件. 2.軟件包管理-實戰部分 2.1 yum源/apt源配置 源下載軟件的地址配置多種源 1??系統也有默認的源&#xff0c;里面也包含很多常用的軟件. 2??安裝nginx、yum源 3??安…

榕壹云快遞寄件系統:聚合快遞、智能追蹤、二次開發,一站式物流解決方案

在電商物流高速發展的今天&#xff0c;快遞寄件需求呈現爆炸式增長。傳統分散的寄件方式效率低下&#xff0c;用戶迫切需要一個整合多家快遞公司的便捷平臺。榕壹云公司開發的快遞寄件系統應運而生&#xff0c;通過聚合多家快遞資源、優化操作流程、提供豐富的功能模塊&#xf…

一款功能強大的專業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 包含一個可擴展的仿真平臺、大規模的合成數據集&#xff0c;以及統一的基準測試。 該仿真平臺通過統一協議&#xff0c;支持新任務和演示的無縫接入&#xff0c;保證了靈活性和可擴展性。該數據集包含 1,000 多個多樣化任務及超過 1,000 萬個狀態轉換&#xff0c;構…

Fiddler抓包工具實戰指南:結合Charles、Postman優化Web與移動調試流程

在Web開發與移動端調試的工作流程中&#xff0c;網絡請求的可視化、分析和控制能力對開發效率有著決定性影響。特別是在處理復雜接口聯調、性能瓶頸排查&#xff0c;甚至安全漏洞分析時&#xff0c;一款可靠的抓包工具幾乎成為了每一位開發者的“標配”。 Fiddler作為長期深受…

6/19作業

思維導圖 單選題 樹 1. 向一棵平衡二叉樹中插入一個結點后&#xff0c;一定會改變其平衡性。 &#xff08; &#xff09; A 正確 B 錯誤 正確答案&#xff1a;B 你的答案&#xff1a;A 官方解析&#xff1a; 向平衡二叉樹中插入節點并不一定會改變其平衡性。平衡二叉樹(如AVL樹…

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線程同步的簡單理解

為什么需要線程同步 對于以下代碼&#xff1a;兩個線程對同一個變量分別進行100000次加一和減一操作&#xff0c;但是每次運行的輸出基本都是不同的&#xff08;注意線程的join操作保證了兩個線程都運行完之后才執行System.out.println&#xff09; import org.junit.Test;pu…

Makefile的通用模板 + 倒計時小程序(13)

文章目錄 Makefile 的通用模板1. Makefile 的推導原則2. 設計 Makefile 的通用模板3. 通用模板代碼&#xff08;可以直接拿來用&#xff09; Linux 第一個系統程序-進度條&#xff08;7-3.00.00&#xff09;1. 補充回車與換行2. 行緩沖區3. 倒計時小程序 Makefile 的通用模板 …

【ArcGIS】水文分析與流域劃分

【ArcGIS】水文分析與流域劃分 一、基礎數據處理1、下載數據2、拼接DEM數據3、填充洼地4、流向分析5、流量分析6、河網生成&#xff08;柵格計算器&#xff09;7、河網分級8、河流鏈接&#xff08;提取子流域的關鍵&#xff09; 二、多個小流域提取1、捕捉傾瀉點2、集水區&…

【C++】簡單工廠模式/工廠方法模式/抽象工廠模式對比

目錄 一、簡單工廠模式&#xff08;Simple Factory Pattern&#xff09;二、工廠方法模式&#xff08;Factory Method Pattern&#xff09;三、抽象工廠模式&#xff08;Abstract Factory Pattern&#xff09;四、三者對比總結五、選擇建議如果這篇文章對你有所幫助&#xff0c…

博圖SCL中CONTINUE語句詳解:高效循環控制案例

博圖SCL中CONTINUE語句詳解&#xff1a;高效循環控制利器 在博圖&#xff08;TIA Portal&#xff09;的SCL&#xff08;結構化控制語言&#xff09;編程中&#xff0c;CONTINUE語句是優化循環流程的強大工具。它允許您**跳過當前循環迭代的剩余代碼&#xff0c;直接進入下一次…

django HttpResponse 加返回碼

在Django框架中&#xff0c;HttpResponse對象是用來構造HTTP響應并將其發送回客戶端的。當你創建一個HttpResponse對象時&#xff0c;你可以指定一個返回碼&#xff08;或狀態碼&#xff09;&#xff0c;這是HTTP響應的一部分&#xff0c;用來表示請求的處理結果。狀態碼是三位…

【俄語圖片文字識別】批量識別俄語圖片文字,識別俄語圖片文字的操作步驟和注意事項

場景&#xff1a;在俄語學習&#xff0c;俄語工作中經常遇到一些文字圖片&#xff0c;如何將韓語圖片文字從圖片上扣下來&#xff0c;我們可以直接復制粘貼&#xff0c;提高我們的工作效率 我們會用到一款小工具&#xff1a; 軟件操作步驟&#xff1a; 第一步、打開軟件 第二…