mermaid-studiolisted
Install: claude install-skill oiagorodrigues/qcontabil
# 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 — s