excalidraw

What this skill does

# Excalidraw Diagrams

Create hand-drawn style diagrams, flowcharts, architecture diagrams, and mind maps using the Excalidraw format. Diagrams are rendered interactively in the Canvas panel.

## When to Use This Skill

Use `create_excalidraw_diagram` when the user wants to visualize **structure, flow, or relationships** — not raw numbers.

| Use this skill for... | Use visualization skill for... |
|-----------------------|--------------------------------|
| System architecture diagram | Sales figures by quarter |
| Flowchart or decision tree | Survey response percentages |
| Sequence / interaction diagram | Stock price over time |
| Mind map or concept map | Market share breakdown |
| Shapes, boxes, arrows, labels | Any x/y or segment/value data |

## Diagram Type

Choose based on user intent. For Swimlane, Class, Sequence, ER, and DFD diagrams, read [diagram-patterns.md](diagram-patterns.md) before generating.

| Intent | Type | Pattern |
|--------|------|---------|
| Process steps, workflow, decisions | Flowchart | Rectangles + diamonds + arrows (see Example) |
| System components, dependencies | Architecture | Zone rectangles + boxes + arrows |
| Concept hierarchy, brainstorming | Mind Map | Center node + radial branch arrows |
| Entity connections, associations | Relationship | Boxes + labeled arrows |
| Cross-functional workflow, actor responsibilities | Swimlane | [diagram-patterns.md](diagram-patterns.md) |
| OOP class structure, inheritance | Class Diagram | [diagram-patterns.md](diagram-patterns.md) |
| Object interactions over time | Sequence Diagram | [diagram-patterns.md](diagram-patterns.md) |
| Database entities and relationships | ER Diagram | [diagram-patterns.md](diagram-patterns.md) |
| Data transformation, data movement | DFD | [diagram-patterns.md](diagram-patterns.md) |

## Available Tools

- **create_excalidraw_diagram(elements, title, background_color)**: Generate a diagram from Excalidraw element JSON

## Color Palette

Use these colors consistently across all diagrams.

### Primary Colors (strokes, arrows, text)
| Name | Hex | Use |
|------|-----|-----|
| Blue | `#4a9eed` | Primary actions, links |
| Amber | `#f59e0b` | Warnings, highlights |
| Green | `#22c55e` | Success, positive |
| Red | `#ef4444` | Errors, negative |
| Purple | `#8b5cf6` | Accents, special items |
| Cyan | `#06b6d4` | Info, secondary |

### Fill Colors (shape backgrounds)
| Color | Hex | Good For |
|-------|-----|----------|
| Light Blue | `#a5d8ff` | Input, sources, primary nodes |
| Light Green | `#b2f2bb` | Success, output, completed |
| Light Orange | `#ffd8a8` | Warning, pending, external |
| Light Purple | `#d0bfff` | Processing, middleware |
| Light Red | `#ffc9c9` | Error, critical |
| Light Yellow | `#fff3bf` | Notes, decisions |
| Light Teal | `#c3fae8` | Storage, data |

### Background Zone Colors (use with `opacity: 35` for layer grouping)
| Color | Hex | Good For |
|-------|-----|----------|
| Blue zone | `#dbe4ff` | UI / frontend layer |
| Purple zone | `#e5dbff` | Logic / agent layer |
| Green zone | `#d3f9d8` | Data / tool layer |

## Element Format

### Required Fields (all elements)
`type`, `id` (unique string), `x`, `y`, `width`, `height`

### Defaults (skip if using these values)
`strokeColor="#1e1e1e"`, `backgroundColor="transparent"`, `fillStyle="solid"`, `strokeWidth=2`, `roughness=1`, `opacity=100`

### Shape Types

**Rectangle**
```json
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid" }
```
- `roundness: { type: 3 }` for rounded corners

**Ellipse**
```json
{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }
```

**Diamond**
```json
{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }
```

**Label on shape (PREFERRED — no separate text element needed)**
```json
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "label": { "text": "My Label", "fontSize": 20 } }
```
- Works on rectangle, ellipse, diamond
- Text auto-centers; container auto-resizes to fit
- Also works on arrows: `"label": { "text": "connects" }`

**Standalone Text** (titles, annotations only)
```json
{ "type": "text", "id": "t1", "x": 150, "y": 50, "text": "Title", "fontSize": 24 }
```
- `x` is the LEFT edge. To center at position `cx`: set `x = cx - text.length × fontSize × 0.25`

**Arrow**
```json
{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
  "points": [[0,0],[150,0]], "endArrowhead": "arrow",
  "startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
  "endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] } }
```
- `points`: `[dx, dy]` offsets from element `x, y`
- `endArrowhead`: `null` | `"arrow"` | `"bar"` | `"dot"` | `"triangle"`
- `strokeStyle`: `"solid"` | `"dashed"` | `"dotted"`
- `fixedPoint` for bindings: top `[0.5,0]`, bottom `[0.5,1]`, left `[0,0.5]`, right `[1,0.5]`

### Pseudo-Elements (not drawn — control behavior)

**cameraUpdate** — sets the viewport
```json
{ "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 }
```
- `x, y`: top-left corner of visible area (scene coordinates)
- **Must be 4:3 ratio**: 400×300, 600×450, 800×600, 1200×900, 1600×1200
- ALWAYS place a `cameraUpdate` as the **first element** to frame the diagram
- No `id` needed

**delete** — removes elements by ID
```json
{ "type": "delete", "ids": "r1,a1,t2" }
```
- Comma-separated element IDs to remove
- Use when updating an existing diagram to remove elements before adding replacements
- Never reuse a deleted ID — assign new IDs to replacements

## Camera Sizing Guide

The diagram displays at ~700px width. Use these standard sizes:

| Size | Width × Height | Use When |
|------|---------------|----------|
| S | 400 × 300 | 2–3 elements, close-up |
| M | 600 × 450 | Small diagram section |
| **L** | **800 × 600** | **Standard (default)** |
| XL | 1200 × 900 | Large overview |
| XXL | 1600 × 1200 | Very complex diagrams |

**Font size rules:**
- Body text / labels: **minimum 16**
- Titles / headings: **minimum 20**
- Annotations: minimum 14 (use sparingly)
- At XL/XXL camera: increase minimums by ~4px

**Element sizing rules:**
- Labeled rectangles/ellipses: minimum 120 × 60
- Leave 20–30px gaps between elements

## Updating an Existing Diagram

When the user asks to modify a diagram, you will receive the current elements in context. Respond with the complete updated elements array:
- Keep the same `id` for unchanged elements
- Modify fields on elements you want to change
- Omit elements you want to remove
- Add new elements with unique IDs not used before

## Example: Flowchart

```json
[
  { "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 },
  { "type": "rectangle", "id": "el-1",
    "x": 300, "y": 60, "width": 160, "height": 60,
    "strokeColor": "#4a9eed", "backgroundColor": "#a5d8ff",
    "fillStyle": "solid", "roundness": { "type": 3 },
    "label": { "text": "Start", "fontSize": 18 } },
  { "type": "diamond", "id": "el-2",
    "x": 280, "y": 170, "width": 200, "height": 90,
    "strokeColor": "#f59e0b", "backgroundColor": "#fff3bf",
    "fillStyle": "solid",
    "label": { "text": "Decision?", "fontSize": 16 } },
  { "type": "arrow", "id": "el-3",
    "x": 380, "y": 120, "width": 0, "height": 50,
    "points": [[0,0],[0,50]], "endArrowhead": "arrow",
    "startBinding": { "elementId": "el-1", "fixedPoint": [0.5, 1] },
    "endBinding": { "elementId": "el-2", "fixedPoint": [0.5, 0] } },
  { "type": "rectangle", "id": "el-4",
    "x": 300, "y": 320, "width": 160, "height": 60,
    "strokeColor": "#22c55e", "backgroundColor": "#b2f2bb",
    "fillStyle": "solid", "roundness": { "type": 3 },
    "label": { "text": "End", "fontSize": 18 } },
  { "type": "arrow", "id": "el-5",
    "x": 380, "y": 260, "width": 0, "height": 60,
    "points": [[0,0],[0,60]], "endArrowhead": "arrow",
    "startBind