2259 Diagrams 5083145f

Diagrams API Reference

Create diagrams and visualizations using Mermaid.

Mermaid Diagrams

mo.mermaid

Render diagrams using Mermaid syntax.

import marimo as mo

mo.mermaid("""
graph LR
    A[Start] --> B[Process]
    B --> C[End]
""")

Flowcharts

Basic Flowchart

mo.mermaid("""
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
""")

Direction Options

• TD / TB: Top to bottom
• BT: Bottom to top
• LR: Left to right
• RL: Right to left

mo.mermaid("""
graph LR
    A --> B --> C --> D
""")

Node Shapes

mo.mermaid("""
graph TD
    A[Rectangle]
    B(Rounded)
    C([Stadium])
    D[[Subroutine]]
    E[(Database)]
    F((Circle))
    G>Asymmetric]
    H{Diamond}
    I{{Hexagon}}
    J[/Parallelogram/]
    K[\Parallelogram Alt\]
""")

Link Styles

mo.mermaid("""
graph LR
    A --> B
    A --- C
    A -.-> D
    A ==> E
    A --text--> F
    A ---|text| G
""")

Sequence Diagrams

mo.mermaid("""
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response
""")

With Activations and Notes

mo.mermaid("""
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Note right of John: John thinks
    John-->>-Alice: Great!
    Alice-)John: See you later!
""")

Class Diagrams

mo.mermaid("""
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()

    class Duck{
        +String beakColor
        +swim()
        +quack()
    }

    class Fish{
        -int sizeInFeet
        -canEat()
    }
""")

State Diagrams

mo.mermaid("""
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : Start
    Processing --> Completed : Success
    Processing --> Failed : Error
    Completed --> [*]
    Failed --> Idle : Retry
""")

Entity Relationship Diagrams

mo.mermaid("""
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
    }
    ORDER {
        int orderNumber
        date created
    }
    LINE-ITEM {
        string productCode
        int quantity
        float price
    }
""")

Gantt Charts

mo.mermaid("""
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Research       :a1, 2024-01-01, 30d
    Design         :a2, after a1, 20d
    section Phase 2
    Development    :a3, after a2, 60d
    Testing        :a4, after a3, 30d
    section Phase 3
    Deployment     :a5, after a4, 10d
""")

Pie Charts

mo.mermaid("""
pie title Distribution
    "Category A" : 40
    "Category B" : 30
    "Category C" : 20
    "Category D" : 10
""")

Git Graphs

mo.mermaid("""
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
""")

Dynamic Diagrams

Generate diagrams from data:

def create_flowchart(steps):
    nodes = []
    links = []

    for i, step in enumerate(steps):
        nodes.append(f"    N{i}[{step}]")
        if i > 0:
            links.append(f"    N{i-1} --> N{i}")

    diagram = "graph TD\n" + "\n".join(nodes) + "\n" + "\n".join(links)
    return mo.mermaid(diagram)

create_flowchart(["Load Data", "Clean", "Transform", "Analyze", "Report"])

From DataFrame

def create_hierarchy(df, parent_col, child_col):
    lines = ["graph TD"]
    for _, row in df.iterrows():
        parent = row[parent_col].replace(" ", "_")
        child = row[child_col].replace(" ", "_")
        lines.append(f"    {parent} --> {child}")

    return mo.mermaid("\n".join(lines))

Styling

Node Styling

mo.mermaid("""
graph LR
    A[Normal]
    B[Styled]
    C[Another]

    style B fill:#f9f,stroke:#333,stroke-width:4px
    style C fill:#bbf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5 5
""")

Class-based Styling

mo.mermaid("""
graph LR
    A:::important --> B:::normal --> C:::warning

    classDef important fill:#f96,stroke:#333
    classDef normal fill:#9f9,stroke:#333
    classDef warning fill:#ff9,stroke:#333
""")

Best Practices

Keep Diagrams Simple

# Good - clear and readable
mo.mermaid("""
graph LR
    A --> B --> C
""")

# Avoid - too complex
# Break into multiple diagrams if needed

Use Meaningful Labels

mo.mermaid("""
graph TD
    Start[User Request] --> Validate{Valid?}
    Validate -->|Yes| Process[Process Request]
    Validate -->|No| Error[Return Error]
""")

Combine with Markdown

mo.md("""
## System Architecture

The following diagram shows the data flow:
""")

mo.mermaid("""
graph LR
    Input --> Processing --> Output
""")

mo.md("Data flows from left to right through the system.")

Resources

• Mermaid Documentation
• Mermaid Live Editor
• Supported diagram types: Flowchart, Sequence, Class, State, ER, Gantt, Pie, Git, and more