Diagram Generator
Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts.
Supported Diagram Types
| Type | When to Use | Key Characteristics | |------|-------------|-------------------| | Architecture | System components & relationships | Grouped boxes, connection arrows, region boundaries | | Flowchart | Decision logic, process steps | Diamond decisions, rounded step boxes, directional flow | | Sequence | Time-ordered interactions between actors | Vertical lifelines, horizontal messages, activation bars | | Structural | Class diagrams, ER diagrams, org charts | Compartmented boxes, typed relationships (inheritance, composition) | | Mind Map | Brainstorming, topic exploration | Central node, radiating branches, organic layout | | Timeline | Chronological events | Horizontal/vertical axis, event markers, period spans | | Illustrative | Conceptual explanations, comparisons | Free-form layout, icons, annotations, visual metaphors | | State Machine | State transitions, lifecycle | Rounded state nodes, labeled transitions, start/end markers | | Data Flow | Data transformation pipelines | Process bubbles, data stores, external entities |
Design System
Color Palette
Semantic colors for component categories:
| Category | Fill (rgba) | Stroke | Use For | |----------|-------------|--------|---------| | Primary | rgba(8, 51, 68, 0.4) | #22d3ee (cyan) | Frontend, user-facing, inputs | | Secondary | rgba(6, 78, 59, 0.4) | #34d399 (emerald) | Backend, services, processing | | Tertiary | rgba(76, 29, 149, 0.4) | #a78bfa (violet) | Database, storage, persistence | | Accent | rgba(120, 53, 15, 0.3) | #fbbf24 (amber) | Cloud, infrastructure, regions | | Alert | rgba(136, 19, 55, 0.4) | #fb7185 (rose) | Security, errors, warnings | | Connector | rgba(251, 146, 60, 0.3) | #fb923c (orange) | Buses, queues, middleware | | Neutral | rgba(30, 41, 59, 0.5) | #94a3b8 (slate) | External, generic, unknown | | Highlight | rgba(59, 130, 246, 0.3) | #60a5fa (blue) | Active state, focus, current step |
For flowcharts and sequence diagrams, assign colors by role (actor, decision, process) rather than by technology.
Typography
Use embedded SVG @font-face or system monospace fallback:
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>Font sizes by role:
- Title: 16px, weight 700
- Component name: 11-12px, weight 600
- Sublabel / description: 9px, weight 400, color
#94a3b8 - Annotation / note: 8px, weight 400
- Tiny label (on arrows): 7-8px
Core Visual Elements
Background: #0f172a (slate-900) with subtle grid:
<defs>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>Arrowhead marker (standard):
<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>Arrowhead marker (colored) — create per-color as needed:
<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>Open arrowhead (for async/return messages):
<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>SVG Structure & Layering
Draw elements in this order to get correct z-ordering (SVG paints back-to-front):
- Background fill + grid pattern
- Region/group boundaries (dashed outlines)
- Connection arrows and lines
- Opaque masking rects (same position as component boxes,
fill="#0f172a") - Component boxes (semi-transparent fill + stroke)
- Text labels
- Legend (bottom-right or bottom area, outside all boundaries)
- Title block (top-left)
The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:
<!-- Mask layer: opaque background to hide arrows -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- Visual layer: styled component -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor="middle">Kong / Nginx</text>Spacing Rules
These prevent overlapping — follow them strictly:
- Component box height: 50-70px (standard), 80-120px (large/complex)
- Minimum gap between components: 40px vertical, 30px horizontal
- Arrow label clearance: 10px from any box edge
- Region boundary padding: 20px inside edges around contained components
- Legend placement: At least 20px below the lowest diagram element
- Title block: 20px from top-left, outside diagram content area
- viewBox: Always extend to fit all content + 30px padding on all sides
Component Patterns
Standard box (service/process):
<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">Name</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">description</text>Decision diamond (flowchart):
<g transform="translate(CX, CY)">
<polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
<polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
<text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">Condition?</text>
</g>Database cylinder:
<g transform="translate(X, Y)">
<rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
<ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
<ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
<rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
<ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
<ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
<line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
<line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
<text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>Region boundary:
<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">AWS us-east-1</text>Security group:
<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / Security Group</text>Type-Specific Layout Guidance
Determine this SKILL.md file's directory path as {baseDir}. Read the reference file for the specific diagram type before starting layout. Reference files are located at {baseDir}/references/ and contain detailed layout algorithms and examples.
Architecture Diagrams
→ Read {baseDir}/references/architecture.md
Key points: left-to-right or top-to-bottom da