Excalidraw

使用 Excalidraw JSON 格式創建手繪風格的圖表。生成用於架構圖、流程圖、時序圖、概念圖等內容的 .excalidraw 文件。這些文件可以在 excalidraw.com 上打開，或上傳以獲取可分享的鏈接。

技能元數據


來源	捆綁（默認安裝）
路徑	`skills/creative/excalidraw`
版本	`1.0.0`
作者	Hermes Agent
許可證	MIT
標籤	`Excalidraw`, `Diagrams`, `Flowcharts`, `Architecture`, `Visualization`, `JSON`

參考：完整 SKILL.md

信息

以下是 Hermes 在觸發此技能時加載的完整技能定義。這是技能激活時代理所看到的指令。

Excalidraw 圖表技能

通過編寫標準的 Excalidraw 元素 JSON 並保存為 .excalidraw 文件來創建圖表。這些文件可以拖放到 excalidraw.com 上進行查看和編輯。無需賬戶，無需 API 密鑰，無需渲染庫——只需 JSON。

工作流程

加載此技能（你已完成）
編寫元素 JSON —— 一個 Excalidraw 元素對象數組
保存文件 使用 write_file 創建 .excalidraw 文件
可選上傳 以獲取可分享鏈接，通過 terminal 運行 scripts/upload.py

保存圖表

將你的元素數組包裹在標準的 .excalidraw 信封中，並使用 write_file 保存：

{
  "type": "excalidraw",
  "version": 2,
  "source": "hermes-agent",
  "elements": [ ...your elements array here... ],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

保存到任意路徑，例如 ~/diagrams/my_diagram.excalidraw。

上傳以獲取可分享鏈接

通過終端運行上傳腳本（位於此技能的 scripts/ 目錄中）：

python skills/diagramming/excalidraw/scripts/upload.py ~/diagrams/my_diagram.excalidraw

這會將文件上傳到 excalidraw.com（無需賬戶）並打印可分享的 URL。需要 cryptography pip 包（pip install cryptography）。

元素格式參考

必填字段（所有元素）

type, id（唯一字符串）, x, y, width, height

默認值（跳過這些——它們會自動應用）

strokeColor: "#1e1e1e"
backgroundColor: "transparent"
fillStyle: "solid"
strokeWidth: 2
roughness: 1（手繪外觀）
opacity: 100

畫布背景為白色。

元素類型

矩形：

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 100 }

roundness: { "type": 3 } 用於圓角
backgroundColor: "#a5d8ff", fillStyle: "solid" 用於填充

橢圓：

{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }

菱形：

{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }

帶標籤的形狀（容器綁定） —— 創建一個綁定到形狀的文本元素：

警告： 不要在形狀上使用 "label": { "text": "..." }。這不是有效的 Excalidraw 屬性，會被靜默忽略，導致形狀為空。你必須使用下面的容器綁定方法。

形狀需要 boundElements 列出文本，而文本需要 containerId 指回形狀：

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid",
  "boundElements": [{ "id": "t_r1", "type": "text" }] },
{ "type": "text", "id": "t_r1", "x": 105, "y": 110, "width": 190, "height": 25,
  "text": "Hello", "fontSize": 20, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "r1", "originalText": "Hello", "autoResize": true }

適用於矩形、橢圓、菱形
當設置 containerId 時，Excalidraw 會自動居中文字
文本的 x/y/width/height 是近似值——Excalidraw 會在加載時重新計算它們
originalText 應與 text 匹配
始終包含 fontFamily: 1（Virgil/手繪字體）

帶標籤的箭頭 —— 同樣的容器綁定方法：

{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
  "points": [[0,0],[200,0]], "endArrowhead": "arrow",
  "boundElements": [{ "id": "t_a1", "type": "text" }] },
{ "type": "text", "id": "t_a1", "x": 370, "y": 130, "width": 60, "height": 20,
  "text": "connects", "fontSize": 16, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "a1", "originalText": "connects", "autoResize": true }

獨立文本（僅用於標題和註釋——無容器）：

{ "type": "text", "id": "t1", "x": 150, "y": 138, "text": "Hello", "fontSize": 20,
  "fontFamily": 1, "strokeColor": "#1e1e1e", "originalText": "Hello", "autoResize": true }

x 是左邊緣。若要居中於位置 cx：x = cx - (text.length * fontSize * 0.5) / 2
不要依賴 textAlign 或 width 進行定位

箭頭：

{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
  "points": [[0,0],[200,0]], "endArrowhead": "arrow" }

points: [dx, dy] 相對於元素 x, y 的偏移量
endArrowhead: null | "arrow" | "bar" | "dot" | "triangle"
strokeStyle: "solid"（默認）| "dashed" | "dotted"

箭頭綁定（將箭頭連接到形狀）

{
  "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
  "points": [[0,0],[150,0]], "endArrowhead": "arrow",
  "startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
  "endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] }
}

fixedPoint 座標：top=[0.5,0], bottom=[0.5,1], left=[0,0.5], right=[1,0.5]

繪製順序（Z 軸順序）

數組順序 = Z 軸順序（第一個 = 背面，最後一個 = 正面）
逐步輸出：背景區域 → 形狀 → 其綁定的文本 → 其箭頭 → 下一個形狀
錯誤做法：所有矩形，然後所有文本，然後所有箭頭
正確做法：bg_zone → shape1 → text_for_shape1 → arrow1 → arrow_label_text → shape2 → text_for_shape2 → ...
始終將綁定的文本元素緊接在其容器形狀之後放置

尺寸指南

字體大小：

最小 fontSize：16 用於正文、標籤、描述
最小 fontSize：20 用於標題和_heading_
最小 fontSize：14 僅用於次要註釋（少用）
切勿使用低於 14 的 fontSize

元素尺寸：

最小形狀尺寸：帶標籤的矩形/橢圓為 120x60
元素之間至少保留 20-30px 的間隙
傾向於使用更少、更大的元素，而不是許多微小的元素

顏色調色板

參見 references/colors.md 獲取完整的顏色表。快速參考：

用途	填充顏色	十六進制值
主要 / 輸入	淺藍色	`#a5d8ff`
成功 / 輸出	淺綠色	`#b2f2bb`
警告 / 外部	淺橙色	`#ffd8a8`
處理中 / 特殊	淺紫色	`#d0bfff`
錯誤 / 關鍵	淺紅色	`#ffc9c9`
註釋 / 決策	淺黃色	`#fff3bf`
存儲 / 數據	淺青色	`#c3fae8`

提示

在整個圖表中一致地使用調色板
文本對比度至關重要 -- 切勿在白色背景上使用淺灰色。白色背景上的最小文本顏色為：#757575
不要在文本中使用表情符號 -- 它們在 Excalidraw 的字體中無法渲染
對於深色模式圖表，請參閱 references/dark-mode.md
對於更大的示例，請參閱 references/examples.md

技能元數據​

參考：完整 SKILL.md​

Excalidraw 圖表技能

工作流程​

保存圖表​

上傳以獲取可分享鏈接​

元素格式參考​

必填字段（所有元素）​

默認值（跳過這些——它們會自動應用）​

元素類型​

箭頭綁定（將箭頭連接到形狀）​

繪製順序（Z 軸順序）​

尺寸指南​

顏色調色板​

提示​