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

Architecture: Hybrid Identity Topology

A service-and-boundary diagram showing where components live.

architecture-beta
    group onprem(server)[On-Premises Network]
    group azure(cloud)[Azure]

    service ad(server)[Active Directory] in onprem
    service agent(server)[Cloud Sync Agent] in onprem
    service entra(cloud)[Entra ID] in azure
    service apps(internet)[SaaS Apps] in azure

    ad:R --> L:agent
    agent:R --> L:entra
    entra:R --> L:apps

Key syntax:

group name(icon)[Label] defines a boundary
service name(icon)[Label] in group places a service
name:SIDE --> SIDE:name draws an edge between sides (L/R/T/B)

Tips for Getting Started

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