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
Design System
Color Palette
Semantic colors for component categories:
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:
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:
Arrowhead marker (standard):
Arrowhead marker (colored) — create per-color as needed:
Open arrowhead (for async/return messages):
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:
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):
Decision diamond (flowchart):
Database cylinder:
Region boundary:
Security group:
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 data flow. Group related services in region boundaries. Use buses/connectors between layers. Place databases at the bottom or right.
Flowcharts
→ Read {baseDir}/references/flowchart.md
Key points: top-to-bottom primary flow. Diamonds for decisions with Yes/No labels on exit arrows. Rounded rectangles for start/end. Use the Highlight color for the happy path.
Sequence Diagrams
→ Read {baseDir}/references/sequence.md
Key points: actors as boxes at top, vertical dashed lifelines, horizontal arrows for messages (solid=sync, dashed=return). Time flows downward. Activation bars show processing. Number messages if complex.
Structural Diagrams
→ Read {baseDir}/references/structural.md
Key points: compartmented boxes (name / attributes / methods for class diagrams). Relationship lines: solid with filled diamond=composition, solid with empty diamond=aggregation, dashed arrow=dependency, solid triangle=inheritance.
Mind Maps
Free-form radiating layout from a central concept. Use organic curves (<path> with cubic beziers) for branches. Vary branch colors using the palette. Larger font for central node, decreasing as you go outward.
Timelines
Horizontal or vertical axis line. Event markers as circles or diamonds on the axis. Description text offset to alternating sides to avoid overlap. Use color to categorize event types.
State Machines
Rounded-rect states with double-border for composite states. Filled circle for initial state, bullseye for final state. Curved arrows for self-transitions. Label all transitions with event [guard] / action format.
Output Rules
- Output a single
.svgfile — no external dependencies except the Google Fonts import - Set
viewBoxto fit all content with 30px padding; do NOT set fixedwidth/heightattributes (let the SVG scale responsively) - Include
xmlns="http://www.w3.org/2000/svg"on the root<svg>element - Put all
<style>,<defs>, markers, and patterns at the top of the SVG - Use
text-anchor="middle"for centered labels; ensure text doesn't overflow boxes - Chinese text support: When labels contain Chinese characters, use
font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif'and increase box widths — CJK characters are wider - Save location: If the input is a file, save to
{inputFileDir}/diagram/. Otherwise save to{projectDir}/diagram/{topic-slug}/. Create the directory if it doesn't exist
Script
Determine this SKILL.md file's directory path as {baseDir}. Script path: {baseDir}/scripts/main.ts.
Resolve ${BUN_X} runtime: if bun installed → bun; if npx available → npx -y bun; else suggest installing bun.
SVG → @2x PNG
After saving the SVG, convert it to a @2x PNG:
Options:
-s, --scale <n>— Scale factor (default: 2)-o, --output <path>— Custom output path (default:<input>@2x.png)--json— JSON output
Process
- Identify the diagram type from the user's request
- Read the relevant reference file if one exists for that type
- Plan the layout: list all components, determine grouping and flow direction, calculate positions
- Write the SVG following the layering order above
- Verify spacing rules — no overlaps, legends outside boundaries, viewBox large enough
- Save the SVG file
- Run
${BUN_X} {baseDir}/scripts/main.ts <svg-path>to generate @2x PNG - Present both files to the user
