Excalidraw 图表生成器

生成渲染为PNG图像的漂亮手绘风格图表。

工作流程

1. 生成 JSON— 根据用户需求编写 Excalidraw 元素数组
2. 保存到文件— 将 JSON 写入/tmp/<名称>.excalidraw
3. 渲染—node <技能目录>/scripts/render.js /tmp/<名称>.excalidraw /tmp/<名称>.png
4. 发送— 通过消息工具发送 PNG，附带文件路径

快速参考

node <skill_dir>/scripts/render.js input.excalidraw output.png

元素类型

样式（所有形状）

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

填充样式：影线（对角线），交叉影线，实心 粗糙度：0=整洁，1=手绘（默认），2=非常草稿

箭头绑定（重要）

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

简单箭头（直线，位于两个形状之间）

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

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

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

对于需要绕过障碍物的箭头，使用绝对坐标点并包含中间路径点：

{
  "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":"sends data","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":"Start","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":"Condition?","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":"Process","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(绑定所需！)
• 使用从/到在箭头上——不要手动计算坐标
• 粗糙度:0用于干净的图表，1用于手绘感
• 文本字体族:1用于手绘风格，3用于代码风格
• 在空间上分组相关元素，按类型进行颜色编码
• 对于嵌套布局，使用一个大的背景矩形作为容器