Mermaid Diagram Rules

Use this skill when writing or editing fenced mermaid blocks. Keep diagrams readable in source and validate syntax before handing work back.

Syntax Rules

• Quote node labels that contain punctuation, brackets, angle brackets, commas, emoji, or HTML: A["Config (optional)"].
• Quote edge labels that contain punctuation or spaces around special terms: A -->|"uses (runtime)"| B.
• Use <br/> for line breaks in labels, not \n.
• Avoid lowercase end as a node label. Use End or quote the label.
• Prefer built-in themes over hardcoded fills. Hardcoded colors often break dark mode.
• If a node id starts with o or x after an edge, add a space so Mermaid does not parse it as a circle or cross edge: A--- oNode.

flowchart LR
  A["Turn 1<br/>user message"] -->|"creates (draft)"| B["Draft artifact"]
  B --> C["Review"]