Mermaid Studio

This is a comprehensive Mermaid diagramming tool that handles the full workflow from creation to rendering. It supports all 20+ diagram types (flowcharts, C4 architecture, AWS infrastructure with service icons, ERD, sequence, state diagrams, and more) and outputs to SVG, PNG, or ASCII. The skill shines in its opinionated approach to diagram quality, enforcing professional styling rules like soft line colors and curated color palettes instead of harsh defaults. It includes code-to-diagram analysis, syntax validation, and comes with detailed reference docs for C4 patterns and AWS architecture. The "Golden Rules" section is genuinely useful, particularly the warning about font rendering in headless Chrome. Reach for this when you need production-ready diagrams, not just quick sketches.

skills.sh installs: 335
GitHub stars: 7.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tech-leads-club/agent-skills --skill mermaid-studio --agent claude-code

Installs into .claude/skills of the current project.

Files

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):

SKILL.md on GitHub