Erdmannsilva Excalidraw — Erdmannsilva 是 Excalidraw 的作者。

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

工作流程 生成 JSON —— 根据用户需求编写 Excalidraw 元素数组 保存到文件 —— 将 JSON 写入 /tmp/.excalidraw 渲染 —— 运行 node /scripts/render.js /tmp/.excalidraw /tmp/.png 发送 —— 通过消息工具发送 PNG 图像，包含 filePath

快速参考 node /scripts/render.js input.excalidraw output.png

元素类型 类型 形状 Key Props 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": "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 px 菱形：180-200 × 100-120 px（文字较高） 垂直间距：60-100 px 水平间距：80-120 px 文字：手动定位在形状内（偏移 ~15-30px 从形状左上角） 箭头标签：作为单独的文本元素放在箭头中点附近

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

提示 每个元素需要一个唯一的 id（绑定所必需！） 使用 from/to 在箭头上 —— 不要手动计算坐标 roughness：0 用于干净的图表，1 用于草图风格 文本 fontFamily：1 用于手绘，3 用于代码 将相关元素分组在一起，按类型颜色编码 对于嵌套布局，使用一个大背景矩形作为容器