Excalidraw Diagram Generator

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

Workflow

Generate JSON — Write Excalidraw element array based on what the user wants
Save to file — Write JSON to
```
/tmp/<name>.excalidraw
```

Render —

node <skill_dir>/scripts/render.js /tmp/<name>.excalidraw /tmp/<name>.png

Send — Send the PNG via message tool with
```
filePath
```

Quick Reference

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)

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

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

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

First point = near source shape edge (will snap to actual edge)
Last point = near target shape edge (will snap to actual edge)
Middle points = absolute waypoint coordinates for routing

Arrow labels

Place a separate text element near the arrow midpoint:

{"type":"text","id":"label","x":215,"y":98,"width":85,"height":16,"text":"sends data","fontSize":10,"fontFamily":1,"strokeColor":"#868e96"}

Arrow styles

```
"strokeStyle":"dashed"
```
— dashed line
```
"startArrowhead": true
```
— bidirectional arrow

Template: Flowchart with Bindings

{
  "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"},
{&quot;type&quot;:&quot;arrow&quot;,&quot;id&quot;:&quot;a1&quot;,&quot;from&quot;:&quot;start&quot;,&quot;to&quot;:&quot;decision&quot;,&quot;strokeColor&quot;:&quot;#1e1e1e&quot;,&quot;strokeWidth&quot;:2,&quot;roughness&quot;:1},

{&quot;type&quot;:&quot;diamond&quot;,&quot;id&quot;:&quot;decision&quot;,&quot;x&quot;:140,&quot;y&quot;:170,&quot;width&quot;:200,&quot;height&quot;:120,&quot;strokeColor&quot;:&quot;#1e1e1e&quot;,&quot;backgroundColor&quot;:&quot;#ffec99&quot;,&quot;fillStyle&quot;:&quot;hachure&quot;,&quot;strokeWidth&quot;:2,&quot;roughness&quot;:1},
{&quot;type&quot;:&quot;text&quot;,&quot;id&quot;:&quot;t2&quot;,&quot;x&quot;:185,&quot;y&quot;:215,&quot;width&quot;:110,&quot;height&quot;:30,&quot;text&quot;:&quot;Condition?&quot;,&quot;fontSize&quot;:18,&quot;fontFamily&quot;:1,&quot;strokeColor&quot;:&quot;#1e1e1e&quot;,&quot;textAlign&quot;:&quot;center&quot;},

{&quot;type&quot;:&quot;arrow&quot;,&quot;id&quot;:&quot;a2&quot;,&quot;from&quot;:&quot;decision&quot;,&quot;to&quot;:&quot;process&quot;,&quot;strokeColor&quot;:&quot;#1e1e1e&quot;,&quot;strokeWidth&quot;:2,&quot;roughness&quot;:1},

{&quot;type&quot;:&quot;rectangle&quot;,&quot;id&quot;:&quot;process&quot;,&quot;x&quot;:150,&quot;y&quot;:350,&quot;width&quot;:180,&quot;height&quot;:60,&quot;strokeColor&quot;:&quot;#1e1e1e&quot;,&quot;backgroundColor&quot;:&quot;#a5d8ff&quot;,&quot;fillStyle&quot;:&quot;hachure&quot;,&quot;strokeWidth&quot;:2,&quot;roughness&quot;:1},
{&quot;type&quot;:&quot;text&quot;,&quot;id&quot;:&quot;t3&quot;,&quot;x&quot;:190,&quot;y&quot;:365,&quot;width&quot;:100,&quot;height&quot;:30,&quot;text&quot;:&quot;Process&quot;,&quot;fontSize&quot;:20,&quot;fontFamily&quot;:1,&quot;strokeColor&quot;:&quot;#1e1e1e&quot;}

]
}

Layout Guidelines

Node size: 140-200 × 50-70 px
Diamond: 180-200 × 100-120 px (taller for text)
Vertical spacing: 60-100 px between nodes
Horizontal spacing: 80-120 px between nodes
Text: Position inside shape manually (offset ~15-30px from top-left of shape)
Arrow labels: Place as separate text elements near midpoint of arrow path

Color Palette

Fills:

#a5d8ff

(blue),

#b2f2bb

(green),

#ffec99

(yellow),

#ffc9c9

(red),

#d0bfff

(purple),

#f3d9fa

(pink),

#fff4e6

(cream) Strokes:

#1e1e1e

(dark),

#1971c2

(blue),

#2f9e44

(green),

#e8590c

(orange),

#862e9c

(purple) Labels:

#868e96

(gray, for annotations)

Tips

Every element needs a unique
```
id
```
(required for binding!)
Use
```
from
```
/
```
to
```
on arrows — don't calculate coordinates manually
```
roughness:0
```
for clean diagrams,
```
1
```
for sketchy feel
Text
```
fontFamily:1
```
for hand-drawn,
```
3
```
for code
Group related elements spatially, color-code by type
For nested layouts, use a large background rectangle as a container

Excalidraw Diagram Generator

AI Skill Market Insights

Be Part of the 0+ Developer Community