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生成復雜架構圖、流程圖和思維導圖的顯著優勢:
- 效率提升:相比傳統手動繪制,使用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 文檔。