Expert Mermaid diagram creation, validation, and rendering with dual-engine output (SVG/PNG/ASCII). Supports all 20+ diagram types including C4 architecture, AWS architecture-beta with service icons, flowcharts, sequence, ERD, state, class, mindmap, timeline, git graph, sankey, and more. Features code-to-diagram analysis, batch rendering, 15+ themes, and syntax validation. Use when users ask to create diagrams, visualize architecture, render mermaid files, generate ASCII diagrams, document system flows, model databases, draw AWS infrastructure, analyze code structure, or anything involving "mermaid", "diagram", "flowchart", "architecture diagram", "sequence diagram", "ERD", "C4", "ASCII diagram". Do NOT use for non-Mermaid image generation, data plotting with chart libraries, or general documentation writing.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Expert Mermaid diagram creation, validation, and rendering with dual-engine output (SVG/PNG/ASCII). Supports all 20+ diagram types including C4 architecture, AWS architecture-beta with service icons, flowcharts, sequence, ERD, state, class, mindmap, timeline, git graph, sankey, and more. Features code-to-diagram analysis, batch rendering, 15+ themes, and syntax validation. Use when users ask to create diagrams, visualize architecture, render mermaid files, generate ASCII diagrams, document system flows, model databases, draw AWS infrastructure, analyze code structure, or anything involving "mermaid", "diagram", "flowchart", "architecture diagram", "sequence diagram", "ERD", "C4", "ASCII diagram". Do NOT use for non-Mermaid image generation, data plotting with chart libraries, or general documentation writing.
Expert-level Mermaid diagram creation, validation, and multi-format rendering. Creates diagrams from descriptions or code analysis, validates syntax, and renders to SVG, PNG, or ASCII with professional theming.
Golden Rules โ Elegant Diagrams by Default
Every diagram MUST follow these principles. They are not optional โ they define the difference between a mediocre diagram and a gold-standard one.
Rule 1: Always Use an Init Directive for Professional Styling
NEVER create a diagram without an %%{init} directive or frontmatter config. The default Mermaid theme produces harsh black lines and generic colors. Always apply a curated palette.
For general diagrams (flowchart, sequence, state, class, ERD):
โ ๏ธ Font Warning: Do NOT set fontFamily in theme variables. The Mermaid default font (trebuchet ms, verdana, arial, sans-serif) works everywhere. Setting system-ui, Segoe UI, or -apple-system will render as Times New Roman in headless Chromium (used by mmdc).
For C4 diagrams โ see the dedicated C4 styling section below.
For architecture-beta diagrams โ see the dedicated AWS/Architecture section below.
Rule 2: Soft Lines, Never Harsh Black
The single biggest visual improvement is using lineColor: '#94a3b8' (slate-400) instead of the default black. This creates a modern, breathable diagram. For dark themes, use lineColor: '#64748b' (slate-500).
Rule 3: Limit Density โ Breathe
Maximum 15 nodes per diagram (not 20 โ fewer is more elegant)
Use subgraph or boundaries to create whitespace and visual grouping
Prefer LR (left-right) for process flows โ it reads more naturally
Use invisible links (A ~~~ B) to add spacing when the layout is cramped
Rule 4: Meaningful Labels and Consistent Style
Node IDs: camelCase (orderService, not s1 or os)
Labels: short, clear natural language ([Order Service])
Arrows: action verbs with protocol info ("Sends order via gRPC")
Descriptions: one-line, role-focused ("Handles order lifecycle")
Rule 5: Color Harmony Over Color Variety
Use max 3-4 colors per diagram. Map colors to meaning:
Blue tones (#4f46e5, #3b82f6) โ primary systems, internal services
Green tones (#10b981, #059669) โ success states, data stores
CRITICAL: The %%{init} directive MUST go on the very first non-comment line, BEFORE the diagram type declaration. Alternatively, use YAML frontmatter at the absolute start of the file.
Naming conventions:
Node IDs: camelCase, descriptive (orderService, not s1)
Labels: natural language in brackets ([Order Service])
Relationships: action verbs ("Sends order to", "Reads from")
Layout best practices:
TD (top-down) for hierarchical flows and processes
LR (left-right) for timelines, pipelines, and sequential processes
RL for right-to-left reading contexts
Use subgraph to group related nodes; name subgraphs meaningfully
Add direction inside subgraphs when needed for different flow
architecture-beta
group vpc(logos:aws-vpc)[VPC]
service api(logos:aws-api-gateway)[API Gateway] in vpc
service lambda(logos:aws-lambda)[Lambda] in vpc
service db(logos:aws-dynamodb)[DynamoDB] in vpc
service s3(logos:aws-s3)[S3 Bucket]
api:R --> L:lambda
lambda:R --> L:db
lambda:B --> T:s3
IMPORTANT: Architecture-beta diagrams with logos:* icons require icon pack registration. When rendering with the render script, use the --icons logos flag. If rendering in a markdown viewer that doesn't support icon packs, use the built-in icons (cloud, database, disk, server, internet) as fallback. Read references/aws-architecture.md for the complete icon catalog and rendering instructions.
For comprehensive syntax of ALL diagram types, read references/diagram-types.md.
C4 Diagrams โ Mandatory Styling Guide
C4 diagrams have fixed element styling (blue boxes for systems, gray for persons, etc.), but their relationship lines default to harsh black which creates visual noise. You MUST apply these styling rules:
The C4 Styling Pattern
Every C4 diagram MUST include these directives at the end:
%% === MANDATORY STYLING ===
%% Apply soft line colors to ALL relationships
UpdateRelStyle(fromAlias, toAlias, $textColor="#475569", $lineColor="#94a3b8")
%% Repeat for each Rel() in the diagram
%% Optimize layout spacing
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
C4 Color Values Reference
Purpose
Color
Hex
Notes
Soft line color
Slate-400
#94a3b8
Replaces harsh default black
Line text color
Slate-600
#475569
Readable but not dominant
Accent line
Blue-400
#60a5fa
For highlighted or primary relationships
Warning line
Amber-500
#f59e0b
For external/risky connections
Custom element bg
Emerald
#10b981
For data stores or success highlights
Custom element bg
Indigo
#4f46e5
For primary system emphasis
C4 Layout Tips
CRITICAL โ Maximum 6 Rel() per diagram. More than 6 relationships causes Dagre to route arrows through nodes, creating unreadable spaghetti. If your system needs more connections, split it into multiple focused diagrams.
Use $c4ShapeInRow="3" for most diagrams (prevents horizontal crowding)
Use $c4ShapeInRow="2" for diagrams with long labels
Use $c4BoundaryInRow="1" always (stacks boundaries vertically for clarity)
Apply $offsetY="-10" to UpdateRelStyle when labels overlap with elements
Prefer tree-shaped topologies (1 in, 1-2 out per node) over mesh topologies
Declare elements in flow order โ the order of Container() declarations affects layout
Use directional Rel_D, Rel_R, etc. only as a last resort when auto-layout creates overlapping
For comprehensive C4 syntax, examples, and patterns, read references/c4-architecture.md.
Step 3: Validate
Before rendering, ALWAYS validate the Mermaid syntax:
node $SKILL_DIR/scripts/validate.mjs <file.mmd>
If validation fails:
Read the error message carefully
Consult references/troubleshooting.md for common fixes
Fix the syntax and re-validate
Maximum 3 fix attempts before asking the user for clarification
Step 4: Render
4.1 โ Setup (First Run Only)
bash $SKILL_DIR/scripts/setup.sh
This auto-installs both rendering engines and icon pack dependencies. Run once per environment.
mermaid-cli native (5):default | forest | dark | neutral | base
Custom theme: --theme base --config '{"theme":"base","themeVariables":{"primaryColor":"#4f46e5","lineColor":"#94a3b8"}}'
For the full theme catalog, read references/themes.md. The render script auto-selects the best engine (mmdc primary, beautiful-mermaid fallback, Puppeteer for icon packs).
Step 5: Code-to-Diagram (When Requested)
When the user asks to visualize existing code or architecture:
Read references/code-to-diagram.md for the analysis methodology
Analyze the codebase to identify the right diagram type:
Module dependencies โ Flowchart or Class diagram
API routes and handlers โ Sequence diagram
Database models/schemas โ ERD
Service architecture โ C4 Container or Architecture diagram
State machines in code โ State diagram
Generate the .mmd file with proper init directives (Golden Rule 1)
Validate and render as usual
Troubleshooting Quick Reference
Symptom
Likely Cause
Fix
Diagram won't render
Syntax error
Run validate.mjs, check brackets/quotes
Labels cut off
Text too long
Shorten labels or use line breaks <br/>
Layout looks wrong
Wrong direction
Try different TD/LR/BT/RL
Nodes overlap
Too many nodes
Split into subgraphs or multiple diagrams
Lines too dark/thick
No init directive
Add %%{init} with lineColor: '#94a3b8'
C4 lines overlapping
No styling applied
Add UpdateRelStyle with offsets to each Rel
AWS icons not showing
No icon pack
Use --icons logos flag or fallback to built-in icons
mmdc not found
Not installed
Run setup.sh
Theme not applied
Wrong engine
beautiful-mermaid themes only work with that engine
For comprehensive troubleshooting, read references/troubleshooting.md.
