excalidraw

# Excalidraw Diagram Generator

Generate beautiful hand-drawn style diagrams rendered as PNG images.

## Workflow

1. **Generate JSON** — Write Excalidraw element array based on what the user wants
2. **Save to file** — Write JSON to `/tmp/<name>.excalidraw`
3. **Render** — `node <skill_dir>/scripts/render.js /tmp/<name>.excalidraw /tmp/<name>.png`
4. **Send** — Send the PNG via message tool with `filePath`

## Quick Reference

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

## Element Types

| Type | Shape | Key Props |
|------|-------|-----------|
| `rectangle` | Box | x, y, width, height |
| `ellipse` | Oval | x, y, width, height |
| `diamond` | Decision | x, y, width, height |
| `arrow` | Arrow | connects shapes (see Arrow Binding below) |
| `line` | Line | x, y, points: [[0,0],[dx,dy]] |
| `text` | Label | x, y, text, fontSize, fontFamily (1=hand, 2=sans, 3=code) |

### Styling (all shapes)

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

**fillStyle**: `hachure` (diagonal lines), `cross-hatch`, `solid`
**roughness**: 0=clean, 1=hand-drawn (default), 2=very sketchy

## Arrow Binding (IMPORTANT)

**Always use `from`/`to` bindings for arrows.** The renderer auto-calculates edge intersection points — no manual coordinate math needed.

### Simple arrow (straight, between two shapes)
```json
{"type":"arrow","id":"a1","from":"box1","to":"box2","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1}
```
That's it. No x, y, or points needed. The renderer computes start/end at shape edges.

### Multi-segment arrow (routed path with waypoints)
For arrows that need to go around obstacles, use `absolutePoints` with intermediate waypoints:
```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"...