Mermaid Diagrams

Mermaid is a text-based diagramming language that renders flowcharts, sequence diagrams, architecture diagrams, and more from Markdown-style syntax. This reference covers the diagram types, minimal patterns, and parser gotchas most relevant to writing technical documentation.

Overview

• What it is: A JavaScript library that turns text definitions into SVG diagrams, supported natively in GitHub Markdown and most docs platforms
• Why it matters: Diagrams stay in version control as text, diff cleanly, and update without external tools
• Scope: This topic focuses on the three diagram types used most in this project: flowchart, sequence, and architecture-beta

Contents

• Concepts - Diagram type selection and when to use each
  • Diagram Types - Which diagram type fits which scenario
• Quickstart - Minimal copy-paste examples
  • First Diagram - Working examples of flowchart, sequence, and architecture-beta
• Notes - Parser traps and syntax gotchas
  • Gotchas - Common mistakes and how to avoid them

Resources

• Mermaid syntax reference
• Mermaid flowcharts
• Mermaid sequence diagrams
• Mermaid architecture diagrams