{"slug":"diagram-generator","title":"diagram-generator","tags":["site-building","frontend","visual","diagrams"],"agent_summary":"Convert any system, process, or concept description to Excalidraw JSON, SVG, or ASCII diagrams. Handles flowcharts, architecture diagrams, sequence diagrams, org charts, timelines, and mind maps.","trigger_phrases":["diagram-generator","generate diagram","architecture diagram","workflow diagram","org chart","flowchart","sequence diagram","create diagram"],"runnable":true,"markdown":"**Trigger:** Use when \"generate diagram\", \"architecture diagram\", \"workflow diagram\", \"org chart\", \"flowchart\". Outputs Excalidraw JSON, SVG, or ASCII.\n\n### Diagram Types\n\n| Type | Direction | When to Use |\n|---|---|---|\n| Flowchart | Top-to-bottom | Decision processes, workflows |\n| Architecture | Left-to-right (layered) | System components, infrastructure |\n| Sequence | Top-to-bottom | API calls, user flows, time-ordered events |\n| Org Chart | Top-to-bottom | Team structures, reporting lines |\n| ER Diagram | Left-to-right | Database tables and relationships |\n| Data Flow | Left-to-right | Data pipelines, transformations |\n| Mind Map | Radial from center | Topic exploration, brainstorming |\n| Timeline | Left-to-right | Project milestones, history |\n| State Machine | Left-to-right | UI states, system states |\n\n### Process\n\n1. **Determine**: Diagram type, complexity (simple/medium/complex), key elements, layout direction\n2. **Plan**: List all nodes/elements, map connections, determine groupings\n3. **Generate**: Excalidraw JSON (primary) or SVG/ASCII (alternatives)\n\n### Excalidraw Element Types\n\n- `rectangle` — boxes/nodes\n- `ellipse` — start/end states, databases\n- `diamond` — decision points\n- `arrow` — connections (with labels)\n- `text` — labels and annotations\n- `line` — grouping boundaries\n\n### Output Options\n\n**Primary — Excalidraw JSON:**\nImport at excalidraw.com. Fully editable. Best for ongoing use.\n\n**Alternative — SVG:**\nEmbed directly in web pages. Static but portable.\n\n**Alternative — ASCII:**\nCopy-paste into docs, terminals, or any plain text context.\n\n### Usage\n\nDescribe 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.\n\n---\n","html":"<p><strong>Trigger:</strong> Use when \"generate diagram\", \"architecture diagram\", \"workflow diagram\", \"org chart\", \"flowchart\". Outputs Excalidraw JSON, SVG, or ASCII.</p>\n<h3>Diagram Types</h3>\n<p>| Type | Direction | When to Use |\n|---|---|---|\n| Flowchart | Top-to-bottom | Decision processes, workflows |\n| Architecture | Left-to-right (layered) | System components, infrastructure |\n| Sequence | Top-to-bottom | API calls, user flows, time-ordered events |\n| Org Chart | Top-to-bottom | Team structures, reporting lines |\n| ER Diagram | Left-to-right | Database tables and relationships |\n| Data Flow | Left-to-right | Data pipelines, transformations |\n| Mind Map | Radial from center | Topic exploration, brainstorming |\n| Timeline | Left-to-right | Project milestones, history |\n| State Machine | Left-to-right | UI states, system states |</p>\n<h3>Process</h3>\n<ol>\n<li><strong>Determine</strong>: Diagram type, complexity (simple/medium/complex), key elements, layout direction</li>\n<li><strong>Plan</strong>: List all nodes/elements, map connections, determine groupings</li>\n<li><strong>Generate</strong>: Excalidraw JSON (primary) or SVG/ASCII (alternatives)</li>\n</ol>\n<h3>Excalidraw Element Types</h3>\n<ul>\n<li><code>rectangle</code> — boxes/nodes</li>\n<li><code>ellipse</code> — start/end states, databases</li>\n<li><code>diamond</code> — decision points</li>\n<li><code>arrow</code> — connections (with labels)</li>\n<li><code>text</code> — labels and annotations</li>\n<li><code>line</code> — grouping boundaries</li>\n</ul>\n<h3>Output Options</h3>\n<p><strong>Primary — Excalidraw JSON:</strong>\nImport at excalidraw.com. Fully editable. Best for ongoing use.</p>\n<p><strong>Alternative — SVG:</strong>\nEmbed directly in web pages. Static but portable.</p>\n<p><strong>Alternative — ASCII:</strong>\nCopy-paste into docs, terminals, or any plain text context.</p>\n<h3>Usage</h3>\n<p>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.</p>\n<hr>\n"}