Excalidraw Diagram Creator

Generate .excalidraw JSON files that argue visually, not just display information.

Core Philosophy

Diagrams should ARGUE, not DISPLAY.

A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning.

The Isomorphism Test: If you removed all text, would the structure alone communicate the concept? If not, redesign.

The Education Test: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches—it shows actual formats, real event names, concrete examples.

---

Depth Assessment (Do This First)

Before designing, determine what level of detail this diagram needs:

Simple/Conceptual Diagrams

Use abstract shapes when:

• Explaining a mental model or philosophy
• The audience doesn't need technical specifics
• The concept IS the abstraction (e.g., "separation of concerns")

Comprehensive/Technical Diagrams

Use concrete examples when:

• Diagramming a real system, protocol, or architecture
• The diagram will be used to teach or explain (e.g., YouTube video)
• The audience needs to understand what things actually look like
• You're showing how multiple technologies integrate

For technical diagrams, you MUST include evidence artifacts (see below).

---

Research Mandate (For Technical Diagrams)

Before drawing anything technical, research the actual specifications.

If you're diagramming a protocol, API, or framework:

1. Look up the actual JSON/data formats
2. Find the real event names, method names, or API endpoints
3. Understand how the pieces actually connect
4. Use real terminology, not generic placeholders

Bad: "Protocol" → "Frontend" Good: "AG-UI streams events (RUN_STARTED, STATE_DELTA, A2UI_UPDATE)" → "CopilotKit renders via createA2UIMessageRenderer()"

Research makes diagrams accurate AND educational.

---

Evidence Artifacts

Evidence artifacts are concrete examples that prove your diagram is accurate and help viewers learn. Include them in technical diagrams.

Types of evidence artifacts (choose what's relevant to your diagram):

Artifact Type	When to Use	How to Render
Code snippets	APIs, integrations, implementation details	Dark rectangle (#1e293b) + syntax-colored text
Data/JSON examples	Data formats, schemas, payloads	Dark rectangle + green (#22c55e) text
Event/step sequences	Protocols, workflows, lifecycles	Timeline pattern (line + dots + labels)
UI mockups	Showing actual output/results	Nested rectangles mimicking real UI
Real input content	Showing what goes IN to a system	Rectangle with sample content visible
API/method names	Real function calls, endpoints	Use actual names from docs, not placeholders

Example: For a diagram about a streaming protocol, you might show:

• The actual event names from the spec (not just "Event 1", "Event 2")
• A code snippet showing how to connect
• What the streamed data actually looks like

Example: For a diagram about a data transformation pipeline:

• Show sample input data (actual format, not "Input")
• Show sample output data (actual format, not "Output")
• Show intermediate states if relevant

The key principle: show what things actually look like, not just what they're called.

---

Multi-Zoom Architecture

Comprehensive diagrams operate at multiple zoom levels simultaneously. Think of it like a map that shows both the country borders AND the street names.

Level 1: Summary Flow

A simplified overview showing the full pipeline or process at a glance. Often placed at the top or bottom of the diagram.

Example: Input → Processing → Output or Client → Server → Database

Level 2: Section Boundaries

Labeled regions that group related components. These create visual "rooms" that help viewers understand what belongs together.

Example: Grouping by responsibility (Backend / Frontend), by phase (Setup / Execution / Cleanup), or by team (User / System / External)

Level 3: Detail Inside Sections

Evidence artifacts, code snippets, and concrete examples within each section. This is where the educational value lives.

Example: Inside a "Backend" section, you might show the actual API response format, not just a box labeled "API Response"

For comprehensive diagrams, aim to include all three levels. The summary gives context, the sections organize, and the details teach.

Bad vs Good

Bad (Displaying)	Good (Arguing)
5 equal boxes with labels	Each concept has a shape that mirrors its behavior
Card grid layout	Visual structure matches conceptual structure
Icons decorating text	Shapes that ARE the meaning
Same container for everything	Distinct visual vocabulary per concept
Everything in a box	Free-floating text with selective containers

Simple vs Comprehensive (Know Which You Need)

Simple Diagram	Comprehensive Diagram
Generic labels: "Input" → "Process" → "Output"	Specific: shows what the input/output actually looks like
Named boxes: "API", "Database", "Client"	Named boxes + examples of actual requests/responses
"Events" or "Messages" label	Timeline with real event/message names from the spec
"UI" or "Dashboard" rectangle	Mockup showing actual UI elements and content
~30 seconds to explain	~2-3 minutes of teaching content
Viewer learns the structure	Viewer learns the structure AND the details

Simple diagrams are fine for abstract concepts, quick overviews, or when the audience already knows the details. Comprehensive diagrams are needed for technical architectures, tutorials, educational content, or when you want the diagram itself to teach.

---

Container vs. Free-Floating Text

Not every piece of text needs a shape around it. Default to free-floating text. Add containers only when they serve a purpose.

Use a Container When...	Use Free-Floating Text When...
It's the focal point of a section	It's a label or description
It needs visual grouping with other elements	It's supporting detail or metadata
Arrows need to connect to it	It describes something nearby
The shape itself carries meaning (decision diamond, etc.)	Typography alone creates sufficient hierarchy
It represents a distinct "thing" in the system	It's a section title, subtitle, or annotation

Typography as hierarchy: Use font size, weight, and color to create visual hierarchy without boxes. A 28px title doesn't need a rectangle around it.

The container test: For each boxed element, ask "Would this work as free-floating text?" If yes, remove the container.

---

Design Process (Do This BEFORE Generating JSON)

Step 0: Assess Depth Required

Before anything else, determine if this needs to be:

• Simple/Conceptual: Abstract shapes, labels, relationships (mental models, philosophies)
• Comprehensive/Technical: Concrete examples, code snippets, real data (systems, architectures, tutorials)

If comprehensive: Do research first. Look up actual specs, formats, event names, APIs.

Step 1: Understand Deeply

Read the content. For each concept, ask:

• What does this concept DO? (not what IS it)
• What relationships exist between concepts?
• What's the core transformation or flow?
• What would someone need to SEE to understand this? (not just read about)

Step 2: Map Concepts to Patterns

For each concept, find the visual pattern that mirrors its behavior:

If the concept...	Use this pattern
Spawns multiple outputs	Fan-out (radial arrows from center)
Combines inputs into one	Convergence (funnel, arrows merging)
Has hierarchy/nesting	Tree (lines + free-floating text)
Is a sequence of steps	Timeline (line + dots + free-floating labels)
Loops or improves continuously	Spiral/Cycle (arrow returning to start)
Is an abstract state or context	Cloud (overlapping ellipses)
Transforms input to output	Assembly line (before → process → after)
Compares two things	Side-by-side (parallel with contrast)
Separates into phases	Gap/Break (visual separation between sections)

Step 3: Ensure Variety

For multi-concept diagrams: each major concept must use a different visual pattern. No uniform cards or grids.

Step 4: Sketch the Flow

Before JSON, mentally trace how the eye moves through the diagram. There should be a clear visual story.

Step 5: Generate JSON

Only now create the Excalidraw elements.

---

Visual Pattern Library

Fan-Out (One-to-Many)

Central element with arrows radiating to multiple targets. Use for: sources, PRDs, root causes, central hubs.

        ○
       ↗
  □ → ○
       ↘
        ○

Convergence (Many-to-One)

Multiple inputs merging through arrows to single output. Use for: aggregation, funnels, synthesis.

  ○ ↘
  ○ → □
  ○ ↗

Tree (Hierarchy)

Parent-child branching with connecting lines and free-floating text (no boxes needed). Use for: file systems, org charts, taxonomies.

  label
  ├── label
  │   ├── label
  │   └── label
  └── label

Use line elements for the trunk and branches, free-floating text for labels.

Spiral/Cycle (Continuous Loop)

Elements in sequence with arrow returning to start. Use for: feedback loops, iterative processes, evolution.

  □ → □
  ↑     ↓
  □ ← □

Cloud (Abstract State)

Overlapping ellipses with varied sizes. Use for: context, memory, conversations, mental states.

Assembly Line (Transformation)

Input → Process Box → Output with clear before/after. Use for: transformations, processing, conversion.

  ○○○ → [PROCESS] → □□□
  chaos              order

Side-by-Side (Comparison)

Two parallel structures with visual contrast. Use for: before/after, options, trade-offs.

Gap/Break (Separation)

Visual whitespace or barrier between sections. Use for: phase changes, context resets, boundaries.

Lines as Structure

Use lines (type: line, not arrows) as primary structural elements instead of boxes:

• Timelines: Vertical or horizontal line with small dots (10-20px ellipses) at intervals, free-floating labels beside each dot
• Tree structures: Vertical trunk line + horizontal branch lines, with free-floating text labels (no boxes needed)
• Dividers: Thin dashed lines to separate sections
• Flow spines: A central line that elements relate to, rather than connecting boxes

Timeline:           Tree:
  ●─── Label 1        │
  │                   ├── item
  ●─── Label 2        │   ├── sub
  │                   │   └── sub
  ●─── Label 3        └── item

Lines + free-floating text often creates a cleaner result than boxes + contained text.

---

Shape Meaning

Choose shape based on what it represents—or use no shape at all:

Concept Type	Shape	Why
Labels, descriptions, details	none (free-floating text)	Typography creates hierarchy
Section titles, annotations	none (free-floating text)	Font size/weight is enough
Markers on a timeline	small ellipse (10-20px)	Visual anchor, not container
Start, trigger, input	ellipse	Soft, origin-like
End, output, result	ellipse	Completion, destination
Decision, condition	diamond	Classic decision symbol
Process, action, step	rectangle	Contained action
Abstract state, context	overlapping ellipse	Fuzzy, cloud-like
Hierarchy node	lines + text (no boxes)	Structure through lines

Rule: Default to no container. Add shapes only when they carry meaning. Aim for <30% of text elements to be inside containers.

---

Color as Meaning

Colors encode information, not decoration.

Semantic Purpose	Fill	Stroke
Primary/Neutral	#3b82f6	#1e3a5f
Secondary	#60a5fa	#1e3a5f
Start/Trigger	#fed7aa	#c2410c
End/Success	#a7f3d0	#047857
Warning/Reset	#fee2e2	#dc2626
Decision	#fef3c7	#b45309
AI/LLM	#ddd6fe	#6d28d9
Inactive/Disabled	#dbeafe	#1e40af (dashed)

Color on text: Free-floating text can use color directly for hierarchy—dark blue (#1e40af) for titles, medium blue (#3b82f6) for subtitles, gray (#64748b) for details.

---

Modern Aesthetics

For clean, professional diagrams:

Roughness

• roughness: 0 — Clean, crisp edges. Use for modern/technical diagrams.
• roughness: 1 — Hand-drawn, organic feel. Use for brainstorming/informal diagrams.

Default to 0 for most professional use cases.

Stroke Width

• strokeWidth: 1 — Thin, elegant. Good for lines, dividers, subtle connections.
• strokeWidth: 2 — Standard. Good for shapes and primary arrows.
• strokeWidth: 3 — Bold. Use sparingly for emphasis (main flow line, key connections).

Opacity

Always use opacity: 100 for all elements. Use color, size, and stroke width to create hierarchy instead of transparency.

Small Markers Instead of Shapes

Instead of full shapes, use small dots (10-20px ellipses) as:

• Timeline markers
• Bullet points
• Connection nodes
• Visual anchors for free-floating text

---

Layout Principles

Hierarchy Through Scale

• Hero: 300×150 - visual anchor, most important
• Primary: 180×90
• Secondary: 120×60
• Small: 60×40

Whitespace = Importance

The most important element has the most empty space around it (200px+).

Flow Direction

Guide the eye: typically left→right or top→bottom for sequences, radial for hub-and-spoke.

Connections Required

Position alone doesn't show relationships. If A relates to B, there must be an arrow.

---

Text Rules

CRITICAL: The JSON text property contains ONLY readable words.

{
  "id": "myElement1",
  "text": "Start",
  "originalText": "Start"
}

Settings: fontSize: 16, fontFamily: 3, textAlign: "center", verticalAlign: "middle"

---

JSON Structure

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

Element Templates

Free-Floating Text (no container)

{
  "type": "text",
  "id": "label1",
  "x": 100, "y": 100,
  "width": 200, "height": 25,
  "text": "Section Title",
  "originalText": "Section Title",
  "fontSize": 20,
  "fontFamily": 3,
  "textAlign": "left",
  "verticalAlign": "top",
  "strokeColor": "#1e40af",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 11111,
  "version": 1,
  "versionNonce": 22222,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "containerId": null,
  "lineHeight": 1.25
}

Line (structural, not arrow)

{
  "type": "line",
  "id": "line1",
  "x": 100, "y": 100,
  "width": 0, "height": 200,
  "strokeColor": "#3b82f6",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 44444,
  "version": 1,
  "versionNonce": 55555,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "points": [[0, 0], [0, 200]]
}

Small Marker Dot

{
  "type": "ellipse",
  "id": "dot1",
  "x": 94, "y": 94,
  "width": 12, "height": 12,
  "strokeColor": "#3b82f6",
  "backgroundColor": "#3b82f6",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 66666,
  "version": 1,
  "versionNonce": 77777,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false
}

Rectangle

{
  "type": "rectangle",
  "id": "elem1",
  "x": 100, "y": 100, "width": 180, "height": 90,
  "strokeColor": "#1e3a5f",
  "backgroundColor": "#3b82f6",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 12345,
  "version": 1,
  "versionNonce": 67890,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": [{"id": "text1", "type": "text"}],
  "link": null,
  "locked": false,
  "roundness": {"type": 3}
}

Text (centered in shape)

{
  "type": "text",
  "id": "text1",
  "x": 130, "y": 132,
  "width": 120, "height": 25,
  "text": "Process",
  "originalText": "Process",
  "fontSize": 16,
  "fontFamily": 3,
  "textAlign": "center",
  "verticalAlign": "middle",
  "strokeColor": "#1e3a5f",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 11111,
  "version": 1,
  "versionNonce": 22222,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "containerId": "elem1",
  "lineHeight": 1.25
}

Arrow

{
  "type": "arrow",
  "id": "arrow1",
  "x": 282, "y": 145, "width": 118, "height": 0,
  "strokeColor": "#1e3a5f",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 33333,
  "version": 1,
  "versionNonce": 44444,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "points": [[0, 0], [118, 0]],
  "startBinding": {"elementId": "elem1", "focus": 0, "gap": 2},
  "endBinding": {"elementId": "elem2", "focus": 0, "gap": 2},
  "startArrowhead": null,
  "endArrowhead": "arrow"
}

For curves: use 3+ points in points array.

---

Quality Checklist

Depth & Evidence (Check First for Technical Diagrams)

1. Research done: Did you look up actual specs, formats, event names?
2. Evidence artifacts: Are there code snippets, JSON examples, or real data?
3. Multi-zoom: Does it have summary flow + section boundaries + detail?
4. Concrete over abstract: Real content shown, not just labeled boxes?
5. Educational value: Could someone learn something concrete from this?

Conceptual

6. Isomorphism: Does each visual structure mirror its concept's behavior?
7. Argument: Does the diagram SHOW something text alone couldn't?
8. Variety: Does each major concept use a different visual pattern?
9. No uniform containers: Avoided card grids and equal boxes?

Container Discipline

10. Minimal containers: Could any boxed element work as free-floating text instead?
11. Lines as structure: Are tree/timeline patterns using lines + text rather than boxes?
12. Typography hierarchy: Are font size and color creating visual hierarchy (reducing need for boxes)?

Structural

13. Connections: Every relationship has an arrow or line
14. Flow: Clear visual path for the eye to follow
15. Hierarchy: Important elements are larger/more isolated

Technical

16. Text clean: text contains only readable words
17. Font: fontFamily: 3
18. Roughness: roughness: 0 for clean/modern (unless hand-drawn style requested)
19. Opacity: opacity: 100 for all elements (no transparency)
20. Container ratio: <30% of text elements should be inside containers