Excalidraw手绘图表生成器Skill excalidraw

---

name: excalidraw description: 从Excalidraw JSON生成手绘风格图表、流程图和架构图，输出为PNG图像

Excalidraw 图表生成器

生成精美的手绘风格图表，渲染为PNG图像。

工作流程

1. 生成JSON — 根据用户需求编写Excalidraw元素数组
2. 保存文件 — 将JSON写入 /tmp/<名称>.excalidraw
3. 渲染 — 执行 node <skill_dir>/scripts/render.js /tmp/<名称>.excalidraw /tmp/<名称>.png
4. 发送 — 通过消息工具发送PNG文件，使用 filePath 参数

快速参考

node <skill_dir>/scripts/render.js 输入.excalidraw 输出.png

元素类型

类型	形状	关键属性
rectangle	矩形框	x, y, width, height
ellipse	椭圆形	x, y, width, height
diamond	菱形（决策）	x, y, width, height
arrow	箭头	连接形状（见下方箭头绑定）
line	线条	x, y, points: [[0,0],[dx,dy]]
text	文本标签	x, y, text, fontSize, fontFamily (1=手写体, 2=无衬线体, 3=代码字体)

样式（所有形状）

{
  "strokeColor": "#1e1e1e",
  "backgroundColor": "#a5d8ff",
  "fillStyle": "hachure",
  "strokeWidth": 2,
  "roughness": 1,
  "strokeStyle": "solid"
}

fillStyle: hachure (斜线填充), cross-hatch (交叉线填充), solid (实心填充) roughness: 0=平滑, 1=手绘感（默认）, 2=非常潦草

箭头绑定（重要）

箭头始终使用 from/to 绑定。 渲染器会自动计算形状边缘的交点——无需手动计算坐标。

简单箭头（直线，连接两个形状）

{"type":"arrow","id":"a1","from":"box1","to":"box2","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1}

就这样。不需要x、y或points。渲染器会在形状边缘计算起点和终点。

多段箭头（带路径点的路由箭头）

对于需要绕过障碍物的箭头，使用带中间路径点的 absolutePoints：

{
  "type":"arrow","id":"a2","from":"box3","to":"box1",
  "absolutePoints": true,
  "points": [[375,500],[30,500],[30,127],[60,127]],
  "strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1
}

• 第一个点 = 靠近源形状边缘（会自动吸附到实际边缘）
• 最后一个点 = 靠近目标形状边缘（会自动吸附到实际边缘）
• 中间点 = 用于路由的绝对坐标路径点

箭头标签

在箭头中点附近放置一个单独的文本元素：

{"type":"text","id":"label","x":215,"y":98,"width":85,"height":16,"text":"发送数据","fontSize":10,"fontFamily":1,"strokeColor":"#868e96"}

箭头样式

• "strokeStyle":"dashed" — 虚线
• "startArrowhead": true — 双向箭头

模板：带绑定的流程图

{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {"type":"rectangle","id":"start","x":150,"y":50,"width":180,"height":60,"strokeColor":"#1e1e1e","backgroundColor":"#b2f2bb","fillStyle":"hachure","strokeWidth":2,"roughness":1},
    {"type":"text","id":"t1","x":200,"y":65,"width":80,"height":30,"text":"开始","fontSize":20,"fontFamily":1,"strokeColor":"#1e1e1e"},

    {"type":"arrow","id":"a1","from":"start","to":"decision","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1},

    {"type":"diamond","id":"decision","x":140,"y":170,"width":200,"height":120,"strokeColor":"#1e1e1e","backgroundColor":"#ffec99","fillStyle":"hachure","strokeWidth":2,"roughness":1},
    {"type":"text","id":"t2","x":185,"y":215,"width":110,"height":30,"text":"条件判断？","fontSize":18,"fontFamily":1,"strokeColor":"#1e1e1e","textAlign":"center"},

    {"type":"arrow","id":"a2","from":"decision","to":"process","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1},

    {"type":"rectangle","id":"process","x":150,"y":350,"width":180,"height":60,"strokeColor":"#1e1e1e","backgroundColor":"#a5d8ff","fillStyle":"hachure","strokeWidth":2,"roughness":1},
    {"type":"text","id":"t3","x":190,"y":365,"width":100,"height":30,"text":"处理过程","fontSize":20,"fontFamily":1,"strokeColor":"#1e1e1e"}
  ]
}

布局指南

• 节点尺寸: 140-200 × 50-70 像素
• 菱形: 180-200 × 100-120 像素（为容纳文本可更高）
• 垂直间距: 节点之间 60-100 像素
• 水平间距: 节点之间 80-120 像素
• 文本: 手动放置在形状内部（从形状左上角偏移约15-30像素）
• 箭头标签: 作为单独的文本元素放置在箭头路径中点附近

颜色调色板

填充色: #a5d8ff (蓝色), #b2f2bb (绿色), #ffec99 (黄色), #ffc9c9 (红色), #d0bfff (紫色), #f3d9fa (粉色), #fff4e6 (奶油色) 边框色: #1e1e1e (深色), #1971c2 (蓝色), #2f9e44 (绿色), #e8590c (橙色), #862e9c (紫色) 标签色: #868e96 (灰色，用于注释)

提示

• 每个元素都需要唯一的 id（绑定必需！）
• 箭头使用 from/to — 不要手动计算坐标
• roughness:0 用于干净图表，1 用于手绘感
• 文本 fontFamily:1 用于手写体，3 用于代码
• 按类型对相关元素进行空间分组和颜色编码
• 对于嵌套布局，使用一个大的背景矩形作为容器