Generate architecture diagrams as .excalidraw files from codebase analysis, with optional PNG/SVG export. Use when the user asks to create architecture diagrams, system diagrams, visualize codebase structure, generate excalidraw files, export excalidraw diagrams to PNG or SVG, or convert .excalidraw files to image formats.
Generate architecture diagrams as .excalidraw files from codebase analysis, with optional PNG/SVG export. Use when the user asks to create architecture diagrams, system diagrams, visualize codebase structure, generate excalidraw files, export excalidraw diagrams to PNG or SVG, or convert .excalidraw files to image formats.
Excalidraw Diagram Generator
Generate architecture diagrams as .excalidraw files directly from codebase analysis, with optional export to PNG and SVG.
Quick Start
User just asks:
"Generate an architecture diagram for this project"
"Create an excalidraw diagram of the system"
"Visualize this codebase as an excalidraw file"
Claude Code will:
Analyze the codebase (any language/framework)
Identify components, services, databases, APIs
Map relationships and data flows
Generate valid .excalidraw JSON with dynamic IDs and labels
Optionally export to PNG and/or SVG using Playwright
No prerequisites: Works without existing diagrams, Terraform, or specific file types.
Critical Rules
1. NEVER Use Diamond Shapes
Diamond arrow connections are broken in raw Excalidraw JSON. Use styled rectangles instead:
Semantic Meaning
Rectangle Style
Orchestrator/Hub
Coral (#ffa8a8/#c92a2a) + strokeWidth: 3
Decision Point
Orange (#ffd8a8/#e8590c) + dashed stroke
2. Labels Require TWO Elements
The label property does NOT work in raw JSON. Every labeled shape needs:
// 1. Shape with boundElements reference{"id":"my-box","type":"rectangle","boundElements":[{"type":"text","id":"my-box-text"}]}// 2. Separate text element with containerId{"id":"my-box-text","type":"text","containerId":"my-box","text":"My Label"}
Special thanks to ooiyeefei for their generous open-source contributions, which helped shape this skill collection.
Adapted by webconsulting.at for this skill collection
