AI Skills
draw-io-diagram-generator

draw-io-diagram-generator

熱門

當需要建立、編輯或生成 draw.io 圖表檔案（.drawio、.drawio.svg、.drawio.png）時使用。涵蓋 mxGraph XML 撰寫、圖形庫（shape libraries）、樣式字串（style strings）、流程圖、系統架構圖、時序圖（sequence diagrams）、ER 圖、UML 類別圖、網路拓撲圖、佈局策略、hediet.vscode-drawio VS Code 擴充功能，以及從接收需求到生成可直接開啟檔案的完整 Agent 工作流程。

3.7萬星標
4693分支
更新於 2026/8/1
獲取技能源代碼

相關技能

agent-mesh-coordinator7.2萬mempalace5.9萬agent-tool-builder4.7萬
SKILL.md
唯讀
名稱
draw-io-diagram-generator
描述

當需要建立、編輯或生成 draw.io 圖表檔案（.drawio、.drawio.svg、.drawio.png）時使用。涵蓋 mxGraph XML 撰寫、圖形庫（shape libraries）、樣式字串（style strings）、流程圖、系統架構圖、時序圖（sequence diagrams）、ER 圖、UML 類別圖、網路拓撲圖、佈局策略、hediet.vscode-drawio VS Code 擴充功能，以及從接收需求到生成可直接開啟檔案的完整 Agent 工作流程。

Draw.io Diagram Generator

本 Skill 可協助您生成、編輯與驗證具備正確 mxGraph XML 結構的 draw.io（.drawio）圖表檔案。所有生成的檔案皆可在 Draw.io VS Code 擴充功能（hediet.vscode-drawio）中直接開啟，無需任何手動修復。若您偏好，亦可在 draw.io Web 應用程式或桌面版應用程式中開啟檔案。

1. 何時使用本 Skill

觸發語句（看到以下關鍵字時載入本 Skill）

  • 「create a diagram」（建立圖表）、「draw a flowchart」（畫流程圖）、「generate an architecture diagram」（生成架構圖）
  • 「design a sequence diagram」（設計時序圖）、「make a UML class diagram」（製作 UML 類別圖）、「build an ER diagram」（建立 ER 圖）
  • 「add a .drawio file」（新增 .drawio 檔案）、「update the diagram」（更新圖表）、「visualise the flow」（將流程視覺化）
  • 「document the architecture」（撰寫架構文件）、「show the data model」（顯示資料模型）、「diagram the service interactions」（繪製服務互動圖）
  • 任何建立或修改 .drawio、.drawio.svg 或 .drawio.png 檔案的請求

支援的圖表類型

圖表類型 可用範本 說明
流程圖 (Flowchart) assets/templates/flowchart.drawio 包含決策與分支的流程步驟
系統架構圖 (System Architecture) assets/templates/architecture.drawio 多層式／分層服務架構
時序圖 (Sequence Diagram) assets/templates/sequence.drawio 參與者生命線與時間訊息流
ER 圖 (ER Diagram) assets/templates/er-diagram.drawio 具備關聯性的資料庫資料表
UML 類別圖 (UML Class Diagram) assets/templates/uml-class.drawio 類別、介面、列舉與其相互關係
網路拓撲圖 (Network Topology) (使用圖形庫) 路由器、伺服器、防火牆、子網路
BPMN 工作流 (BPMN Workflow) (使用圖形庫) 商業流程事件、任務與閘道
心智圖 (Mind Map) (手動繪製) 以核心主題延伸的放射狀分支

2. 先決條件

  • 若在啟用 VS Code 整合的環境下執行，請安裝 draw.io 擴充功能：draw.io VS Code extension — hediet.vscode-drawio（擴充功能 ID）。可透過以下命令安裝：
    ext install hediet.vscode-drawio
  • 支援的副檔名：.drawio、.drawio.svg、.drawio.png
  • Python 3.8+（可選）— 用於執行 scripts/ 目錄下的驗證與圖形插入腳本

3. 步驟式 Agent 工作流程

請在處理每個圖表生成任務時，依序執行以下步驟。

步驟 1 — 理解需求

確認或推斷以下資訊：

  1. 圖表類型 — 需要哪種圖表？（流程圖、架構圖、UML 圖、ER 圖、時序圖、網路拓撲圖...）
  2. 實體／參與者 — 主要的組件、參與者、類別或資料表有哪些？
  3. 關聯性 — 它們如何連接？方向為何？對應基數（cardinality）為何？
  4. 輸出路徑 — .drawio 檔案應儲存在何處？
  5. 現有檔案 — 是要建立新檔還是編輯現有檔案？

若需求較模糊，請從上下文推斷最合適的圖表類型（例如：「顯示資料表」→ ER 圖；「顯示 API 呼叫流程」→ 時序圖）。

步驟 2 — 選擇範本或從頭開始

  • 當圖表類型符合 assets/templates/ 中的範本時，使用範本。複製範本結構並替換預設占位值。
  • 若為全新佈局，則從頭開始。從最簡有效骨架開始：
<!-- 生成新檔案時，請將 modified="" 設定為當前 ISO 8601 時間戳記 -->
<mxfile host="Electron" modified="" version="26.0.0">
  <diagram id="page-1" name="Page-1">
    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="1169" pageHeight="827"
                  math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- 您的 cells 放置於此 -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

硬性規則：id="0" 與 id="1" 為必要欄位且必須是前兩個 cell。絕不可重複使用這兩個 ID。

步驟 3 — 規劃佈局

在生成 XML 之前，先規劃邏輯位置：

  • 整理為列（rows）或層（tiers）（多層結構請使用泳道/swimlanes）
  • 水平間距：同一列圖形之間保持 40–60px
  • 垂直間距：各層之間保持 80–120px
  • 標準圖形尺寸：流程方塊為 120x60 px，泳道為 160x80 px
  • 預設畫布：A4 橫向 = 1169 x 827 px

步驟 4 — 生成 mxGraph XML

頂點 Cell（每個圖形）：

<mxCell id="unique-id" value="Label"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

邊緣 Cell（每個連接線）：

<mxCell id="edge-id" value="Label (optional)"
        style="edgeStyle=orthogonalEdgeStyle;html=1;"
        edge="1" source="source-id" target="target-id" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

關鍵規則：

  • 檔案內的每個 cell id 必須全域唯一
  • 每個頂點（vertex）必須包含 mxGeometry 子節點，並帶有 x、y、width、height 以及 as="geometry" 屬性
  • 每個連接線（edge）的 source 與 target 必須對應已存在的頂點 id — 例外：浮動連接線（例如時序圖生命線）改在 <mxGeometry> 內部使用 sourcePoint/targetPoint；詳見第 4 節時序圖
  • 每個 cell 的 parent 必須引用已存在的 cell id
  • 當標籤包含 HTML 標籤（如 <b>、<i>、<br>）時，請在 style 中包含 html=1
  • 轉義標籤中的 XML 特殊字元：& => &amp;、< => &lt;、> => &gt;

步驟 5 — 套用正確樣式

為保持一致性，請使用標準語意色彩配色：

用途 fillColor strokeColor
主要／資訊 (Primary / Info) #dae8fc #6c8ebf
成功／開始 (Success / Start) #d5e8d4 #82b366
警告／決策 (Warning / Decision) #fff2cc #d6b656
錯誤／結束 (Error / End) #f8cecc #b85450
中性 (Neutral) #f5f5f5 #666666
外部／合作夥伴 (External / Partner) #e1d5e7 #9673a6

按圖表類型分類的常用樣式字串：

# 圓角流程方塊 (Flowchart)
rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;

# 決策菱形 (Decision diamond)
rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;

# 開始／結束端點 (Start/End terminal)
ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;

# 資料庫圓柱體 (Database cylinder)
shape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;

# 泳道容器 (Tier swimlane)
swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;

# UML 類別框 (UML class box)
swimlane;fontStyle=1;align=center;startSize=40;fillColor=#dae8fc;strokeColor=#6c8ebf;

# 介面／刻板印象框 (Interface / stereotype box)
swimlane;fontStyle=3;align=center;startSize=40;fillColor=#f5f5f5;strokeColor=#666666;

# ER 資料表容器 (ER table container)
shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;

# 正交連接線 (Orthogonal connector)
edgeStyle=orthogonalEdgeStyle;html=1;

# ER 關聯線 (Crow's foot)
edgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERmany;startArrow=ERone;

完整樣式鍵值目錄請參閱 references/style-reference.md，所有圖形庫名稱請參閱 references/shape-libraries.md。

步驟 6 — 儲存與驗證

  1. 將檔案寫入至要求的路徑，副檔名為 .drawio
  2. 執行驗證工具（可選但建議）：
    python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <path-to-file.drawio>
  3. 告知使用者如何開啟檔案：

    「請在 VS Code 中開啟 <filename> — draw.io 擴充功能會自動進行渲染。若您偏好，亦可使用 draw.io 的 Web 應用程式或桌面版應用程式。」

  4. 簡要說明圖表中的內容，讓使用者了解其預期結構。

4. 圖表類型實作指南

流程圖 (Flowchart)

關鍵元素：開始（橢圓形） => 流程（圓角矩形） => 決策（菱形） => 結束（橢圓形）

<!-- 開始節點 -->
<mxCell id="start" value="Start"
        style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;"
        vertex="1" parent="1">
  <mxGeometry x="500" y="80" width="120" height="60" as="geometry" />
</mxCell>

<!-- 流程步驟 -->
<mxCell id="p1" value="Process Step"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="1">
  <mxGeometry x="500" y="200" width="120" height="60" as="geometry" />
</mxCell>

<!-- 決策條件 -->
<mxCell id="d1" value="Condition?"
        style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;"
        vertex="1" parent="1">
  <mxGeometry x="460" y="320" width="200" height="100" as="geometry" />
</mxCell>

<!-- 箭頭：start 到 p1 -->
<mxCell id="e1" value=""
        style="edgeStyle=orthogonalEdgeStyle;html=1;"
        edge="1" source="start" target="p1" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

系統架構圖（三層式 / 3-tier）

每一層請使用泳道容器（swimlane containers）。所有服務方塊皆為其所屬泳道的子節點。

<!-- 層級泳道 -->
<mxCell id="tier1" value="Client Layer"
        style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;"
        vertex="1" parent="1">
  <mxGeometry x="60" y="100" width="1050" height="130" as="geometry" />
</mxCell>

<!-- 泳道內部的服務（parent="tier1"，座標相對於泳道） -->
<mxCell id="webapp" value="Web App"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="tier1">
  <mxGeometry x="80" y="40" width="120" height="60" as="geometry" />
</mxCell>

各層之間的連接線使用絕對座標，並設定 parent="1"。

時序圖 (Sequence Diagram)

關鍵元素：參與者（頂部）、生命線（虛線垂直線）、作用方塊（Activation boxes）、訊息箭頭。

  • 生命線：edge="1"，配合 endArrow=none 與 dashed=1，無 source/target — 改在 geometry 中使用 sourcePoint/targetPoint
  • 同步訊息：endArrow=block;endFill=1
  • 回傳訊息：endArrow=open;endFill=0;dashed=1
  • 自身呼叫：透過右方的兩個 Array 點使連接線迴圈折回

最簡 XML 片段：

<!-- 參與者（火柴人） -->
<mxCell id="actorA" value="Client"
        style="shape=mxgraph.uml.actor;pointerEvents=1;dashed=0;whiteSpace=wrap;html=1;aspect=fixed;"
        vertex="1" parent="1">
  <mxGeometry x="110" y="80" width="60" height="80" as="geometry" />
</mxCell>

<!-- 服務方塊 -->
<mxCell id="actorB" value="API Server"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;"
        vertex="1" parent="1">
  <mxGeometry x="480" y="100" width="160" height="60" as="geometry" />
</mxCell>

<!-- 生命線 — 浮動連接線：使用 sourcePoint/targetPoint，而非 source/target 屬性 -->
<mxCell id="lifA" value=""
        style="edgeStyle=none;dashed=1;endArrow=none;"
        edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="140" y="160" as="sourcePoint" />
    <mxPoint x="140" y="700" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- 作用方塊（生命線上的細矩形） -->
<mxCell id="actA1" value=""
        style="fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="1">
  <mxGeometry x="130" y="220" width="20" height="180" as="geometry" />
</mxCell>

<!-- 同步訊息 -->
<mxCell id="msg1" value="POST /orders"
        style="edgeStyle=elbowEdgeStyle;elbow=vertical;html=1;endArrow=block;endFill=1;"
        edge="1" source="actA1" target="actorB" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- 回傳訊息（虛線） -->
<mxCell id="msg2" value="201 Created"
        style="edgeStyle=elbowEdgeStyle;elbow=vertical;

<!-- truncated for translation batch; full body continues in source -->