{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */}

Excalidraw

手绘风 Excalidraw JSON 图表（架构、流程、时序）。

Skill 元数据

参考：完整 SKILL.md

Excalidraw 图表 Skill

通过编写标准 Excalidraw 元素 JSON 并保存为 .excalidraw 文件来创建图表。这些文件可以拖到 excalidraw.com 上查看和编辑。无需账号、无需 API key、无需渲染库——只要 JSON。

何时使用

为架构图、流程图、时序图、概念图等生成 .excalidraw 文件。文件可在 excalidraw.com 打开，或上传得到可分享链接。

工作流

1. 加载本 skill（你已经做了）
2. 写元素 JSON——一个 Excalidraw 元素对象数组
3. 用 write_file 保存文件，创建一个 .excalidraw 文件
4. 可选上传，通过 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。

上传得到可分享链接

通过终端运行上传脚本（位于本 skill 的 scripts/ 目录）：

python skills/creative/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：相对元素 x、y 的 [dx, dy] 偏移
• 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
• 标题和 heading 最小 fontSize：20
• 次要注释最小 fontSize：14（少用）
• 绝不用低于 14 的 fontSize

元素尺寸：

• 带标签的矩形/椭圆最小形状尺寸：120x60
• 元素之间至少留 20-30px 间距
• 宁可少而大的元素，不要多而小

调色板

完整色表见 references/colors.md。速查：

技巧

• 全图一致地用调色板
• 文本对比度至关重要——白底上绝不用浅灰。白底上文本颜色最低：#757575
• 文本里不要用 emoji——Excalidraw 字体渲染不出来
• 深色模式图表见 references/dark-mode.md
• 更大的示例见 references/examples.md