介绍
# Excalidraw Diagram Generator
生成渲染为 PNG 图像的精美手绘风格图表。
## 工作流程
1. **生成 JSON** — 根据用户需求编写 Excalidraw 元素数组 2. **保存到文件** — 将 JSON 写入 `/tmp/<name>.excalidraw` 3. **渲染** — `node <skill_dir>/scripts/render.js /tmp/<name>.excalidraw /tmp/<name>.png` 4. **发送** — 使用带有 `filePath` 参数的消息工具发送 PNG
## 快速参考
```bash node <skill_dir>/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":"sends data","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":"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` 用于代码体 - 在空间上将相关元素分组，按类型进行颜色编码 - 对于嵌套布局，使用大的背景矩形作为容器