galaxy/crates/editor/test_fixtures/mermaid_sample.md

Mermaid Render Test

This file is meant to exercise a broad variety of Mermaid diagram types in Warp. Most of the examples below are adapted from crates/mermaid_to_svg/samples.

Flowchart: shapes

graph TD
    A[Rect] --> B(Rounded)
    B --> C{Diamond}
    C --> D((Circle))
    D --> E([Stadium])
    E --> F[(Cylinder)]
    F --> G[[Subroutine]]
    G --> H{{Hexagon}}
    H --> I>Asymmetric]

Flowchart: styles

graph TD
    A[Start] --> B[Process]
    B --> C{Decision}
    C -->|Yes| D[Success]
    C -->|No| E[Error]
    D --> F[End]
    E --> F
    style A fill:#90EE90
    style B fill:#87CEEB
    style C fill:#FFD700
    style D fill:#98FB98
    style E fill:#FF6B6B
    style F fill:#DDA0DD

Sequence diagram

sequenceDiagram
    participant Alice
    participant Bob

    Note over Alice,Bob: Simple request/response with retry

    Alice->>Bob: Request
    alt success
        Bob-->>Alice: 200 OK
    else transient failure
        Bob-->>Alice: 503 Retry-After
        loop retry up to 3 times
            Alice->>Bob: Request
        end
    end

Class diagram

classDiagram
    direction LR

    class HttpClient

    class ApiClient {
        +request()
    }

    class IService {
        <<interface>>
        +request()
    }

    IService <|.. ApiClient
    ApiClient --> HttpClient : uses

Entity relationship diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

    CUSTOMER {
        string name
        string custNumber
    }

    ORDER {
        int orderNumber
        date orderDate
    }

    LINE_ITEM {
        int quantity
        float price
    }

State diagram

stateDiagram-v2
    [*] --> Validate
    Validate --> IsValid

    state IsValid <<choice>>

    IsValid --> Success : valid
    IsValid --> Failure : invalid

    state Fork <<fork>>
    Success --> Fork
    Fork --> TaskA
    Fork --> TaskB

    state Join <<join>>
    TaskA --> Join
    TaskB --> Join
    Join --> [*]

    Failure --> [*]

Journey diagram

journey
    title Sprint planning

    section Morning
      Stand up: 5: Alice, Bob
      Review backlog: 3: Alice
      Estimate tasks: 1: Bob

    section Afternoon
      Code review: 4: Alice, Bob
      Deploy: 5: Alice

Gantt chart

gantt
    title Simple Gantt
    dateFormat  YYYY-MM-DD

    section Build
    Setup        :a1, 2026-01-01, 2d
    Implement    :a2, after a1, 5d
    Test         :a3, after a2, 3d

Pie chart

pie
    title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

Quadrant chart

quadrantChart
    title Reach and engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 High impact
    quadrant-2 Viral
    quadrant-3 Niche
    quadrant-4 Broad but shallow
    "Post A": [0.3, 0.6]
    "Post B": [0.8, 0.2]

Timeline

timeline
    title History of Social Platforms
    2002 : LinkedIn
    2004 : Facebook
    2006 : Twitter

Mindmap

mindmap
  root((mindmap))
    Origins
      Long history
    Research
      On effectiveness
    Tooling
      Mermaid
      Rust

Git graph

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    checkout main
    merge develop

Kanban board

kanban
Backlog
    Design system@{assigned: Alice, priority: High}
    API docs
Todo
    Auth flow@{priority: Very High}
    Dashboard@{assigned: Bob}
In Progress
    Login page@{assigned: Charlie, priority: Medium}
Done
    Setup CI@{assigned: Dave, priority: Low}
    Database schema

Sankey diagram

sankey-beta
    A,B,10
    B,C,5
    B,D,5

XY chart

xychart-beta
    title Demo
    x-axis 0 --> 10
    y-axis 0 --> 100
    line [5, 10, 20, 40]

Requirement diagram

requirementDiagram
direction LR

requirement req1 {
    id: 1
    text: "The system shall do something"
    risk: high
    verifyMethod: test
}

element el1 {
    type: "Subsystem"
    docref: "DOC-1"
}

req1 - satisfies -> el1

C4 context

C4Context
title System Context diagram for Internet Banking System
Person(customer, "Banking Customer", "A customer of the bank")
System(banking, "Internet Banking System", "Allows customers to view information about their bank accounts")
Rel(customer, banking, "Uses")

Block diagram

block-beta
columns 2
A["Node A"]
B["Node B"]
C["Node C"]
D["Node D"]

Packet diagram

packet-beta
0-3: "Header"
4-7: "Payload"
8: "CRC"

Radar chart

radar-beta
axis A, B, C
curve Series1 { 1, 2, 3 }

Info diagram

info

Notes

• Verify that each code fence renders visually instead of as plain text.
• Check which diagram types fully render versus partially render or fall back.
• If useful, compare behavior between editor view, preview view, and reopen/resizing flows.