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

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:

   ```
   A["label text here"]
   ```

   not:

   ```
   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.