Excalidraw Diagram Generation Skill

Excalidraw Diagram Generation

Generate .excalidraw JSON files that open directly in Excalidraw. These diagrams have a distinctive hand-drawn aesthetic.

Quick Start

Minimal valid file:

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [],
  "appState": { "viewBackgroundColor": "#ffffff" },
  "files": {}
}

Workflow

Identify diagram type (flowchart, architecture, sequence, mind map, wireframe, org chart)
Plan element layout with consistent spacing (use 20px grid)
Generate elements with unique IDs and proper bindings
Write complete JSON to .excalidraw file

Element Patterns

Shape with Label

Always bind text to container bidirectionally:

// Rectangle
{
  "type": "rectangle",
  "id": "box_1",
  "x": 100, "y": 100, "width": 150, "height": 60,
  "backgroundColor": "#a5d8ff",
  "boundElements": [{ "id": "text_1", "type": "text" }],
  ...baseProps
}
// Bound text
{
  "type": "text",
  "id": "text_1",
  "containerId": "box_1",
  "textAlign": "center",
  "verticalAlign": "middle",
  ...textProps
}

Connected Arrow

Update both arrow and shapes:

// Arrow
{
  "type": "arrow",
  "id": "arrow_1",
  "points": [[0, 0], [150, 0]],
  "startBinding": { "elementId": "box_1", "fixedPoint": [1.0, 0.5001], "mode": "orbit" },
  "endBinding": { "elementId": "box_2", "fixedPoint": [0.0, 0.5001], "mode": "orbit" },
  "endArrowhead": "arrow",
  ...baseProps
}
// Both shapes need boundElements updated
"boundElements": [{ "id": "arrow_1", "type": "arrow" }]

Diagram-Specific Patterns

Flowchart: Ellipse (start/end), Rectangle (process), Diamond (decision), vertical flow with 70px gaps

Sequence Diagram: Rectangles (actors) at top, dashed vertical lines (lifelines), horizontal arrows (messages)

Architecture: Rectangles with rounded corners, group related components, use frames for boundaries

Mind Map: Central ellipse, radiating lines to topic rectangles, organic layout

Org Chart: Rectangles with hierarchy, lines (not arrows) for connections

Wireframe: Rectangles for UI sections, text placeholders, simple shapes for buttons/forms

Critical Rules

Bidirectional bindings - When arrow connects to shape, update BOTH:
- Arrow's startBinding/endBinding
- Shape's boundElements array
fixedPoint precision - Use 0.5001 not 0.5 to avoid floating point issues
Unique IDs - Every element needs unique id
Calculate width/height for lines/arrows from points array

Required base properties for every element:

id, type, x, y, width, height, angle, strokeColor, backgroundColor,
fillStyle, strokeWidth, strokeStyle, roughness, opacity, roundness,
seed, version, versionNonce, isDeleted, updated, groupIds, frameId,
boundElements, link, locked, index

Common Values

Colors:

Stroke: #1e1e1e (black), #e03131 (red), #2f9e44 (green), #1971c2 (blue)
Background: #a5d8ff (blue), #b2f2bb (green), #ffec99 (yellow), #ffc9c9 (red), #d0bfff (purple)

Defaults:

strokeWidth: 2
roughness: 1 (hand-drawn), 0 (smooth for text)
opacity: 100
fontFamily: 5 (Excalifont)
fontSize: 20
seed: any random integer
version: 1, versionNonce: 0
index: "a0", "a1", "a2"...

Element Types

| Type | Use For | |------|---------| | rectangle | Process, container, UI element | | ellipse | Start/end, central node | | diamond | Decision point | | line | Connection without arrow | | arrow | Directional flow | | text | Labels, standalone text | | frame | Grouping boundary |

When to Use Excalidraw

Hand-drawn aesthetic desired
Interactive diagram editing needed
Whiteboard-style brainstorming
Presentations and documentation with visual appeal
When visual style matters more than precision
Team collaboration on diagrams

Reference

See references/format-spec.md for complete element schemas, all property values, and detailed examples.

Agent Skills: Excalidraw Diagram Generation

Install this agent skill to your local

Skill Files