Excalidraw Diagram Generation
Generate .excalidraw JSON files that open directly in Excalidraw.
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
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: 2roughness: 1 (hand-drawn), 0 (smooth for text)opacity: 100fontFamily: 5 (Excalifont)fontSize: 20seed: any random integerversion: 1, versionNonce: 0index: "a0", "a1", "a2"...
Reference
See references/format-spec.md for complete element schemas, all property values, and detailed examples.
1---2name: excalidraw3description: Generate Excalidraw diagrams (.excalidraw JSON files) for whiteboarding, flowcharts, architecture diagrams, sequence diagrams, mind maps, wireframes, and org charts. Use when user requests diagrams, visual documentation, system architecture visualization, process flows, or any hand-drawn style diagram. Triggers on requests mentioning Excalidraw, diagram creation, flowcharts, architecture diagrams, sequence diagrams, wireframes, or visual documentation.4---56# Excalidraw Diagram Generation78Generate `.excalidraw` JSON files that open directly in Excalidraw.910## Quick Start1112Minimal valid file:13```json14{15 "type": "excalidraw",16 "version": 2,17 "source": "https://excalidraw.com",18 "elements": [],19 "appState": { "viewBackgroundColor": "#ffffff" },20 "files": {}21}22```2324## Workflow25261. Identify diagram type (flowchart, architecture, sequence, mind map, wireframe, org chart)272. Plan element layout with consistent spacing (use 20px grid)283. Generate elements with unique IDs and proper bindings294. Write complete JSON to `.excalidraw` file3031## Element Patterns3233### Shape with Label3435Always bind text to container bidirectionally:36```json37// Rectangle38{39 "type": "rectangle",40 "id": "box_1",41 "x": 100, "y": 100, "width": 150, "height": 60,42 "backgroundColor": "#a5d8ff",43 "boundElements": [{ "id": "text_1", "type": "text" }],44 ...baseProps45}46// Bound text47{48 "type": "text",49 "id": "text_1",50 "containerId": "box_1",51 "textAlign": "center",52 "verticalAlign": "middle",53 ...textProps54}55```5657### Connected Arrow5859Update both arrow and shapes:60```json61// Arrow62{63 "type": "arrow",64 "id": "arrow_1",65 "points": [[0, 0], [150, 0]],66 "startBinding": { "elementId": "box_1", "fixedPoint": [1.0, 0.5001], "mode": "orbit" },67 "endBinding": { "elementId": "box_2", "fixedPoint": [0.0, 0.5001], "mode": "orbit" },68 "endArrowhead": "arrow",69 ...baseProps70}71// Both shapes need boundElements updated72"boundElements": [{ "id": "arrow_1", "type": "arrow" }]73```7475## Diagram-Specific Patterns7677**Flowchart:** Ellipse (start/end), Rectangle (process), Diamond (decision), vertical flow with 70px gaps7879**Sequence Diagram:** Rectangles (actors) at top, dashed vertical lines (lifelines), horizontal arrows (messages)8081**Architecture:** Rectangles with rounded corners, group related components, use frames for boundaries8283**Mind Map:** Central ellipse, radiating lines to topic rectangles, organic layout8485**Org Chart:** Rectangles with hierarchy, lines (not arrows) for connections8687## Critical Rules88891. **Bidirectional bindings** - When arrow connects to shape, update BOTH:90 - Arrow's `startBinding`/`endBinding`91 - Shape's `boundElements` array92932. **fixedPoint precision** - Use `0.5001` not `0.5` to avoid floating point issues94953. **Unique IDs** - Every element needs unique `id`96974. **Calculate width/height** for lines/arrows from points array98995. **Required base properties** for every element:100 ```101 id, type, x, y, width, height, angle, strokeColor, backgroundColor,102 fillStyle, strokeWidth, strokeStyle, roughness, opacity, roundness,103 seed, version, versionNonce, isDeleted, updated, groupIds, frameId,104 boundElements, link, locked, index105 ```106107## Common Values108109**Colors:**110- Stroke: `#1e1e1e` (black), `#e03131` (red), `#2f9e44` (green), `#1971c2` (blue)111- Background: `#a5d8ff` (blue), `#b2f2bb` (green), `#ffec99` (yellow), `#ffc9c9` (red), `#d0bfff` (purple)112113**Defaults:**114- `strokeWidth`: 2115- `roughness`: 1 (hand-drawn), 0 (smooth for text)116- `opacity`: 100117- `fontFamily`: 5 (Excalifont)118- `fontSize`: 20119- `seed`: any random integer120- `version`: 1, `versionNonce`: 0121- `index`: "a0", "a1", "a2"...122123## Reference124125See [references/format-spec.md](references/format-spec.md) for complete element schemas, all property values, and detailed examples.
johnlarkin1