Learn

First Diagram

Three copy-paste-ready examples of the most common diagram types. Each one renders as-is in any Mermaid-enabled environment (GitHub, Astro with remark-mermaid, etc.).

Flowchart: Provisioning Decision

A basic decision flow showing how to choose a sync technology.

Key syntax:

  • flowchart TD sets top-to-bottom direction
  • {...} creates a decision diamond
  • -->|label| adds text to an edge

Sequence Diagram: Cloud Sync Provisioning

A request/response flow showing how Cloud Sync provisions a user.

Key syntax:

  • participant X as Label controls display name and ordering
  • ->> for synchronous calls, -->> for responses
  • Each line is one arrow; keep the flow top-to-bottom

Service Topology: Hybrid Identity

A service-and-boundary diagram showing where components live. Uses subgraph to define boundaries.

Note: Mermaid has an architecture-beta diagram type for this, but it has limited renderer support. Use flowchart with subgraph instead.

Key syntax:

  • subgraph name["Label"] defines a boundary, closed with end
  • Nodes inside a subgraph are visually grouped
  • --> connects nodes across subgraph boundaries

Tips for Getting Started

  1. Start with the smallest example that compiles
  2. Add one feature at a time (a node, an edge, a label)
  3. If it breaks, back up to the last working version and re-add carefully
  4. Check Gotchas when something renders wrong