rusty-mermaid Gallery

25 diagram types — 297 diagrams rendered by rusty-mermaid

flowchart (122)
Part 1 Part 2 [Part 3]
shape_asymmetric_flags
Start Flag Step 1 Milestone Step 2 Checkpoint Step 3 Done
Source (.mmd) 
flowchart LR
    F1>Start Flag] --> A[Step 1]
    A --> F2>Milestone]
    F2 --> B[Step 2]
    B --> F3>Checkpoint]
    F3 --> C[Step 3]
    C --> F4>Done]
shape_cylinder_connected
Users DB Auth Service Orders DB Order Service Cache API Gateway
Source (.mmd) 
flowchart TD
    DB1[(Users DB)] --> Svc1[Auth Service]
    DB2[(Orders DB)] --> Svc2[Order Service]
    DB3[(Cache)] --> Svc1
    DB3 --> Svc2
    Svc1 --> GW[API Gateway]
    Svc2 --> GW
shape_diamond_chain
Pass Fail OK Over Hit Miss Yes No Validate Input Check Auth Rate Limit? Error Has Cache? Return Cache DB Available? Query DB
Source (.mmd) 
flowchart TD
    D1{Validate Input} --> D2{Check Auth}
    D2 -->|Pass| D3{Rate Limit?}
    D2 -->|Fail| Err[Error]
    D3 -->|OK| D4{Has Cache?}
    D3 -->|Over| Err
    D4 -->|Hit| Cache[Return Cache]
    D4 -->|Miss| D5{DB Available?}
    D5 -->|Yes| OK[Query DB]
    D5 -->|No| Err
shape_double_circle
Start Accept State Normal Final Accept Error State
Source (.mmd) 
flowchart TD
    Start((Start)) --> A(((Accept State)))
    Start --> B((Normal))
    B --> C(((Final Accept)))
    A --> C
    B --> D(((Error State)))
    D --> Start
shape_hexagon_hub
Router Rect Node Rounded Node Decision Stadium Circle Database
Source (.mmd) 
flowchart TD
    Hub{{Router}} --> A[Rect Node]
    Hub --> B(Rounded Node)
    Hub --> C{Decision}
    Hub --> D([Stadium])
    Hub --> E((Circle))
    Hub --> F[(Database)]
shape_parallelogram_flow
User Input Validate File Upload Parse Transform Report Summary
Source (.mmd) 
flowchart LR
    In1[/User Input/] --> P1[Validate]
    In2[/File Upload/] --> P2[Parse]
    P1 --> P3[Transform]
    P2 --> P3
    P3 --> Out1[\Report\]
    P3 --> Out2[\Summary\]
shape_stadium_varieties
OK A medium-length label here This is a very long stadium label that tests text wrapping and node sizing X Multi Word
Source (.mmd) 
flowchart LR
    S1([OK]) --> S2([A medium-length label here])
    S2 --> S3([This is a very long stadium label that tests text wrapping and node sizing])
    S3 --> S4([X])
    S4 --> S5([Multi Word])
    S1 --> S5
shape_subroutine_call
Yes No Main Program Initialize More Items? Process Item Validate Result Cleanup Exit
Source (.mmd) 
flowchart TD
    Start[Main Program] --> Init[[Initialize]]
    Init --> Loop{More Items?}
    Loop -->|Yes| Proc[[Process Item]]
    Proc --> Validate[[Validate Result]]
    Validate --> Loop
    Loop -->|No| Cleanup[[Cleanup]]
    Cleanup --> End[Exit]
shape_trapezoid_mixed
narrows expands skip Wide Top Wide Bottom Another Top Regular Rect Final Trap
Source (.mmd) 
flowchart TD
    T1[/Wide Top\] -->|narrows| T2[\Wide Bottom/]
    T2 -->|expands| T3[/Another Top\]
    T3 --> R1[Regular Rect]
    R1 --> T4[\Final Trap/]
    T1 -->|skip| T4
shapes
Yes No Rectangle Rounded Diamond Circle Stadium
Source (.mmd) 
flowchart TD
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C -->|Yes| D((Circle))
    C -->|No| E([Stadium])
shapes_with_labels
Rectangle Label Rounded Rect Label Stadium Label Circle Label Diamond Label Hexagon Label Parallelogram Label Parallelogram Alt Label Trapezoid Label Trapezoid Alt Label Cylinder Label Asymmetric Label Subroutine Label Double Circle Label
Source (.mmd) 
flowchart TD
    A[Rectangle Label]
    B(Rounded Rect Label)
    C([Stadium Label])
    D((Circle Label))
    E{Diamond Label}
    F{{Hexagon Label}}
    G[/Parallelogram Label/]
    H[\Parallelogram Alt Label\]
    I[/Trapezoid Label\]
    J[\Trapezoid Alt Label/]
    K[(Cylinder Label)]
    L>Asymmetric Label]
    M[[Subroutine Label]]
    N(((Double Circle Label)))
    A --> B --> C --> D --> E --> F --> G
    H --> I --> J --> K --> L --> M --> N
single_node
Only Node
Source (.mmd) 
graph TD
    A[Only Node]
style_classdef
Start Process End Inline Normal
Source (.mmd) 
flowchart TD
    A[Start] --> B[Process] --> C[End]
    classDef highlight fill:#f9f,stroke:#333,stroke-width:4px
    classDef dimmed fill:#eee,stroke:#999
    class A,C highlight
    class B dimmed
    D[Inline]:::highlight --> E[Normal]
style_combined
ClassDef Applied Inline Styled Class Statement Unstyled Node Mixed
Source (.mmd) 
flowchart TD
    A[ClassDef Applied]:::highlight --> B[Inline Styled]
    B --> C[Class Statement]
    C --> D[Unstyled Node]
    D --> E[Mixed]:::dimmed

    classDef highlight fill:#f9f,stroke:#333,stroke-width:4px
    classDef dimmed fill:#eee,stroke:#999,color:#666
    class C highlight
    style B fill:#bbf,stroke:#00f,stroke-width:2px
    style E fill:#ffa,stroke:#aa0
style_default_override
Gets Default Gets Default Overridden Also Overridden Back to Default
Source (.mmd) 
flowchart TD
    A[Gets Default] --> B[Gets Default]
    B --> C[Overridden]
    C --> D[Also Overridden]
    D --> E[Back to Default]

    classDef default fill:#e8e8e8,stroke:#999,stroke-width:1px,color:#333
    classDef special fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff
    class C,D special
style_inline
Styled Also Styled
Source (.mmd) 
flowchart TD
    A[Styled] --> B[Also Styled]
    style A fill:#f9f,stroke:#333,stroke-width:4px
    style B fill:#bbf,stroke:#00f
style_linkstyle_all
Start Step 1 Step 2 Step 3 Step 4 End
Source (.mmd) 
flowchart TD
    A[Start] --> B[Step 1]
    B --> C[Step 2]
    C --> D[Step 3]
    D --> E[Step 4]
    E --> F[End]

    linkStyle default stroke:#888,stroke-width:1px
    linkStyle 0 stroke:#ff0000,stroke-width:4px
    linkStyle 2 stroke:#00ff00,stroke-width:3px,stroke-dasharray:5
    linkStyle 4 stroke:#0000ff,stroke-width:2px
style_multiple_classes
One Class Two Classes Another Two Default Only
Source (.mmd) 
flowchart TD
    A[One Class] --> B[Two Classes]
    B --> C[Another Two]
    C --> D[Default Only]

    classDef bordered stroke:#333,stroke-width:3px
    classDef redFill fill:#fcc
    classDef blueFill fill:#ccf
    classDef bold font-weight:bold
    class A bordered
    class B bordered
    class B redFill
    class C bordered
    class C redFill
    class D blueFill
style_opacity
Full Opacity Half Opacity Quarter Opacity Restored
Source (.mmd) 
flowchart TD
    A[Full Opacity] --> B[Half Opacity]
    B --> C[Quarter Opacity]
    C --> D[Restored]

    style A fill:#4caf50,stroke:#333,opacity:1
    style B fill:#4caf50,stroke:#333,opacity:0.5
    style C fill:#4caf50,stroke:#333,opacity:0.25
    style D fill:#f44336,stroke:#333,opacity:0.75
    linkStyle 0 stroke:#f00,stroke-width:3px,opacity:1
    linkStyle 1 stroke:#f00,stroke-width:3px,opacity:0.5
    linkStyle 2 stroke:#f00,stroke-width:3px,opacity:0.25
style_showcase
Yes No Start Decision Process Database Output Done
Source (.mmd) 
flowchart LR
    A([Start]):::success --> B{Decision}:::warning
    B -->|Yes| C[[Process]]:::info
    B -->|No| D[(Database)]:::danger
    C --> E>Output]:::dark
    D --> E
    E --> F((Done)):::success

    classDef success fill:#4caf50,stroke:#2e7d32,stroke-width:2px
    classDef warning fill:#ff9800,stroke:#e65100,stroke-width:2px
    classDef danger fill:#f44336,stroke:#b71c1c,stroke-width:2px
    classDef info fill:#2196f3,stroke:#0d47a1,stroke-width:2px
    classDef dark fill:#333,stroke:#000,stroke-width:3px
subgraph
Test Phase Build Phase Source Compile Link Unit Tests Integration Tests
Source (.mmd) 
flowchart TD
    subgraph build[Build Phase]
        A[Source] --> B[Compile]
        B --> C[Link]
    end
    subgraph test[Test Phase]
        D[Unit Tests] --> E[Integration Tests]
    end
    C --> D
subgraph_deep
Level 1 Level 2 Level 3 A B C D E
Source (.mmd) 
flowchart TD
    subgraph outer[Level 1]
        subgraph middle[Level 2]
            subgraph inner[Level 3]
                A --> B
            end
            C --> A
        end
        D --> C
    end
    E --> D
subgraph_direction
LR Inside TD A B C D E
Source (.mmd) 
flowchart TD
    subgraph horizontal[LR Inside TD]
        direction LR
        A --> B --> C
    end
    D --> horizontal
    horizontal --> E
subgraph_empty
A B
Source (.mmd) 
flowchart TD
    subgraph empty[Empty Group]
    end
    A --> B
text_html_tags
Bold Italic Underline Strikethrough H2O x2 + y2 Bold Italic Underline Bold
Source (.mmd) 
graph TD
    A["<b>Bold</b>"] --> B["<i>Italic</i>"]
    B --> C["<u>Underline</u>"]
    C --> D["<s>Strikethrough</s>"]
    D --> E["H<sub>2</sub>O"]
    E --> F["x<sup>2</sup> + y<sup>2</sup>"]
    F --> G["<b><i>Bold Italic</i></b>"]
    G --> H["<u><b>Underline Bold</b></u>"]
text_single_char
a b 1 X .
Source (.mmd) 
flowchart TD
    A[a] --> B[b]
    B --> C[1]
    C --> D[X]
    D --> E[.]
text_special_chars
Ampersand & Co. Price: $99.99 100% Complete Yes/No? a + b = c escaped Line 1; Line 2 path/to/file.rs
Source (.mmd) 
flowchart TD
    A["Ampersand & Co."] --> B["Price: $99.99"]
    B --> C["100% Complete"]
    C --> D["Yes/No?"]
    D --> E["a + b = c"]
    E --> F["<html> escaped"]
    F --> G["Line 1; Line 2"]
    G --> H["path/to/file.rs"]
text_unicode_emoji
Café ☕ ✔ Success ✘ Failure → Next Step ★★★★☆ مرحبا 你好世界 α + β = γ 😀 Smile 🎉 Party 🚀 Launch
Source (.mmd) 
flowchart TD
    A["Café ☕"] --> B["✔ Success"]
    B --> C["✘ Failure"]
    C --> D["→ Next Step"]
    D --> E["★★★★☆"]
    E --> F["مرحبا"]
    F --> G["你好世界"]
    G --> H["α + β = γ"]
    H --> I["😀 Smile"]
    I --> J["🎉 Party"]
    J --> K["🚀 Launch"]
text_very_long
This is an extremely long label that tests how the renderer handles text overflow when a node contains more than one hundred characters in a single line of text Short Another very long label to see if width calculations and bounding boxes properly accommodate lengthy text content in downstream nodes
Source (.mmd) 
flowchart TD
    A["This is an extremely long label that tests how the renderer handles text overflow when a node contains more than one hundred characters in a single line of text"] --> B[Short]
    B --> C["Another very long label to see if width calculations and bounding boxes properly accommodate lengthy text content in downstream nodes"]
unicode_labels
Hello World Bonjour le monde Hallo Welt Привет мир 你好世界 こんにちは世界 مرحبا بالعالم
Source (.mmd) 
flowchart TD
    A[Hello World] --> B[Bonjour le monde]
    B --> C[Hallo Welt]
    C --> D[Привет мир]
    D --> E[你好世界]
    E --> F[こんにちは世界]
    F --> G[مرحبا بالعالم]
weighted
A B C D
Source (.mmd) 
graph TD
    A --> B
    A --> C
    B --> D
    C --> D
wide_graph
Root Branch 1 Branch 2 Branch 3 Branch 4 Branch 5 Merge
Source (.mmd) 
flowchart TD
    A[Root] --> B1[Branch 1]
    A --> B2[Branch 2]
    A --> B3[Branch 3]
    A --> B4[Branch 4]
    A --> B5[Branch 5]
    B1 --> C[Merge]
    B2 --> C
    B3 --> C
    B4 --> C
    B5 --> C
Part 1 Part 2 [Part 3]