| name | diagram |
| description | Create beautiful SVG diagrams, architecture diagrams, flow charts, and technical illustrations. Use this skill when the user asks to "create a diagram", "draw a flowchart", "make an architecture diagram", "build a system diagram", "create an illustration", "draw a network diagram", "visualize a process", or mentions diagrams, flowcharts, architecture, system design, or technical illustrations. |
| version | 1.0.0 |
Diagram
Create publication-quality SVG diagrams as standalone HTML files or embeddable SVG snippets. All diagrams are hand-crafted inline SVG — no external libraries.
Interactive Workflow
Before generating, ask the user:
- What are you diagramming? (system architecture, user flow, process, network, comparison, timeline)
- Theme preference?
Present theme options:
Light Themes
- Blueprint — White background, navy lines (#1e3a5f), blue accent fills. Technical/engineering.
- Warm Paper — Cream background (#efedea), dark ink, red accents. Editorial/clean.
- Whiteboard — Pure white, black lines, colorful sticky-note fills. Casual/workshop.
Dark Themes
- Neon — Dark background (#0f172a), glowing colored strokes, no fills. Futuristic/tech.
- Chalk — Dark gray (#2d2d2d), white/pastel strokes, hand-drawn feel. Presentation-ready.
- Output format? (standalone HTML page, or raw SVG to embed in another file)
Architecture
Standalone HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Diagram Title</title>
<style>
body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
svg { max-width: 95vw; max-height: 95vh; }
</style>
</head>
<body>
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
</svg>
</body>
</html>
Embeddable SVG
Pure <svg> element that can be pasted into any HTML file, Reveal.js slide, or document.
Design Principles
Visual Hierarchy
- Primary elements (main services, key nodes): larger, filled, bold labels
- Secondary elements (supporting services, connections): smaller, outlined, lighter labels
- Connectors: thin strokes (1.5-2px), muted colors, optional arrowheads
- Labels: monospace font for technical terms, sans-serif for descriptions
Color System
Use 4-6 colors maximum. Define as SVG <defs> for reuse:
<defs>
<style>
.node-primary { fill: #e63946; stroke: none; }
.node-secondary { fill: #0891b2; stroke: none; }
.node-neutral { fill: #f0f0f0; stroke: #ccc; stroke-width: 1.5; }
.connector { stroke: #999; stroke-width: 1.5; fill: none; }
.label { font-family: 'Space Grotesk', sans-serif; fill: #1a1a1a; }
.label-mono { font-family: 'JetBrains Mono', monospace; fill: #666; font-size: 12px; }
</style>
</defs>
Spacing and Alignment
- Consistent gaps between elements (use multiples of 8px: 16, 24, 32, 48)
- Align nodes to an invisible grid
- Equal spacing between parallel connectors
- Generous padding inside containers (24-32px)
Connectors
- Prefer straight lines with right-angle bends over curved paths
- Use
marker-end for arrowheads:
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5"
markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
</marker>
</defs>
<line x1="100" y1="200" x2="300" y2="200" class="connector" marker-end="url(#arrow)" />
Diagram Types
Flow Chart
- Rounded rectangles for process steps (rx="12")
- Diamonds for decisions (rotated square)
- Arrows connecting steps with labels on branches
- Horizontal flow (left to right) for linear processes
- Vertical flow (top to bottom) for hierarchical processes
Architecture Diagram
- Grouped containers with dashed borders for services/zones
- Solid rounded rectangles for individual components
- Database cylinders for data stores
- Cloud shapes for external services
- Labeled arrows showing data flow direction and protocol (HTTP, gRPC, WebSocket)
Network / Topology
- Circles or rounded squares for nodes
- Lines for connections with optional bandwidth/latency labels
- Grouping boxes for subnets/zones
- Icons inside nodes (simplified SVG icons, not external images)
Comparison / Versus
- Two-column layout with a divider
- Matching rows for feature comparison
- Check/cross icons for yes/no features
- Color-coded (green for positive, red for negative)
Timeline
- Horizontal line with date markers
- Event cards above and below the line (alternating)
- Color-coded by category
- Connecting lines from events to the timeline
Venn Diagram
- Semi-transparent overlapping circles
- Labels in each unique region and intersection
- Use
fill-opacity: 0.15 for overlapping regions
SVG Best Practices
- Set explicit
viewBox (e.g., 0 0 1200 800) — never use width/height attributes
- Use
<g> groups with transform="translate(x,y)" for positioning clusters
- Use
<text> with text-anchor="middle" and dominant-baseline="central" for centered labels
- Use
<defs> for reusable elements (arrowheads, gradients, drop shadows)
- Add subtle
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) on primary nodes
- Keep SVG self-contained — embed fonts via
@import in <style> inside <defs>
Additional Resources
For detailed SVG patterns, consult:
references/svg-patterns.md — Reusable SVG component patterns and templates
