| name | dev.mermaid |
| description | Generate Mermaid diagrams with proper syntax. Use when creating flowcharts, sequence diagrams, class diagrams, or any other Mermaid visualizations. Ensures correct label quoting to prevent parsing errors. |
Dev Mermaid
Overview
This skill provides syntax guidelines for generating valid Mermaid diagrams. Mermaid is a diagramming language that renders text into diagrams, but it's strict about parsing—improper syntax causes rendering failures.
Syntax Rules
When generating Mermaid:
Always wrap node labels in double quotes if they contain any of the following:
- Parentheses
() - Commas
, - Arrows like
->,=>,→ - Function-like text (e.g.
foo(a, b)) - Operators or symbols (
+,-,_in method names combined with punctuation)
- Parentheses
Use this pattern:
A["label text here"]not:
A[label text here]<br/>is allowed inside quoted labels.Decision nodes
{}may remain unquoted only if they contain simple words (e.g.{dryRun?}).If unsure whether a label is safe, quote it anyway — quoted labels always parse correctly.
Never rely on Mermaid to "guess" intent; Mermaid is a grammar parser, not markdown.
Mental Model (Important)
Mermaid is not Markdown. It is closer to a programming language. If something looks like code, Mermaid will try to parse it as code.
Quoting labels opts out of that behavior.