excalidraw-diagram

Excalidraw Diagram Generator

根據文字內容產生 Excalidraw 圖表，提供多種輸出格式。

輸出模式

根據使用者的觸發詞選擇輸出模式：

觸發詞	輸出模式	檔案格式	用途
`Excalidraw`、`畫圖`、`流程圖`、`心智圖`	Obsidian（預設）	`.md`	在 Obsidian 中直接開啟
`標準Excalidraw`、`standard excalidraw`	Standard	`.excalidraw`	在 excalidraw.com 開啟／編輯／分享
`Excalidraw動畫`、`動畫圖`、`animate`	Animated	`.excalidraw`	拖曳至 excalidraw-animate 產生動畫

工作流程

偵測輸出模式：從觸發詞比對輸出模式（參考上方輸出模式表格）
分析內容：辨識概念、關聯與階層架構
選擇圖表類型：參閱下方的圖表類型指南
產生 Excalidraw JSON（若為 Animated 模式則加上動畫順序）
按模式格式化輸出
自動儲存至當前工作目錄
通知使用者並附上檔案路徑與使用說明

輸出格式

模式 1：Obsidian 格式（預設）

嚴格按照以下結構輸出，切勿進行任何修改：

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

# Excalidraw Data

## Text Elements
%%
## Drawing
\`\`\`json
{JSON 完整資料}
\`\`\`
%%

關鍵要點：

Frontmatter 必須包含 tags: [excalidraw]
警告訊息必須完整
JSON 必須被 %% 標記包圍
不能使用 excalidraw-plugin: parsed 以外的其他 frontmatter 設定
副檔名：.md

模式 2：Standard Excalidraw 格式

直接輸出純 JSON 檔案，可在 excalidraw.com 開啟：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [...],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

關鍵要點：

source 使用 https://excalidraw.com（非 Obsidian 外掛）
純 JSON，無 Markdown 包裝
副檔名：.excalidraw

模式 3：Animated Excalidraw 格式

與 Standard 格式相同，但每個元素需加入 customData.animate 欄位控制動畫順序：

{
  "id": "element-1",
  "type": "rectangle",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他標準欄位
}

動畫順序規則：

order：動畫播放順序（1, 2, 3...），數字越小越先出現
duration：該元素的繪製時長（毫秒），預設為 500
相同 order 的元素會同時出現
建議順序：標題 → 主要架構 → 連接線 → 細節文字

使用方法：

產生 .excalidraw 檔案
拖曳至 https://dai-shi.github.io/excalidraw-animate/
點擊 Animate 預覽，接著匯出 SVG 或 WebM

副檔名：.excalidraw

圖表類型與選擇指南

選擇合適的圖表形式，以提升理解力與視覺吸引力。

類型	英文	使用場景	作法
流程圖	Flowchart	步驟說明、工作流程、任務執行順序	用箭頭連接各步驟，清晰表達流程走向
心智圖	Mind Map	概念發散、主題分類、靈感捕捉	以中心為核心向外發散，放射狀結構
階層圖	Hierarchy	組織結構、內容分級、系統拆解	自上而下或自左至右構建階層節點
關聯圖	Relationship	要素之間的影響、依賴、互動	圖形間用連線表示關聯，搭配箭頭與說明
對比圖	Comparison	兩種以上方案或觀點的對照分析	左右兩欄或表格形式，標明比較維度
時間軸圖	Timeline	事件發展、專案進度、模型演化	以時間為軸，標出關鍵時間點與事件
矩陣圖	Matrix	雙維度分類、任務優先級、定位	建立 X 與 Y 兩個維度，於座標平面安置
自由布局	Freeform	內容零散、靈感記錄、初步資訊收集	無需結構限制，自由放置圖塊與箭頭

設計規則

文字與格式

所有文字元素必須使用 fontFamily: 5（Excalifont 手寫字型）
文字中的雙引號替換規則：" 替換為 『』
文字中的圓括號替換規則：() 替換為 「」
字型大小規則（硬性下限，低於此值在正常縮放比例下無法閱讀）：
- 標題：20-28px（最小 20px）
- 副標題：18-20px
- 內文／標籤：16-18px（最小 16px）
- 次要註釋：14px（僅限不重要的輔助說明，慎用）
- 絕對禁止低於 14px
行高：所有文字使用 lineHeight: 1.25
文字置中估算：獨立文字元素沒有自動置中，需手動計算 x 座標：
- 估算文字寬度：estimatedWidth = text.length * fontSize * 0.5（CJK 字元請用 * 1.0）
- 置中公式：x = centerX - estimatedWidth / 2
- 範例：文字 "Hello"（5 個字元, fontSize 20）置中於 x=300 → estimatedWidth = 5 * 20 * 0.5 = 50 → x = 300 - 25 = 275

布局與設計

畫布範圍：建議所有元素保持在 0-1200 x 0-800 區域內
最小形狀尺寸：包含文字的矩形／橢圓不小於 120x60px
元素間距：保持至少 20-30px 間距，防止重疊
層次清晰：使用不同顏色和形狀區分不同層級的資訊
圖形元素：適當使用矩形框、圓形、箭頭等元素來組織資訊
禁止 Emoji：請勿在圖表文字中使用任何 Emoji 符號，如需視覺標記請使用簡單圖形（圓形、方形、箭頭）或顏色區分

配色方案

文字顏色（strokeColor for text）：

用途	色值	說明
標題	`#1e40af`	深藍
副標題／連接線	`#3b82f6`	亮藍
內文文字	`#374151`	深灰（白底最淺不低於 `#757575`）
強調／重點	`#f59e0b`	金色

形狀填滿色（backgroundColor, fillStyle: "solid"）：

色值	語意	適用場景
`#a5d8ff`	淺藍	輸入、資料來源、主要節點
`#b2f2bb`	淺綠	成功、輸出、已完成
`#ffd8a8`	淺橘	警告、待處理、外部依賴
`#d0bfff`	淺紫	處理中、中介軟體、特殊項
`#ffc9c9`	淺紅	錯誤、關鍵、告警
`#fff3bf`	淺黃	備註、決策、規劃
`#c3fae8`	淺青	儲存、資料、快取
`#eebefa`	淺粉	分析、指標、統計

區域背景色（大矩形 + opacity: 30，用於分層圖表）：

色值	語意
`#dbe4ff`	前端／UI 層
`#e5dbff`	邏輯／處理層
`#d3f9d8`	資料／工具層

對比度規則：

白底上的文字最淺不得低於 #757575，否則無法清晰閱讀
淺色填滿上請使用深色變體文字（例如淺綠底使用 #15803d，而非 #22c55e）
避免在白底上使用淺灰色文字（#b0b0b0、#999）

參考：references/excalidraw-schema.md

JSON 結構

Obsidian 模式：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://github.com/zsviczian/obsidian-excalidraw-plugin",
  "elements": [...],
  "appState": { "gridSize": null, "viewBackgroundColor": "#ffffff" },
  "files": {}
}

Standard / Animated 模式：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [...],
  "appState": { "gridSize": null, "viewBackgroundColor": "#ffffff" },
  "files": {}
}

元素範本

每個元素均需要包含以下欄位（請勿新增額外的欄位，如 frameId、index、versionNonce、rawText——它們可能會在 excalidraw.com 上引發問題。boundElements 必須為 null 而非 []，updated 必須為 1 而非時間戳記）：

{
  "id": "unique-id",
  "type": "rectangle",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "isDeleted": false,
  "boundElements": null,
  "updated": 1,
  "link": null,
  "locked": false
}

strokeStyle 數值："solid"（實線，預設）| "dashed"（虛線）| "dotted"（點線）。虛線適合用來表示可選路徑、非同步流、弱關聯等。

文字元素需額外包含：

{
  "text": "顯示文字",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "顯示文字",
  "autoResize": true,
  "lineHeight": 1.25
}

Animated 模式需額外新增 customData 欄位：

{
  "id": "title-1",
  "type": "text",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他欄位
}

參閱 references/excalidraw-schema.md 以了解所有元素類型。

進階技術要求

文字元素（Text Elements）處理

## Text Elements 區塊在 Markdown 中必須留空，僅保留 %% 作為分隔符
Obsidian Excalidraw 外掛會根據 JSON 資料自動填入文字元素
無需手動列出所有文字內容

座標與布局

座標系統：左上角為原點 (0,0)
推薦範圍：所有元素保持在 0-1200 x 0-800 像素範圍內
元素 ID：每個元素需要唯一的 id（可以是字串，例如「title」、「box1」等）

所有元素必填欄位（Required Fields for All Elements）

重要說明：請勿包含 frameId、index、versionNonce 或 rawText 欄位。請設定 boundElements: null（而非 []），且 updated: 1（而非時間戳記）。

{
  "id": "unique-identifier",
  "type": "rectangle|text|arrow|ellipse|diamond",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#color-hex",
  "backgroundColor": "transparent|#color-hex",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid|dashed|dotted",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "isDeleted": false,
  "boundElements": null,
  "updated": 1,
  "link": null,
  "locked": false
}

文字專屬屬性（Text-Specific Properties）

文字元素（type: "text"）需要額外屬性（請勿包含 rawText）：

{
  "text": "顯示文字",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "顯示文字",
  "autoResize": true,
  "lineHeight": 1.25
}

appState 格式設定

"appState": {
  "gridSize": null,
  "viewBackgroundColor": "#ffffff"
}

files 欄位

"files": {}

常見錯誤與避坑指南

文字偏移 — 獨立 text 元素的 x 座標代表左邊緣而非中心。必須使用置中公式手動計算，否則文字會偏向邊緣
元素重疊 — y 座標相近的元素容易發生重疊。放置新元素前請確認與周邊元素保持至少 20px 間距
畫布留白不足 — 請勿將內容貼近畫布邊緣，四周建議保留 50-80px 的留白 Padding
標題未針對圖表置中 — 標題應基於下方圖表的整體寬度置中，而非固定置於 x=0
箭頭標籤溢出 — 較長的文字標籤（例如 "ATP + NADPH"）可能會超出短箭頭。請保持標籤簡短或拉長箭頭
對比度不足 — 白底上的淺色文字幾乎無法辨識。文字顏色不得低於 #757575，彩色文字請改用深色變體
字型太小 — 低於 14px 在正常縮放比例下無法清晰閱讀，內文最小建議 16px

實作注意事項

自動儲存與檔案產生流程

當產生 Excalidraw 圖表時，必須自動執行以下步驟：

1. 選擇合適的圖表類型

根據使用者提供角色的內容特性，參考上方「圖表類型與選擇指南」表格
分析內容的核心需求，選擇最合適的視覺化形式

2. 產生具有意義的檔名

根據輸出模式選擇副檔名：

模式	檔名格式	範例
Obsidian	`[主題].[類型].md`	`商業模式.relationship.md`
Standard	`[主題].[類型].excalidraw`	`商業模式.relationship.excalidraw`
Animated	`[主題].[類型].animate.excalidraw`	`商業模式.relationship.animate.excalidraw`

優先使用中文以提升可讀性

3. 使用 Write 工具自動儲存檔案

儲存位置：當前工作目錄（自動偵測環境變數）
完整路徑：{current_directory}/[filename].md
如此可達成彈性遷移，無需硬編碼（寫死）固定路徑

4. 確保 Markdown 結構完全正確

必須完全依循以下格式產生（不得有任何變更）：

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

# Excalidraw Data

## Text Elements
%%
## Drawing
\`\`\`json
{完整的 JSON 資料}
\`\`\`
%%

5. JSON 資料規範

包含完整的 Excalidraw JSON 結構
所有文字元素使用 fontFamily: 5
文字中的 " 替換為 『』
文字中的 () 替換為 「」
JSON 格式必須有效，且可通過語法檢驗
所有元素具備唯一的 id
包含 appState 與 files: {} 欄位

6. 使用者回報與確認

向使用者回報：

圖表已產生
精確的儲存位置
如何在 Obsidian 中檢視
圖表設計選擇說明（選擇了哪種類型的圖表、原因為何）
是否需要調整或修改

輸出訊息範本

Obsidian 模式：

Excalidraw 圖表已產生！

儲存位置：商業模式.relationship.md

使用方法：
1. 在 Obsidian 中開啟此檔案
2. 點擊右上角 MORE OPTIONS 選單
3. 選擇 Switch to EXCALIDRAW VIEW

Standard 模式：

Excalidraw 圖表已產生！

儲存位置：商業模式.relationship.excalidraw

使用方法：
1. 開啟 https://excalidraw.com
2. 點擊左上角選單 → Open → 選擇此檔案
3. 或直接將檔案拖曳至 excalidraw.com 頁面

Animated 模式：

Excalidraw 動畫圖表已產生！

儲存位置：商業模式.relationship.animate.excalidraw

動畫順序：標題(1) → 主架構(2-4) → 連接線(5-7) → 說明文字(8-10)

產生動畫：
1. 開啟 https://dai-shi.github.io/excalidraw-animate/
2. 點擊 Load File 選擇此檔案
3. 預覽動畫效果
4. 點擊 Export 匯出 SVG 或 WebM

您可能也喜歡

songsee

386Kdesign-ui

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

openclaw

獲取

songsee

385Kdesign-ui

使用 songsee CLI 從音訊生成聲譜圖與多特徵分析圖表。

steipete

獲取

taste

240Kdesign-ui

A creative-direction (taste) layer for music videos and short-form edits in the angelcore / cloud-trance / hyperpop visual family. Distills a named-genre aesthetic vocabulary, a mood + color + light system, and a beat-synced editing grammar, then chains ECC's video skills (video-editing, fal-ai-media, remotion-video-creation, motion-*, content-engine) into one production pipeline. Use when the work is not just making a video function but making it feel intentional, when building a music video, a fancam/edit, a moodboard-driven reel, or when choosing a coherent visual direction for AI-generated b-roll.

affaan-m

獲取

繼續探索

瀏覽 design-ui 熱門 Skills 最近更新

excalidraw-diagram

相關技能

Excalidraw Diagram Generator

輸出模式

工作流程

輸出格式

模式 1：Obsidian 格式（預設）

模式 2：Standard Excalidraw 格式

模式 3：Animated Excalidraw 格式

圖表類型與選擇指南

設計規則

文字與格式

布局與設計

配色方案

JSON 結構

元素範本

進階技術要求

文字元素（Text Elements）處理

座標與布局

所有元素必填欄位（Required Fields for All Elements）

文字專屬屬性（Text-Specific Properties）

appState 格式設定

files 欄位

常見錯誤與避坑指南

實作注意事項

自動儲存與檔案產生流程

1. 選擇合適的圖表類型

2. 產生具有意義的檔名

3. 使用 Write 工具自動儲存檔案

4. 確保 Markdown 結構完全正確

5. JSON 資料規範

6. 使用者回報與確認

輸出訊息範本

您可能也喜歡

songsee

songsee

taste

繼續探索