excalidraw-diagram-generator

Excalidraw 圖表產生器

這項技能可從自然語言描述產生 Excalidraw 格式的圖表，協助視覺化流程、系統、關係與想法，無需手動繪圖。

使用時機

當使用者要求以下內容時使用此技能：

「建立一個圖表顯示...」
「製作一個流程圖...」
「視覺化...的流程」
「繪製...的系統架構」
「產生一個關於...的心智圖」
「建立一個 Excalidraw 檔案...」
「顯示...之間的關係」
「圖解...的工作流程」

支援的圖表類型：

📊 流程圖：循序流程、工作流程、決策樹
🔗 關係圖：實體關係、系統元件、相依性
🧠 心智圖：概念階層、腦力激盪結果、主題組織
🏗️ 架構圖：系統設計、模組互動、資料流
📈 資料流程圖 (DFD)：資料流視覺化、資料轉換流程
🏊 商業流程圖 (泳道圖)：跨功能工作流程、以角色為基礎的流程
📦 類別圖：物件導向設計、類別結構與關係
🔄 序列圖：物件隨時間的互動、訊息流
🗃️ ER 圖：資料庫實體關係、資料模型

前置條件

清楚描述要視覺化的內容
識別關鍵實體、步驟或概念
了解元素之間的關係或流程

逐步工作流程

步驟 1：理解需求

分析使用者的描述以確定：

圖表類型（流程圖、關係圖、心智圖、架構圖）
關鍵元素（實體、步驟、概念）
關係（流程、連接、階層）
複雜度（元素數量）

步驟 2：選擇適當的圖表類型

使用者意圖	圖表類型	範例關鍵字
流程、步驟、程序	流程圖	「工作流程」、「流程」、「步驟」、「程序」
連接、相依、關聯	關係圖	「關係」、「連接」、「相依」、「結構」
概念階層、腦力激盪	心智圖	「心智圖」、「概念」、「想法」、「分解」
系統設計、元件	架構圖	「架構」、「系統」、「元件」、「模組」
資料流、轉換流程	資料流程圖 (DFD)	「資料流」、「資料處理」、「資料轉換」
跨功能流程、角色責任	商業流程圖 (泳道圖)	「商業流程」、「泳道」、「角色」、「責任」
物件導向設計、類別結構	類別圖	「類別」、「繼承」、「OOP」、「物件模型」
互動序列、訊息流	序列圖	「序列」、「互動」、「訊息」、「時間線」
資料庫設計、實體關係	ER 圖	「資料庫」、「實體」、「關係」、「資料模型」

步驟 3：提取結構化資訊

流程圖：

循序步驟列表
決策點（若有）
起點與終點

關係圖：

實體/節點（名稱 + 選擇性描述）
實體之間的關係（從 → 到，附標籤）

心智圖：

中心主題
主要分支（建議 3-6 個）
每個分支的子主題（選擇性）

資料流程圖 (DFD)：

資料來源與目的地（外部實體）
流程（資料轉換）
資料儲存（資料庫、檔案）
資料流（箭頭表示資料移動，方向從左到右或從左上到右下）
重要：不要表示流程順序，只表示資料流

商業流程圖 (泳道圖)：

角色/參與者（部門、系統、人員）— 顯示為標題欄
流程泳道（每個角色下方的垂直泳道）
流程方塊（每個泳道內的活動）
流程箭頭（連接流程方塊，包括跨泳道交接）

類別圖：

類別名稱
屬性（含可見性 +、-、#）
方法（含可見性與參數）
關係：繼承（實線 + 白色三角形）、實現（虛線 + 白色三角形）、關聯（實線）、依賴（虛線）、聚合（實線 + 白色菱形）、組合（實線 + 填滿菱形）
多重性標記（1、0..1、1..、）

序列圖：

物件/角色（水平排列在頂部）
生命線（每個物件的垂直線）
訊息（生命線之間的水平箭頭）
同步訊息（實心箭頭）、非同步訊息（虛線箭頭）
回傳值（虛線箭頭）
激活方塊（執行期間生命線上的矩形）
時間從上到下流動

ER 圖：

實體（矩形，含實體名稱）
屬性（列在實體內）
主鍵（底線或標記 PK）
外鍵（標記 FK）
關係（連接實體的線）
基數：1:1（一對一）、1:N（一對多）、N:M（多對多）
多對多關係的連結/關聯實體（虛線矩形）

步驟 4：產生 Excalidraw JSON

建立包含適當元素的 .excalidraw 檔案：

可用的元素類型：

rectangle：實體、步驟、概念的方塊
ellipse：強調用的替代形狀
diamond：決策點
arrow：方向性連接
text：標籤與註解

要設定的關鍵屬性：

位置：x、y 座標
大小：width、height
樣式：strokeColor、backgroundColor、fillStyle
字型：fontFamily: 5（Excalifont — 所有文字元素必填）
文字：標籤的內嵌文字
連接：箭頭的 points 陣列

重要：所有文字元素必須使用 fontFamily: 5（Excalifont）以保持視覺一致性。

步驟 5：格式化輸出

結構完整的 Excalidraw 檔案：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    // 圖表元素陣列
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": 20
  },
  "files": {}
}

步驟 6：儲存並提供說明

儲存為 <descriptive-name>.excalidraw
告知使用者如何開啟：
- 前往 https://excalidraw.com
- 點選「開啟」或拖放檔案
- 或使用 Excalidraw VS Code 擴充功能

最佳實務

元素數量指南

圖表類型	建議數量	上限
流程圖步驟	3-10	15
關係圖實體	3-8	12
心智圖分支	4-6	8
心智圖每個分支的子主題	2-4	6

佈局技巧

起始位置：將重要元素置中，使用一致間距
間距：
- 水平間距：元素之間 200-300px
- 垂直間距：行之間 100-150px
顏色：使用一致的配色方案
- 主要元素：淺藍色 (#a5d8ff)
- 次要元素：淺綠色 (#b2f2bb)
- 重要/中心：黃色 (#ffd43b)
- 警示/警告：淺紅色 (#ffc9c9)
文字大小：16-24px 以利閱讀
字型：所有文字元素務必使用 fontFamily: 5（Excalifont）
箭頭樣式：簡單流程使用直線箭頭，複雜關係使用曲線箭頭

複雜度管理

如果使用者要求包含太多元素：

建議拆分成多個圖表
先專注於主要元素
提供建立詳細子圖表的選項

範例回應：

「您的請求包含 15 個元件。為求清晰，我建議：
1. 高層級架構圖（6 個主要元件）
2. 每個子系統的詳細圖表

您希望我先從高層級檢視開始嗎？」

範例提示與回應

範例 1：簡單流程圖

使用者：「為使用者註冊建立一個流程圖」

代理程式產生：

提取步驟：「輸入電子郵件」→「驗證電子郵件」→「設定密碼」→「完成」
建立包含 4 個矩形 + 3 個箭頭的流程圖
儲存為 user-registration-flow.excalidraw

範例 2：關係圖

使用者：「圖解 User、Post 與 Comment 實體之間的關係」

代理程式產生：

實體：User、Post、Comment
關係：User → Post（「建立」）、User → Comment（「撰寫」）、Post → Comment（「包含」）
儲存為 user-content-relationships.excalidraw

範例 3：心智圖

使用者：「關於機器學習概念的心智圖」

代理程式產生：

中心：「機器學習」
分支：監督式學習、非監督式學習、強化學習、深度學習
每個分支下的子主題
儲存為 machine-learning-mindmap.excalidraw

疑難排解

問題	解決方案
元素重疊	增加座標之間的間距
文字無法放入方塊	增加方塊寬度或縮小字型大小
元素過多	拆分成多個圖表
佈局不清楚	使用網格佈局（行/列）或放射狀佈局（心智圖）
顏色不一致	根據元素類型預先定義顏色調色盤

進階技巧

網格佈局（適用於關係圖）

const columns = Math.ceil(Math.sqrt(entityCount));
const x = startX + (index % columns) * horizontalGap;
const y = startY + Math.floor(index / columns) * verticalGap;

放射狀佈局（適用於心智圖）

const angle = (2 * Math.PI * index) / branchCount;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);

自動產生的 ID

使用時間戳記 + 隨機字串產生唯一 ID：

const id = Date.now().toString(36) + Math.random().toString(36).substr(2);

輸出格式

務必提供：

✅ 完整的 .excalidraw JSON 檔案
📊 建立內容的摘要
📝 元素數量
💡 開啟/編輯的說明

範例摘要：

已建立：user-workflow.excalidraw
類型：流程圖
元素：7 個矩形、6 個箭頭、1 個標題文字
總計：14 個元素

檢視方式：
1. 前往 https://excalidraw.com
2. 拖放 user-workflow.excalidraw
3. 或在 Excalidraw VS Code 擴充功能中使用「檔案 → 開啟」

驗證檢查清單

在交付圖表之前：

[ ] 所有元素都有唯一 ID
[ ] 座標避免重疊
[ ] 文字可讀（字型大小 16+）
[ ] 所有文字元素使用 fontFamily: 5（Excalifont）
[ ] 箭頭邏輯連接
[ ] 顏色遵循一致方案
[ ] 檔案為有效 JSON
[ ] 元素數量合理（<20 以保持清晰）

圖示庫（選擇性增強）

對於專業圖表（例如 AWS/GCP/Azure 架構圖），您可以使用 Excalidraw 的預製圖示庫。這提供專業、標準化的圖示，而非基本形狀。

當使用者要求圖示時

如果使用者要求 AWS/雲端架構圖或提及想要使用特定圖示：

檢查圖示庫是否存在：尋找 libraries/<library-name>/reference.md
如果圖示庫存在：繼續使用圖示（請參閱下方 AI 助理工作流程）

如果圖示庫不存在：回覆設定說明：

若要使用 [AWS/GCP/Azure/等] 架構圖示，請依照以下步驟：

1. 前往 https://libraries.excalidraw.com/
2. 搜尋「[AWS Architecture Icons/等]」並下載 .excalidrawlib 檔案
3. 建立目錄：skills/excalidraw-diagram-generator/libraries/[圖示集名稱]/
4. 將下載的檔案放入該目錄
5. 執行分割腳本：
   python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[圖示集名稱]/

這會將圖示庫分割成單獨的圖示檔案，以便高效使用。
設定完成後，我就可以使用實際的 AWS/雲端圖示建立您的圖表。

或者，我現在可以使用簡單形狀（矩形、橢圓形）建立圖表，
您之後可以在 Excalidraw 中手動替換為圖示。

使用者設定說明（詳細）

步驟 1：建立圖示庫目錄

mkdir -p skills/excalidraw-diagram-generator/libraries/aws-architecture-icons

步驟 2：下載圖示庫

前往：https://libraries.excalidraw.com/
搜尋您想要的圖示集（例如「AWS Architecture Icons」）
點擊下載以取得 .excalidrawlib 檔案
範例類別（可用性可能有所變動，請在網站上確認）：
- 雲端服務圖示
- UI/材質圖示
- 流程圖符號

步驟 3：放置圖示庫檔案

將下載的檔案重新命名以符合目錄名稱（例如 aws-architecture-icons.excalidrawlib）
將其移動到步驟 1 建立的目錄中

步驟 4：執行分割腳本

python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/

步驟 5：驗證設定
執行腳本後，確認存在以下結構：

skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/
  aws-architecture-icons.excalidrawlib  （原始檔案）
  reference.md                          （產生的圖示查閱表）
  icons/                                （產生的個別圖示檔案）
    API-Gateway.json
    CloudFront.json
    EC2.json
    Lambda.json
    RDS.json
    S3.json
    ...

AI 助理工作流程

當 libraries/ 中有可用的圖示庫時：

建議做法：使用 Python 腳本（高效且可靠）

儲存庫包含可自動處理圖示整合的 Python 腳本：

建立基礎圖表結構：
- 建立包含基本佈局（標題、方塊、區域）的 .excalidraw 檔案
- 這會建立畫布與整體結構

使用 Python 腳本加入圖示：

python skills/excalidraw-diagram-generator/scripts/add-icon-to-diagram.py \
  <圖表路徑> <圖示名稱> <x> <y> [--label "文字"] [--library-path 路徑]

預設啟用透過 .excalidraw.edit 編輯以避免覆寫問題；傳遞 --no-use-edit-suffix 可停用。

範例：

# 在位置 (400, 300) 加入 EC2 圖示並附帶標籤
python scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label "Web Server"

# 在位置 (200, 150) 加入 VPC 圖示
python scripts/add-icon-to-diagram.py diagram.excalidraw VPC 200 150

# 從不同圖示庫加入圖示
python scripts/add-icon-to-diagram.py diagram.excalidraw Compute-Engine 500 200 \
  --library-path libraries/gcp-icons --label "API Server"

加入連接箭頭：

python skills/excalidraw-diagram-generator/scripts/add-arrow.py \
  <圖表路徑> <起點-x> <起點-y> <終點-x> <終點-y> [--label "文字"] [--style solid|dashed|dotted] [--color HEX]

預設啟用透過 .excalidraw.edit 編輯以避免覆寫問題；傳遞 --no-use-edit-suffix 可停用。

範例：

# 從 (300, 250) 到 (500, 300) 的簡單箭頭
python scripts/add-arrow.py diagram.excalidraw 300 250 500 300

# 附帶標籤的箭頭
python scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label "HTTPS"

# 自訂顏色的虛線箭頭
python scripts/add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color "#7950f2"

工作流程摘要：

# 步驟 1：建立包含標題與結構的基礎圖表
# （建立包含初始元素的 .excalidraw 檔案）

# 步驟 2：加入圖示與標籤
python scripts/add-icon-to-diagram.py my-diagram.excalidraw "Internet-gateway" 200 150 --label "Internet Gateway"
python scripts/add-icon-to-diagram.py my-diagram.excalidraw VPC 250 250
python scripts/add-icon-to-diagram.py my-diagram.excalidraw ELB 350 300 --label "Load Balancer"
python scripts/add-icon-to-diagram.py my-diagram.excalidraw EC2 450 350 --label "EC2 Instance"
python scripts/add-icon-to-diagram.py my-diagram.excalidraw RDS 550 400 --label "Database"

# 步驟 3：加入連接箭頭
python scripts/add-arrow.py my-diagram.excalidraw 250 200 300 250  # Internet → VPC
python scripts/add-arrow.py my-diagram.excalidraw 300 300 400 300  # VPC → ELB
python scripts/add-arrow.py my-diagram.excalidraw 400 330 500 350  # ELB → EC2
python scripts/add-arrow.py my-diagram.excalidraw 500 380 600 400  # EC2 → RDS

Python 腳本方法的優點：

✅ 不消耗 token：圖示 JSON 資料（每個 200-1000 行）不會進入 AI 上下文
✅ 準確的轉換：座標計算由確定性邏輯處理
✅ ID 管理：自動產生 UUID 避免衝突
✅ 可靠：無座標計算錯誤或 ID 衝突的風險
✅ 快速：直接操作檔案，無解析負擔
✅ 可重複使用：適用於您提供的任何 Excalidraw 圖示庫

替代方案：手動圖示整合（不建議）

僅在 Python 腳本不可用時使用：

檢查圖示庫：

列出目錄：skills/excalidraw-diagram-generator/libraries/
尋找包含 reference.md 檔案的子目錄

讀取 reference.md：

開啟：libraries/<library-name>/reference.md
此檔案輕量（通常 <300 行），列出所有可用圖示

尋找相關圖示：

在 reference.md 表格中搜尋符合圖表需求的圖示名稱
範例：對於包含 EC2、S3、Lambda 的 AWS 圖表 → 在表格中尋找「EC2」、「S3」、「Lambda」

載入特定圖示資料（警告：大型檔案）：

僅讀取所需的圖示檔案：
- libraries/aws-architecture-icons/icons/EC2.json（200-300 行）
- libraries/aws-architecture-icons/icons/S3.json（200-300 行）
- libraries/aws-architecture-icons/icons/Lambda.json（200-300 行）
注意：每個圖示檔案為 200-1000 行 — 這會消耗大量 token

提取並轉換元素：

每個圖示 JSON 包含一個「elements」陣列
計算邊界框（min_x、min_y、max_x、max_y）
對所有 x/y 座標套用偏移
為所有元素產生新的唯一 ID
更新 groupIds 參考
將轉換後的元素複製到您的圖表中

定位圖示並加入連接：

調整 x/y 座標以正確定位圖示
更新 ID 以確保整個圖表的唯一性
視需要加入連接箭頭與標籤

手動整合的挑戰：

⚠️ 高 token 消耗（每個圖示 200-1000 行 × 圖示數量）
⚠️ 複雜的座標轉換計算
⚠️ 若未謹慎處理，有 ID 衝突的風險
⚠️ 對於包含許多圖示的圖表耗時

範例：使用圖示建立 AWS 圖表

請求：「建立一個包含 Internet Gateway、VPC、ELB、EC2 與 RDS 的 AWS 架構圖」

建議工作流程（使用 Python 腳本）：

# 步驟 1：建立包含標題的基礎圖表檔案
# 建立 my-aws-diagram.excalidraw 並包含基本結構（標題等）

# 步驟 2：檢查圖示可用性
# 讀取：libraries/aws-architecture-icons/reference.md
# 確認圖示存在：Internet-gateway、VPC、ELB、EC2、RDS

# 步驟 3：使用 Python 腳本加入圖示
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw "Internet-gateway" 150 100 --label "Internet Gateway"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw VPC 200 200
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw ELB 350 250 --label "Load Balancer"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw EC2 500 300 --label "Web Server"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw RDS 650 350 --label "Database"

# 步驟 4：加入連接箭頭
python scripts/add-arrow.py my-aws-diagram.excalidraw 200 150 250 200  # Internet → VPC
python scripts/add-arrow.py my-aws-diagram.excalidraw 265 230 350 250  # VPC → ELB
python scripts/add-arrow.py my-aws-diagram.excalidraw 415 280 500 300  # ELB → EC2
python scripts/add-arrow.py my-aws-diagram.excalidraw 565 330 650 350 --label "SQL" --style dashed

# 結果：包含專業 AWS 圖示、標籤與連接的完整圖表

優點：

無需手動計算座標
不消耗圖示資料的 token
確定性、可靠的結果
易於迭代與調整位置

替代工作流程（手動，若腳本不可用）：

檢查：libraries/aws-architecture-icons/reference.md 存在 → 是
讀取 reference.md → 尋找 Internet-gateway、VPC、ELB、EC2、RDS 的條目
載入：
- icons/Internet-gateway.json（298 行）
- icons/VPC.json（550 行）
- icons/ELB.json（363 行）
- icons/EC2.json（231 行）
- icons/RDS.json（類似大小）
  總計：約 2000+ 行 JSON 需要處理
從每個 JSON 提取元素
計算每個圖示的邊界框與偏移
轉換所有座標（x、y）以定位
為所有元素產生唯一 ID
加入顯示資料流的箭頭
加入文字標籤
產生最終的 .excalidraw 檔案

手動方法的挑戰：

高 token 消耗（約 2000-5000 行）
複雜的座標計算
ID 衝突的風險

支援的圖示庫（範例 — 請確認可用性）

此工作流程適用於您提供的任何有效 .excalidrawlib 檔案。
您可能在 https://libraries.excalidraw.com/ 上找到的圖示庫類別範例：
- 雲端服務圖示
- Kubernetes / 基礎架構圖示
- UI / 材質圖示
- 流程圖 / 圖表符號
- 網路圖示
可用性與命名可能有所變動；使用前請在網站上確認確切的圖示庫名稱。

備援方案：無可用圖示

如果未設定任何圖示庫：

使用基本形狀（矩形、橢圓形、箭頭）建立圖表
使用顏色編碼與文字標籤區分元件
告知使用者他們可以稍後加入圖示或為未來的圖表設定圖示庫
圖表仍然功能完整且清晰，只是視覺上較不精緻

參考資料

請參閱隨附的參考檔案：

references/excalidraw-schema.md — 完整的 Excalidraw JSON 結構
references/element-types.md — 詳細的元素類型規格
templates/flowchart-template.json — 基本流程圖起手式
templates/relationship-template.json — 關係圖起手式
templates/mindmap-template.json — 心智圖起手式
scripts/split-excalidraw-library.py — 分割 .excalidrawlib 檔案的工具
scripts/README.md — 圖示庫工具的文件
scripts/.gitignore — 防止本機 Python 產出被提交

限制

複雜曲線簡化為直線/基本曲線
手繪粗糙度設定為預設值 (1)
自動產生不支援內嵌圖片
每個圖表建議元素上限：20 個
無自動碰撞偵測（請使用間距指南）

未來增強

可能的改進：

自動佈局最佳化演算法
從 Mermaid/PlantUML 語法匯入
範本庫擴充
產生後的互動式編輯

您可能也喜歡

docker-expert

41Kdevops-cloud

您是進階的 Docker 容器化專家，具備全面的實務知識，涵蓋容器優化、安全強化、多階段建置、編排模式以及基於當前業界最佳實務的生產部署策略。

sickn33

獲取

hyperframes-cli

29Kdevops-cloud

HyperFrames CLI 開發循環。當執行 npx hyperframes init、add、catalog、capture、lint、validate、inspect、layout、snapshot、preview、play、render、publish、lambda、doctor、browser、info、upgrade、skills、compositions、docs、benchmark、telemetry、transcribe、tts 或 remove-background 時使用，或用於疑難排解 HyperFrames 建置/渲染環境。AWS Lambda 雲端渲染的進入點（`hyperframes lambda deploy / render / progress / destroy / policies`）。

heygen-com

獲取

baoyu-diagram

23Kdevops-cloud

建立專業、深色主題的 SVG 圖表，包含架構圖、流程圖、序列圖、結構圖、心智圖、時間軸、示意/概念圖等。當使用者要求任何技術或概念圖表、系統視覺化、流程圖、資料流、元件關係、網路拓撲、決策樹、組織圖、狀態機或任何結構/邏輯/流程的視覺呈現時，請使用此技能。當使用者說「畫個圖」「畫一個架構圖」「diagram」「flowchart」「sequence diagram」「draw me a ...」或上傳內容要求視覺化時，也請觸發。輸出永遠是獨立的 .svg 檔案。

jimliu

獲取

繼續探索

瀏覽 devops-cloud 熱門 Skills 最近更新

excalidraw-diagram-generator

相關技能

Excalidraw 圖表產生器

使用時機

前置條件

逐步工作流程

步驟 1：理解需求

步驟 2：選擇適當的圖表類型

步驟 3：提取結構化資訊

步驟 4：產生 Excalidraw JSON

步驟 5：格式化輸出

步驟 6：儲存並提供說明

最佳實務

元素數量指南

佈局技巧

複雜度管理

範例提示與回應

範例 1：簡單流程圖

範例 2：關係圖

範例 3：心智圖

疑難排解

進階技巧

網格佈局（適用於關係圖）

放射狀佈局（適用於心智圖）

自動產生的 ID

輸出格式

驗證檢查清單

圖示庫（選擇性增強）

當使用者要求圖示時

使用者設定說明（詳細）

AI 助理工作流程

範例：使用圖示建立 AWS 圖表

支援的圖示庫（範例 — 請確認可用性）

備援方案：無可用圖示

參考資料

限制

未來增強

您可能也喜歡

docker-expert

hyperframes-cli

baoyu-diagram

繼續探索