mermaid-studio
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 "me
npx skills add tech-leads-club/agent-skills --skill mermaid-studio --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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:*
- Golden Rules — Elegant Diagrams by Default
- Rule 1: Always Use an Init Directive for Professional Styling
- Rule 2: Soft Lines, Never Harsh Black
- Rule 3: Limit Density — Breathe
- Rule 4: Meaningful Labels and Consistent Style
- Rule 5: Color Harmony Over Color Variety
- Modes of Operation
- Step 1: Understand the Request
- Diagram Type Decision Matrix
- When to Load References
- Step 2: Create the Diagram
- 2.1 — Write Mermaid Code
- 2.2 — Structure Rules
- 2.3 — Quick Reference Examples
node $SKILL_DIR/scripts/validate.mjs <file.mmd> bash $SKILL_DIR/scripts/setup.sh SVG (default — best quality) node $SKILL_DIR/scripts/render.mjs -i diagram.mmd -o diagram.svg PNG (for documents/presentations) node $SKILL_DIR/scripts/render.mjs -i diagram.mmd -o diagram.png --width 1200 ASCII (for terminals/READMEs) node $SKILL_DIR/scripts/render-ascii.mjs -i diagram.mmd With icon packs (architecture-beta with AWS/tech icons) node $SKILL_DIR/scripts/render.mjs -i diagram.mmd -o diagram.svg --icons logos,fa
What does the mermaid-studio skill do?
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 "me
How do I install it?
Run `npx skills add tech-leads-club/agent-skills --skill mermaid-studio --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From tech-leads-club/agent-skills, a repository with 4,983 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.