diagram-generator

Trigger: Use when "generate diagram", "architecture diagram", "workflow diagram", "org chart", "flowchart". Outputs Excalidraw JSON, SVG, or ASCII.

Diagram Types

| Type | Direction | When to Use | |---|---|---| | Flowchart | Top-to-bottom | Decision processes, workflows | | Architecture | Left-to-right (layered) | System components, infrastructure | | Sequence | Top-to-bottom | API calls, user flows, time-ordered events | | Org Chart | Top-to-bottom | Team structures, reporting lines | | ER Diagram | Left-to-right | Database tables and relationships | | Data Flow | Left-to-right | Data pipelines, transformations | | Mind Map | Radial from center | Topic exploration, brainstorming | | Timeline | Left-to-right | Project milestones, history | | State Machine | Left-to-right | UI states, system states |

Process

1. Determine: Diagram type, complexity (simple/medium/complex), key elements, layout direction
2. Plan: List all nodes/elements, map connections, determine groupings
3. Generate: Excalidraw JSON (primary) or SVG/ASCII (alternatives)

Excalidraw Element Types

• rectangle — boxes/nodes
• ellipse — start/end states, databases
• diamond — decision points
• arrow — connections (with labels)
• text — labels and annotations
• line — grouping boundaries

Output Options

Primary — Excalidraw JSON: Import at excalidraw.com. Fully editable. Best for ongoing use.

Alternative — SVG: Embed directly in web pages. Static but portable.

Alternative — ASCII: Copy-paste into docs, terminals, or any plain text context.

Usage

Describe the system, process, or concept in plain English. If the description is vague, ask ONE clarifying question maximum — then diagram. Label ALL nodes and arrows clearly. Group related components visually.