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

{
  "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
}

Excalidraw 创建器

生成以PNG图像呈现的精美手绘风格图表。

工作流程

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

快速参考

bash
node <技能目录>/scripts/render.js input.excalidraw output.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=代码) |

样式（适用于所有形状）

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

fillStyle: hachure（斜线填充）, cross-hatch（交叉阴影）, solid（实心）
roughness: 0=整洁, 1=手绘（默认）, 2=非常潦草

箭头绑定（重要）

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

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

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

仅此而已。无需x、y或points属性。渲染器会自动计算形状边缘的起点和终点。

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

对于需要绕过障碍物的箭头，使用带中间路径点的absolutePoints： json { 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 }

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

箭头标签

在箭头中点附近放置一个独立的文本元素： json {type:text,id:label,x:215,y:98,width:85,height:16,text:发送数据,fontSize:10,fontFamily:1,strokeColor:#868e96}

箭头样式

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

模板：带绑定的流程图

json
{
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用于代码字体
• 按空间分组相关元素，按类型进行颜色编码
• 对于嵌套布局，使用大的背景矩形作为容器