← Mermaid Studio
DIAGRAM LIBRARY

Choose the right diagram for the idea

Learn what each Mermaid diagram is good for, start from a working example, and continue in the full browser editor.

Mermaid flowchart rendered Mermaid preview. Source code: flowchart TD Idea[Idea planning] --> Review{Team review} Review -- Approve --> Build[Build] Review -- Revise --> Idea Build --> Ship[Deploy]

flow

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Explore diagram
Mermaid sequence diagram rendered Mermaid preview. Source code: sequenceDiagram actor User as User participant Web as Web app participant API as API User->>Web: Open project Web->>API: GET /projects/:id API-->>Web: Mermaid Code Web-->>User: Render diagram

flow

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Explore diagram
Mermaid class diagram rendered Mermaid preview. Source code: classDiagram class Project { +String id +String title +save() +share() } class Revision { +String code +Date createdAt } Project "1" --> "*" Revision

modeling

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Explore diagram
Mermaid ER diagram rendered Mermaid preview. Source code: erDiagram USER ||--o{ PROJECT : owns PROJECT ||--o{ REVISION : contains USER { string id PK string email } PROJECT { string id PK string ownerId FK string title }

modeling

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Explore diagram
Mermaid state diagram rendered Mermaid preview. Source code: stateDiagram-v2 [*] --> Draft Draft --> Saved: Saved Saved --> Shared: Public Shared --> Saved: Private Saved --> Archived: Archived Archived --> [*]

flow

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Explore diagram
Mermaid mindmap rendered Mermaid preview. Source code: mindmap root((Mermaid Studio)) Live editor Templates Live preview Projects Automatic Saved Version history Sharing Public link Team feedback

ideation

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Explore diagram
Mermaid Gantt chart rendered Mermaid preview. Source code: gantt title Mermaid Studio Build dateFormat YYYY-MM-DD section Foundation Data model :done, data, 2026-07-28, 1d Live editor :active, editor, after data, 3d section Product Dashboard :dashboard, after editor, 2d Sharing :share, after dashboard, 1d

flow

Mermaid Gantt chart

Plan projects with tasks, milestones, dependencies, and dates.

Explore diagram
Mermaid C4 diagram rendered Mermaid preview. Source code: C4Context title Mermaid Studio System Context Person(user, "User", "Create and share diagrams") System(web, "Next.js Web", "Editor and Dashboard") System(api, "Nest API", "Project and permission management") Rel(user, web, "Use") Rel(web, api, "HTTPS/JSON")

modeling

Mermaid C4 diagram

Explain software architecture from system context to detailed components.

Explore diagram
Mermaid user journey rendered Mermaid preview. Source code: journey title Diagram Sharing Journey section Write Editor Open: 5: User Code Write: 4: User Check result: 5: User section Sharing Create link: 4: User Send to team: 5: User

flow

Mermaid user journey

Describe user actions, sentiment, and experience across a journey.

Explore diagram
Mermaid pie chart rendered Mermaid preview. Source code: pie title Monthly Feature usage share "Editor" : 42 "Templates" : 28 "AI generation" : 20 "Sharing" : 10

data

Mermaid pie chart

Compare parts of a whole with a simple Mermaid pie chart.

Explore diagram
Mermaid quadrant chart rendered Mermaid preview. Source code: quadrantChart title Feature priority x-axis Low impact --> High impact y-axis Low effort --> High effort quadrant-1 Quick wins quadrant-2 Strategic work quadrant-3 Backlog quadrant-4 Needs review Templates: [0.75, 0.65] AI generation: [0.85, 0.8] Comments: [0.45, 0.35]

data

Mermaid quadrant chart

Position items across two axes to compare priorities or trade-offs.

Explore diagram
Mermaid requirement diagram rendered Mermaid preview. Source code: requirementDiagram requirement fast_editor { id: 1 text: The user Code When input Immediately Result Must review Does risk: high verifymethod: test } element renderer { type: software } renderer - satisfies -> fast_editor

modeling

Mermaid requirement diagram

Connect requirements, elements, and verification relationships.

Explore diagram
Mermaid Git graph rendered Mermaid preview. Source code: gitGraph commit id: "initial" branch develop checkout develop commit id: "feature" checkout main merge develop commit id: "release"

modeling

Mermaid Git graph

Explain branches, commits, merges, and release paths visually.

Explore diagram
Mermaid timeline rendered Mermaid preview. Source code: timeline title Mermaid Studio Key Schedule 2026 Q1 : Editor Launch 2026 Q2 : Save project : Public link 2026 Q3 : AI Diagram

flow

Mermaid timeline

Present milestones and events in chronological order.

Explore diagram
Mermaid ZenUML diagram rendered Mermaid preview. Source code: zenuml title Payment Approve Flow User->App: Start payment App->Payment.authorize() { Payment->Bank: Approve Request Bank->Payment: Approve Result } Payment->App: Payment complete

flow

Mermaid ZenUML diagram

Write concise sequence diagrams for object interactions and messages.

Explore diagram
Mermaid Sankey diagram rendered Mermaid preview. Source code: sankey Inbound,Active User,120 Inbound,Churn,40 Active User,Save project,75 Active User,Sharing,45

data

Mermaid Sankey diagram

Show how quantities flow between sources, stages, and destinations.

Explore diagram
Mermaid XY chart rendered Mermaid preview. Source code: xychart-beta title "Monthly projects" x-axis [1Month, 2Month, 3Month, 4Month] y-axis "Projects" 0 --> 100 bar [20, 35, 58, 82] line [20, 35, 58, 82]

data

Mermaid XY chart

Plot values across two axes to show trends and comparisons.

Explore diagram
Mermaid block diagram rendered Mermaid preview. Source code: block columns 3 Web["Web"] API["API"] DB[("Database")] Web --> API API --> DB

modeling

Mermaid block diagram

Arrange system blocks and connections to explain structure at a glance.

Explore diagram
Mermaid packet diagram rendered Mermaid preview. Source code: packet +4: "Version" +4: "IHL" +8: "Service" +16: "Total Length" +32: "Payload"

modeling

Mermaid packet diagram

Document the fields and bit layout of a network packet.

Explore diagram
Mermaid Kanban board rendered Mermaid preview. Source code: kanban todo[Todo] research[Requirements research] doing[In Progress] build[Build feature] done[Done] release[Prepare release]

flow

Mermaid Kanban board

Organize work into visual columns such as backlog, active, and done.

Explore diagram
Mermaid architecture diagram rendered Mermaid preview. Source code: architecture-beta service internet(internet)[Internet] group cloud(cloud)[Cloud] service api(server)[API] in cloud service db(database)[Database] in cloud internet:R -- L:api api:R -- L:db

modeling

Mermaid architecture diagram

Show cloud services, infrastructure groups, and their connections.

Explore diagram
Mermaid radar chart rendered Mermaid preview. Source code: radar-beta title Diagram tool comparison axis speed["Speed"], clarity["Clarity"], cost["Cost"] curve mermaid["Mermaid"]{5, 4, 4} curve other["Other"]{4, 5, 3} max 5

data

Mermaid radar chart

Compare multiple options across a consistent set of dimensions.

Explore diagram
Mermaid treemap rendered Mermaid preview. Source code: treemap-beta "Features" "Editor": 40 "Sharing": 25 "AI": 35

data

Mermaid treemap

Show hierarchical values as nested areas for quick comparison.

Explore diagram
Mermaid bar chart rendered Mermaid preview. Source code: xychart-beta title "Monthly signups" x-axis [1Month, 2Month, 3Month, 4Month] y-axis "Signups" 0 --> 100 bar [20, 35, 58, 82]

data

Mermaid bar chart

Compare discrete values across categories with vertical bars.

Explore diagram
Mermaid line chart rendered Mermaid preview. Source code: xychart-beta title "Monthly active users" x-axis [1Month, 2Month, 3Month, 4Month] y-axis "User" 0 --> 100 line [20, 38, 52, 78]

data

Mermaid line chart

Show change over time or across ordered values with a line.

Explore diagram