rusty-mermaid Gallery

25 diagram types — 297 diagrams rendered by rusty-mermaid

flowchart (122)
Part 1 [Part 2] Part 3
directions_rl
Right Middle Left
Source (.mmd) 
flowchart RL
    A[Right] --> B[Middle] --> C[Left]
disconnected
Island 1a Island 1b Island 2a Island 2b
Source (.mmd) 
graph TD
    A[Island 1a] --> B[Island 1b]
    C[Island 2a] --> D[Island 2b]
edge_bidirectional_all
sync heartbeat replicate Node A Node B Node C Node D Node E Node F Peer 1 Peer 2 Peer 3
Source (.mmd) 
flowchart TD
    A[Node A] <--> B[Node B]
    C[Node C] <-.-> D[Node D]
    E[Node E] <==> F[Node F]
    A <--> C
    B <-.-> D
    C <==> E
    %% With labels
    G[Peer 1] <-->|sync| H[Peer 2]
    H <-.->|heartbeat| I[Peer 3]
    I <==>|replicate| G
edge_circle_cross_ends
data reject sync Hub Circle End Cross End Left Right Left Right Store Dead Letter Peer Peer
Source (.mmd) 
flowchart TD
    A[Hub] --o B[Circle End]
    A --x C[Cross End]
    D[Left] o--o E[Right]
    F[Left] x--x G[Right]
    %% Mixed with labels
    A --o|data| H[Store]
    A --x|reject| I[Dead Letter]
    J[Peer] o--o|sync| K[Peer]
edge_dotted_chain
retry Source Filter Transform Validate Sink
Source (.mmd) 
flowchart LR
    A[Source] -.-> B[Filter]
    B -.-> C[Transform]
    C -.-> D[Validate]
    D -.-> E[Sink]
    E -.->|retry| B
edge_label
label text Source Target
Source (.mmd) 
graph TD
    A[Source] -->|label text| B[Target]
edge_labels
Place order Success Failed Track Refund Notify Notify Order Payment Ship Cancel Delivered Refunded Email
Source (.mmd) 
flowchart TD
    A[Order] -->|Place order| B[Payment]
    B -->|Success| C[Ship]
    B -->|Failed| D[Cancel]
    C -->|Track| E([Delivered])
    D -->|Refund| F([Refunded])
    C -.->|Notify| G[Email]
    D -.->|Notify| G
edge_labels_all
solid label dotted label thick label pipe label dotted pipe thick pipe yes / no count: 42 A1 B1 A2 B2 A3 B3 C1 D1 C2 D2 C3 D3 E1 F1 E2 F2
Source (.mmd) 
flowchart TD
    %% Inline label syntax
    A1 -- solid label --> B1
    A2 -. dotted label .-> B2
    A3 == thick label ==> B3
    %% Pipe label syntax
    C1 -->|pipe label| D1
    C2 -.->|dotted pipe| D2
    C3 ==>|thick pipe| D3
    %% Labels with special chars
    E1 -->|yes / no| F1
    E2 -->|count: 42| F2
edge_lengths
A1 B1 A2 B2 A3 B3 A4 B4 C1 D1 C2 D2 C3 D3 E1 F1 E2 F2 E3 F3
Source (.mmd) 
flowchart TD
    %% Solid: increasing lengths
    A1 --> B1
    A2 ---> B2
    A3 ----> B3
    A4 -----> B4
    %% Dotted: increasing lengths
    C1 -.-> D1
    C2 -..-> D2
    C3 -...-> D3
    %% Thick: increasing lengths
    E1 ==> F1
    E2 ===> F2
    E3 ====> F3
edge_long_labels
This is a very long edge label that should test how the renderer handles text positioning on edges Validates schema, checks auth, applies rate limiting Transforms payload and enriches with metadata High-throughput critical data pipeline Asynchronous callback with retry on failure Start End Input Process Output Source Sink
Source (.mmd) 
flowchart TD
    A[Start] -->|This is a very long edge label that should test how the renderer handles text positioning on edges| B[End]
    C[Input] -->|Validates schema, checks auth, applies rate limiting| D[Process]
    D -->|Transforms payload and enriches with metadata| E[Output]
    E -.->|Asynchronous callback with retry on failure| C
    F[Source] ==>|High-throughput critical data pipeline| G[Sink]
edge_matrix
A1 B1 A2 B2 A3 B3 A4 B4 A5 B5 A6 B6 C1 D1 C2 D2 C3 D3 C4 D4 C5 D5 C6 D6 E1 F1 E2 F2 E3 F3 E4 F4 E5 F5 E6 F6
Source (.mmd) 
flowchart TD
    %% 3 line styles x 3 arrow ends x 2 directions = 18 combos
    %% Solid + single-end arrows
    A1 --> B1
    A2 --o B2
    A3 --x B3
    %% Solid + double-end arrows
    A4 <--> B4
    A5 o--o B5
    A6 x--x B6
    %% Dotted + single-end arrows
    C1 -.-> D1
    C2 -.-o D2
    C3 -.-x D3
    %% Dotted + double-end arrows
    C4 <-.-> D4
    C5 o-.-o D5
    C6 x-.-x D6
    %% Thick + single-end arrows
    E1 ==> F1
    E2 ==o F2
    E3 ==x F3
    %% Thick + double-end arrows
    E4 <==> F4
    E5 o==o F5
    E6 x==x F6
edge_mixed_types
critical path log log Client Gateway Primary Service Fallback Service Database Response Monitor
Source (.mmd) 
flowchart TD
    A[Client] --> B[Gateway]
    B ==> C[Primary Service]
    B -.-> D[Fallback Service]
    C --> E[Database]
    D -.-> E
    E ==>|critical path| F[Response]
    C -.->|log| G[Monitor]
    D -.->|log| G
edge_no_arrows
sibling related Alpha Beta Gamma Delta Epsilon Zeta Eta
Source (.mmd) 
flowchart TD
    A[Alpha] --- B[Beta]
    B --- C[Gamma]
    C --- D[Delta]
    D --- A
    %% Dotted and thick open edges
    E[Epsilon] -.- F[Zeta]
    F === G[Eta]
    G -.- E
    %% Open edges with labels
    A -- sibling --- E
    B -- related --- F
edge_self_loop_multiple
tick check reset retry error State Machine Output Log
Source (.mmd) 
flowchart TD
    A[State Machine] -->|tick| A
    A -.->|check| A
    A ==>|reset| A
    A --> B[Output]
    B --> C[Log]
    C -->|retry| C
    B -->|error| A
edge_styles
Start Step 1 Step 2 Step 3 End
Source (.mmd) 
flowchart LR
    A[Start] --> B[Step 1]
    B --> C[Step 2]
    C --> D[Step 3]
    D --> E[End]

    linkStyle 0 stroke:#ff0000,stroke-width:3px
    linkStyle 1 stroke:#00aa00,stroke-width:2px
    linkStyle 2 stroke:#0000ff,stroke-width:2px,stroke-dasharray:5
    linkStyle 3 stroke:#ff9900,stroke-width:4px
edge_thick_chain
response response Ingress Load Balancer App Server Database
Source (.mmd) 
flowchart LR
    A[Ingress] ==> B[Load Balancer]
    B ==> C[App Server]
    C ==> D[Database]
    D ==>|response| C
    C ==>|response| A
hello
Yes No Start Decision OK Not OK
Source (.mmd) 
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[OK]
    B -->|No| D[Not OK]
html_labels
Bold Title Line 1 Line 2 Line 3 Italic and Bold monospace Mixed italic line bold line
Source (.mmd) 
graph TD
    A["<b>Bold Title</b>"] --> B["Line 1<br/>Line 2<br/>Line 3"]
    B --> C["<i>Italic</i> and <b>Bold</b>"]
    C --> D["<code>monospace</code>"]
    D --> E["Mixed<br/><i>italic line</i><br/><b>bold line</b>"]
implicit_nodes
A B C D
Source (.mmd) 
flowchart TD
    A --> B
    B --> C
    C --> D
    D --> A
layout_binary_tree
Root L1 R1 L2 R2 L3 R3 L4 R4 L5 R5 L6 R6 L7 R7
Source (.mmd) 
flowchart TD
    R[Root] --> L1[L1]
    R --> R1[R1]
    L1 --> L2[L2]
    L1 --> R2[R2]
    R1 --> L3[L3]
    R1 --> R3[R3]
    L2 --> L4[L4]
    L2 --> R4[R4]
    R2 --> L5[L5]
    R2 --> R5[R5]
    L3 --> L6[L6]
    L3 --> R6[R6]
    R3 --> L7[L7]
    R3 --> R7[R7]
layout_cross_subgraph_edges
Group Alpha Group Gamma Group Beta Alpha 1 Alpha 2 Beta 1 Beta 2 Gamma 1 Gamma 2
Source (.mmd) 
flowchart TD
    subgraph sg1[Group Alpha]
        A1[Alpha 1] --> A2[Alpha 2]
    end
    subgraph sg2[Group Beta]
        B1[Beta 1] --> B2[Beta 2]
    end
    subgraph sg3[Group Gamma]
        C1[Gamma 1] --> C2[Gamma 2]
    end
    A1 --> B1
    A2 --> C1
    B2 --> C2
    C2 --> A1
layout_deep_nesting
Level 1 Level 2 Level 3 Deepest Node Level 3 Node Level 2 Node Level 1 Node Outside
Source (.mmd) 
flowchart TD
    subgraph L1[Level 1]
        subgraph L2[Level 2]
            subgraph L3[Level 3]
                subgraph L4[Level 4]
                    X[Deepest Node]
                end
                Y[Level 3 Node] --> X
            end
            Z[Level 2 Node] --> Y
        end
        W[Level 1 Node] --> Z
    end
    V[Outside] --> W
layout_parallel_chains
Chain C Chain A Chain B A1 A2 A3 A4 B1 B2 B3 B4 C1 C2 C3 C4
Source (.mmd) 
flowchart TD
    subgraph chain1[Chain A]
        A1[A1] --> A2[A2] --> A3[A3] --> A4[A4]
    end
    subgraph chain2[Chain B]
        B1[B1] --> B2[B2] --> B3[B3] --> B4[B4]
    end
    subgraph chain3[Chain C]
        C1[C1] --> C2[C2] --> C3[C3] --> C4[C4]
    end
layout_two_nodes_no_edge
Lonely Left Lonely Right
Source (.mmd) 
flowchart TD
    A[Lonely Left]
    B[Lonely Right]
linear_3
Start Middle End
Source (.mmd) 
graph TD
    A[Start] --> B[Middle] --> C[End]
linear_bt
Bottom Top
Source (.mmd) 
graph BT
    A[Bottom] --> B[Top]
linear_lr
Start Middle End
Source (.mmd) 
graph LR
    A[Start] --> B[Middle] --> C[End]
linear_rl
Right Left
Source (.mmd) 
graph RL
    A[Right] --> B[Left]
long_edge
Top Mid 1 Bottom Mid 2
Source (.mmd) 
graph TD
    A[Top] --> B[Mid 1]
    A --> D[Bottom]
    B --> C[Mid 2]
    C --> D
long_edges
Start Step 1 Step 2 Step 3 Step 4
Source (.mmd) 
flowchart TD
    A[Start] --> B[Step 1]
    B --> C[Step 2]
    C --> D[Step 3]
    A ---> D
    A ----> E[Step 4]
    D --> E
markdown_labels
Bold Label Italic Label Bold and Italic Normal Label Mixed bold and italic text
Source (.mmd) 
flowchart TD
    A["**Bold Label**"] --> B["*Italic Label*"]
    B --> C["***Bold and Italic***"]
    C --> D["Normal Label"]
    D --> E["Mixed **bold** and *italic* text"]
mcp_server
Undertow HTTP Server Infrastructure Client Layer MCP Layer "/health/ " "/metrics" "/mcp" HTTPS Virtual Thread Dispatch CorsHandler TracingHandler OTel spans + correlation ID RoutingHandler HealthHandler live / ready / started MetricsHandler Prometheus format UndertowMcpTransport POST: JSON-RPC GET: SSE stream DELETE: session cleanup MCP Java SDK McpSyncServer WeatherTools getCurrentWeather getForecast searchLocations WeatherApiClient Failsafe retry + circuit breaker Apache HttpClient 5 connection pooling Main.java composition root ConfigLoader → Config config.toml + .env + env vars Telemetry OTel SDK (real or noop) GracefulShutdown LIFO hooks, timeout CorrelationId ScopedValue + MDC External APIs weatherapi.com
Source (.mmd) 
graph TB
    subgraph Undertow HTTP Server
        VT["Virtual Thread Dispatch"]
        VT --> CORS["CorsHandler"]
        CORS --> TRACE["TracingHandler<br/><i>OTel spans + correlation ID</i>"]
        TRACE --> ROUTE["RoutingHandler"]

        ROUTE -->|"/health/*"| HEALTH["HealthHandler<br/><i>live / ready / started</i>"]
        ROUTE -->|"/metrics"| METRICS["MetricsHandler<br/><i>Prometheus format</i>"]
        ROUTE -->|"/mcp"| TRANSPORT["UndertowMcpTransport<br/><i>POST: JSON-RPC<br/>GET: SSE stream<br/>DELETE: session cleanup</i>"]
    end

    subgraph MCP Layer
        TRANSPORT --> SDK["MCP Java SDK<br/><i>McpSyncServer</i>"]
        SDK --> TOOLS["WeatherTools<br/><i>getCurrentWeather<br/>getForecast<br/>searchLocations</i>"]
    end

    subgraph Client Layer
        TOOLS --> CLIENT["WeatherApiClient"]
        CLIENT --> FAILSAFE["Failsafe<br/><i>retry + circuit breaker</i>"]
        FAILSAFE --> HTTP["Apache HttpClient 5<br/><i>connection pooling</i>"]
    end

    subgraph Infrastructure
        MAIN["Main.java<br/><i>composition root</i>"] -.-> VT
        MAIN -.-> SDK
        MAIN -.-> CLIENT
        CONFIG["ConfigLoader → Config<br/><i>config.toml + .env + env vars</i>"] -.-> MAIN
        TEL["Telemetry<br/><i>OTel SDK (real or noop)</i>"] -.-> TRACE
        TEL -.-> METRICS
        GS["GracefulShutdown<br/><i>LIFO hooks, timeout</i>"] -.-> MAIN
        CID["CorrelationId<br/><i>ScopedValue + MDC</i>"] -.-> TRACE
    end

    HTTP -->|HTTPS| EXT["External APIs<br/><i>weatherapi.com</i>"]
minlen
Top Far Below Near
Source (.mmd) 
graph TD
    A[Top] --> B[Far Below]
    A --> C[Near]
mixed_sizes
This is a very wide node label S S Medium label here
Source (.mmd) 
graph TD
    A[This is a very wide node label] --> B[S]
    A --> C[S]
    B --> D[Medium label here]
    C --> D
multi_edge
Server A Server B Client
Source (.mmd) 
flowchart TD
    A[Server A] --> B[Server B]
    A --> B
    A --> B
    C[Client] --> A
    C --> B
multiline_labels
First Line Second Line Multi Line Node Single Line Line One Line Two
Source (.mmd) 
flowchart TD
    A["First Line<br/>Second Line"] --> B["Multi<br/>Line<br/>Node"]
    B --> C["Single Line"]
    C --> D["Line One<br/>Line Two"]
nested_compound
Outer Inner Node A Node B Node C Node D
Source (.mmd) 
graph TD
    subgraph outer[Outer]
        subgraph inner[Inner]
            A[Node A] --> B[Node B]
        end
        C[Node C]
    end
    C --> D[Node D]
nested_subgraph
Backend Frontend Data Layer API Layer React App API Client Router Controller Database Cache
Source (.mmd) 
flowchart TD
    subgraph frontend[Frontend]
        A[React App] --> B[API Client]
    end
    subgraph backend[Backend]
        subgraph api[API Layer]
            C[Router] --> D[Controller]
        end
        subgraph data[Data Layer]
            E[(Database)] --> F[Cache]
        end
        D --> E
    end
    B --> C
    F -.-> B
open_edges
label A B C D E F G H
Source (.mmd) 
flowchart TD
    A --- B
    C -.- D
    E === F
    G -- label --- H
quoted_strings
label with (parens) label with [brackets] label with {braces} label with 'quotes' multi word label
Source (.mmd) 
flowchart TD
    A["label with (parens)"] --> B["label with [brackets]"]
    B --> C["label with {braces}"]
    C --> D["label with 'quotes'"]
    D --> E["multi word label"]
realistic_flowchart
No Yes A B Start Get Input Valid? Show Error Process Data Choose Path Option A Option B Merge Output Result End
Source (.mmd) 
graph TD
    start[Start] --> input[Get Input]
    input --> validate{Valid?}
    validate -->|No| error[Show Error]
    validate -->|Yes| process[Process Data]
    error --> input
    process --> decide{Choose Path}
    decide -->|A| optA[Option A]
    decide -->|B| optB[Option B]
    optA --> merge[Merge]
    optB --> merge
    merge --> output[Output Result]
    output --> done[End]
scale_50_nodes
Load Balancer Gateway 1 Gateway 2 Auth Service Session Store User API Order API Product API Search API Payment API User Logic Profile Mgr Preferences User DB Order Logic Cart Checkout Order DB Catalog Inventory Pricing Product DB Indexer Query Engine Search Index Payment Processor Fraud Check Settlement Ledger DB Message Queue Order Events Payment Events Inventory Events Notification Email Sender SMS Sender Push Notify Analytics Ingest Data Warehouse Dashboard
Source (.mmd) 
flowchart TD
    %% Ingress layer
    LB[Load Balancer] --> GW1[Gateway 1]
    LB --> GW2[Gateway 2]
    %% Auth
    GW1 --> Auth[Auth Service]
    GW2 --> Auth
    Auth --> Session[(Session Store)]
    %% API layer
    Auth --> API1[User API]
    Auth --> API2[Order API]
    Auth --> API3[Product API]
    Auth --> API4[Search API]
    Auth --> API5[Payment API]
    %% User domain
    API1 --> U1[User Logic]
    U1 --> U2[Profile Mgr]
    U1 --> U3[Preferences]
    U2 --> UDB[(User DB)]
    U3 --> UDB
    %% Order domain
    API2 --> O1[Order Logic]
    O1 --> O2[Cart]
    O1 --> O3[Checkout]
    O2 --> ODB[(Order DB)]
    O3 --> ODB
    O3 --> API5
    %% Product domain
    API3 --> P1[Catalog]
    P1 --> P2[Inventory]
    P1 --> P3[Pricing]
    P2 --> PDB[(Product DB)]
    P3 --> PDB
    %% Search domain
    API4 --> S1[Indexer]
    API4 --> S2[Query Engine]
    S1 --> ES[(Search Index)]
    S2 --> ES
    S1 --> PDB
    %% Payment domain
    API5 --> Pay1[Payment Processor]
    Pay1 --> Pay2[Fraud Check]
    Pay2 --> Pay3[Settlement]
    Pay3 --> PayDB[(Ledger DB)]
    Pay1 --> PayDB
    %% Events
    O3 --> MQ{{Message Queue}}
    MQ --> E1[Order Events]
    MQ --> E2[Payment Events]
    MQ --> E3[Inventory Events]
    E1 --> N1[Notification]
    E2 --> N1
    E3 --> P2
    %% Monitoring
    N1 --> Email[Email Sender]
    N1 --> SMS[SMS Sender]
    N1 --> Push[Push Notify]
    %% Analytics
    E1 --> A1[Analytics Ingest]
    E2 --> A1
    A1 --> DW[(Data Warehouse)]
    DW --> Dash[Dashboard]
scale_wide_fanout
Router Shard 1 Shard 2 Shard 3 Shard 4 Shard 5 Shard 6 Shard 7 Shard 8 Shard 9 Shard 10 Replica 1A Replica 1B Replica 2A Replica 2B Replica 3A Replica 3B Replica 4A Replica 4B Replica 5A Replica 5B Replica 6A Replica 6B Replica 7A Replica 7B Replica 8A Replica 8B Replica 9A Replica 9B Replica 10A Replica 10B
Source (.mmd) 
flowchart TD
    Root[Router] --> C1[Shard 1]
    Root --> C2[Shard 2]
    Root --> C3[Shard 3]
    Root --> C4[Shard 4]
    Root --> C5[Shard 5]
    Root --> C6[Shard 6]
    Root --> C7[Shard 7]
    Root --> C8[Shard 8]
    Root --> C9[Shard 9]
    Root --> C10[Shard 10]
    C1 --> C1A[Replica 1A]
    C1 --> C1B[Replica 1B]
    C2 --> C2A[Replica 2A]
    C2 --> C2B[Replica 2B]
    C3 --> C3A[Replica 3A]
    C3 --> C3B[Replica 3B]
    C4 --> C4A[Replica 4A]
    C4 --> C4B[Replica 4B]
    C5 --> C5A[Replica 5A]
    C5 --> C5B[Replica 5B]
    C6 --> C6A[Replica 6A]
    C6 --> C6B[Replica 6B]
    C7 --> C7A[Replica 7A]
    C7 --> C7B[Replica 7B]
    C8 --> C8A[Replica 8A]
    C8 --> C8B[Replica 8B]
    C9 --> C9A[Replica 9A]
    C9 --> C9B[Replica 9B]
    C10 --> C10A[Replica 10A]
    C10 --> C10B[Replica 10B]
self_loop
Yes Done No Idle Event? Handle
Source (.mmd) 
flowchart TD
    A[Idle] --> B{Event?}
    B -->|Yes| C[Handle]
    B -->|No| A
    C --> C
    C -->|Done| A
shape_all_to_all
Rect Rounded Stadium Subroutine Cylinder Circle Double Circle Diamond Hexagon Parallelogram Alt Parallelogram Trapezoid Alt Trapezoid Asymmetric
Source (.mmd) 
flowchart TD
    R[Rect] --> RR(Rounded)
    RR --> S([Stadium])
    S --> Sub[[Subroutine]]
    Sub --> Cyl[(Cylinder)]
    Cyl --> C((Circle))
    C --> DC(((Double Circle)))
    DC --> D{Diamond}
    D --> H{{Hexagon}}
    H --> P[/Parallelogram/]
    P --> PA[\Alt Parallelogram\]
    PA --> T[/Trapezoid\]
    T --> TA[\Alt Trapezoid/]
    TA --> A>Asymmetric]
    A --> R
    %% Cross-connections for adjacency coverage
    R --> D
    RR --> H
    S --> C
    Sub --> P
    Cyl --> DC
Part 1 [Part 2] Part 3