Mermaid Diagram Style Guide

Mermaid diagrams should be readable, consistent, and robust.

Rules

  • Use line breaks \n inside labels instead of <br/>.
  • Keep labels short and avoid quotes in node titles when possible.
  • Prefer flowchart or graph for flows; classDiagram for shapes; sequenceDiagram for interactions.
  • Avoid per diagram themes. The docs apply a global high contrast theme and hide glows.
  • If a diagram fails to render, the code is shown as fallback. Keep code minimal and clear.

Examples

flowchart TD
  A[Ask question] --> B{Mode}
  B -- Light --> L[Fast answer]
  B -- Verified --> V[Proof first]
  B -- Audit --> U[Signed receipt]

flowchart TD
  A[Ask question] --> B{Mode}
  B -- Light --> L[Fast answer]
  B -- Verified --> V[Proof first]
  B -- Audit --> U[Signed receipt]

classDiagram
  class Artefact {
    id
    source_url
    observed_at
    content_hash
    licence
  }

classDiagram
  class Artefact {
    id
    source_url
    observed_at
    content_hash
    licence
  }

For accessibility and colour, see Accessibility and the ProseCode renderer notes.

Table of Contents