Mermaid Studio
Expert Mermaid diagram creation, validation, and rendering with dual-engine output...
Install
npx skills add tech-leads-club/agent-skills --skill mermaid-studio -g -a claude-code -y- Repository
- tech-leads-club/agent-skills7.1k
- Category
- DevOps
- Updated
- 3d ago
- License
- CC-BY-4.0
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
Mermaid Studio
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):
%%{init: {'theme': 'base', 'themeVariables': {
'primaryColor': '#4f46e5', 'primaryTextColor': '#ffffff',
'primaryBorderColor': '#3730a3', 'lineColor': '#94a3b8',
'secondaryColor': '#10b981', 'tertiaryColor': '#f59e0b',
'background': '#ffffff', 'mainBkg': '#f8fafc',
'nodeBorder': '#cbd5e1', 'clusterBkg': '#f1f5f9',
'clusterBorder': '#e2e8f0', 'titleColor': '#1e293b',
'edgeLabelBackground': '#ffffff', 'textColor': '#334155'
}}}%%
⚠️ 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).
