documentation

Mermaid

Diagram Example: Mermaid

Mermaid Diagrams: Examples

Mermaid Diagram Showcase

These examples are built to show range, not just syntax. The first eight cover different Mermaid diagram families, the next three lean into dashboard-style visuals, and the last two show navigation patterns with clickable nodes.

1. Flowchart

flowchart LR
    Idea([Idea Intake]) --> Research[[Discovery]]
    Research --> Prototype[Rapid Prototype]
    Prototype --> Review{Stakeholder Review}
    Review -->|Approved| Pilot[Campus Pilot]
    Review -->|Needs work| Research
    Pilot --> Scale([Scale Up])

2. Sequence Diagram

sequenceDiagram
    autonumber
    participant Sponsor
    participant Team
    participant Platform
    participant Users

    Sponsor->>Team: Request proof of concept
    Team->>Platform: Provision sandbox
    Platform-->>Team: Workspace ready
    Team->>Users: Invite pilot group
    Users->>Platform: Test workflow
    Platform-->>Sponsor: Usage metrics and feedback

3. State Diagram

stateDiagram-v2
    [*] --> Intake
    Intake --> Discovery
    Discovery --> Build
    Build --> Pilot
    Pilot --> Iterate: refine
    Iterate --> Pilot: retest
    Pilot --> Approved
    Pilot --> Archived
    Approved --> [*]
    Archived --> [*]

4. Class Diagram

classDiagram
    class InnovationRequest {
        +String title
        +String sponsor
        +int priority
        +submit()
        +approve()
    }
    class Prototype {
        +String stack
        +String owner
        +deploy()
        +measure()
    }
    class ReviewBoard {
        +scoreRisk()
        +recommendPath()
    }

    InnovationRequest "1" --> "1..*" Prototype : creates
    ReviewBoard --> InnovationRequest : evaluates
    ReviewBoard --> Prototype : reviews

5. Entity Relationship Diagram

erDiagram
    IDEA ||--o{ EXPERIMENT : becomes
    EXPERIMENT ||--|{ METRIC : records
    EXPERIMENT }o--|| SPONSOR : funded_by
    EXPERIMENT ||--o{ DECISION : informs

    IDEA {
        string title
        string domain
    }
    EXPERIMENT {
        string name
        string stage
    }
    METRIC {
        string measure
        int value
    }
    SPONSOR {
        string unit
        string lead
    }
    DECISION {
        string outcome
        string date
    }

6. User Journey

mindmap
  root((Faculty Pilot Journey))
    Discover
      Hear about the lab
      Watch a live demo
    Start
      Submit the concept
      Meet the solution team
    Validate
      Run the pilot
      Review outcomes
    Scale
      Share results
      Launch wider rollout

7. Gantt Chart

gantt
    title 8-Week Proof of Concept Plan
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    section Design
    Discovery workshop :done, a1, 2026-05-01, 4d
    Success metrics    :a2, after a1, 3d

    section Build
    Rapid prototype    :crit, b1, 2026-05-08, 10d
    Integration pass   :b2, after b1, 6d

    section Pilot
    Department trial   :active, c1, 2026-05-26, 8d
    Executive readout  :milestone, 2026-06-06, 1d

8. Timeline

timeline
    title Innovation Program Milestones
    section Foundation
      2024 Q2 : Intake model defined
      2024 Q4 : Shared sandbox launched
    section Expansion
      2025 Q2 : Department pilot cohort started
      2025 Q4 : Reusable component library published
    section Acceleration
      2026 Q1 : Dashboard rollout
      2026 Q2 : Interactive project navigation

Dashboard Examples

9. XY Chart

xychart
    title "Prototype Throughput by Week"
    x-axis [W1, W2, W3, W4, W5, W6]
    y-axis "Projects" 0 --> 10
    bar [2, 4, 5, 7, 6, 8]
    line [1, 3, 4, 6, 7, 9]

10. Treemap

treemap-beta
    "Innovation Portfolio"
        "AI"
            "Knowledge Assistant": 18
            "Prompt Lab": 12
        "Operations"
            "Automation": 20
            "Monitoring": 14
        "Experience"
            "Wayfinding": 10
            "Knowledge Hub": 16

11. Quadrant Chart

quadrantChart
    title Proof of Concept Prioritization
    x-axis Low effort --> High effort
    y-axis Low impact --> High impact
    quadrant-1 Strategic bets
    quadrant-2 Quick wins
    quadrant-3 Low priority
    quadrant-4 Rethink
    AI assistant: [0.55, 0.82]
    Status detector: [0.32, 0.74]
    Cloud storage refresh: [0.76, 0.61]
    Fab lab check-in: [0.28, 0.46]

Interactive Navigation Examples

The two examples below are intended as navigation patterns. Click a node to open the linked page.

12. Innovation Portfolio Map

flowchart TB
    Portfolio([Innovation Portfolio])

    subgraph Experience
        Lab[Computer Lab]
        Fab[Digital Fab Lab]
    end

    subgraph Services
        AI[AI Sandbox]
        Detector[Status Detector]
        Cloud[Cloud Storage]
    end

    Portfolio --> Experience
    Portfolio --> Services
    Experience --> Lab
    Experience --> Fab
    Services --> AI
    Services --> Detector
    Services --> Cloud

    classDef focus fill:#dbeafe,stroke:#1d4ed8,color:#0f172a;
    class Portfolio,AI,Fab focus;

    click Lab href "/public/locations/computerlab/" "Open Computer Lab"
    click Fab href "/public/locations/digital-fablab/" "Open Digital Fabrication Lab"
    click AI href "/public/status/ai/" "Open AI status"
    click Detector href "/public/status/status-detector/" "Open Status Detector"
    click Cloud href "/public/pages/cloud-storage/" "Open Cloud Storage"

13. Proof-of-Concept Launchpad

flowchart LR
    Discover([Discover])
    Prototype([Prototype])
    Pilot([Pilot])
    Scale([Operationalize])

    IdeaAI[AI Sandbox]
    IdeaFab[Digital Fab Lab]
    IdeaDetect[Status Detector]
    IdeaCloud[Cloud Storage]
    IdeaLab[Computer Lab]

    Discover --> IdeaAI --> Prototype
    Discover --> IdeaFab --> Prototype
    Prototype --> IdeaDetect --> Pilot
    Prototype --> IdeaCloud --> Pilot
    Pilot --> IdeaLab --> Scale

    classDef accent fill:#ecfccb,stroke:#65a30d,color:#1f2937;
    class Discover,Prototype,Pilot,Scale accent;

    click IdeaAI href "/public/status/ai/" "Open AI status"
    click IdeaFab href "/public/locations/digital-fablab/" "Open Digital Fabrication Lab"
    click IdeaDetect href "/public/status/status-detector/" "Open Status Detector"
    click IdeaCloud href "/public/pages/cloud-storage/" "Open Cloud Storage"
    click IdeaLab href "/public/locations/computerlab/" "Open Computer Lab"

Posted: