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 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

OOP class structure, inheritance Class Diagram diagram-patterns.md

Object interactions over time Sequence Diagram diagram-patterns.md

Database entities and relationships ER Diagram diagram-patterns.md

Data transformation, data movement DFD 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

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

{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }

Diamond

{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }

Label on shape (PREFERRED — no separate text element needed)

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

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

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

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

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

[ { "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", "startBinding": { "elementId": "el-2", "fixedPoint": [0.5, 1] }, "endBinding": { "elementId": "el-4", "fixedPoint": [0.5, 0] } } ]

Common Mistakes to Avoid

• Camera must use exact 4:3 ratios — non-4:3 viewports cause distortion

• Always start with cameraUpdate — without it the viewport is unpredictable

• No comments in element arrays — elements must be valid JSON. Never add // or /* */ comments inside the array; they break JSON parsing

• Text contrast — never use light gray on white. Minimum text color on white: #757575 . For text on light fills use dark variants (#15803d not #22c55e )

• Arrow labels need space — long labels overflow short arrows; keep labels short or widen arrows

• No emoji — Excalidraw's font does not render emoji

• Element overlap — check that labels, boxes, and zone overlays don't stack on each other (minimum 20px gap)

• Camera padding — leave padding inside the camera frame; don't match camera size exactly to content size