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.

flowchart TD
    A[New hybrid identity project] --> B{Need device writeback?}
    B -->|Yes| C[Use Connect Sync]
    B -->|No| D{Need Exchange hybrid?}
    D -->|Yes| C
    D -->|No| E[Use Cloud Sync]

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.

sequenceDiagram
    participant AD as On-Prem AD
    participant Agent as Provisioning Agent
    participant Entra as Entra ID

    AD->>Agent: Change detected
    Agent->>Entra: Export change
    Entra-->>Agent: Accepted
    Agent-->>AD: Confirm sync

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.

flowchart LR
    subgraph onprem["On-Premises Network"]
        ad[Active Directory]
        agent[Cloud Sync Agent]
    end

    subgraph azure["Azure"]
        entra[Entra ID]
        apps[SaaS Apps]
    end

    ad --> agent
    agent --> entra
    entra --> apps

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