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:

1. •

   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)
2. •

   Use this pattern:

   code

   A["label text here"]
   

   not:

   code

   A[label text here]
   

3. •

   <br/> is allowed inside quoted labels.

4. •

   Decision nodes {} may remain unquoted only if they contain simple words (e.g. {dryRun?}).

5. •

   If unsure whether a label is safe, quote it anyway — quoted labels always parse correctly.

6. •

   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.