Real, ready-to-use Mermaid for every common diagram type. Each one renders live below — open any in the editor to tweak it, or copy the source straight into your docs. Nothing is uploaded.
Boxes for steps, diamonds for decisions, labelled arrows for branches — the bread-and-butter process diagram.
flowchart TD
Start([User visits app]) --> A{Logged in?}
A -->|Yes| Home[Show dashboard]
A -->|No| Login[Show login form]
Login --> B{Credentials valid?}
B -->|No| Err[Show error] --> Login
B -->|Yes| Token[Issue session token] --> HomeWho calls what, in what order. Solid arrows are requests, dashed arrows are responses — ideal for API and auth flows.
sequenceDiagram
participant C as Client
participant API
participant DB as Database
C->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order_id
API-->>C: 201 CreatedModel a database with crow’s-foot cardinality. Reads “one user writes many posts” straight off the page.
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : makes
POST }o--o{ TAG : "tagged with"Classes, fields, methods and relationships. “<|--” is inheritance; visibility markers (+/-) show the interface.
classDiagram
class Animal {
+String name
+move()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- CatThe states a thing can occupy and the events that move it between them — order lifecycles, approval flows, protocols.
stateDiagram-v2
[*] --> Draft
Draft --> Submitted: submit
Submitted --> UnderReview: assigned
UnderReview --> Approved: approve
UnderReview --> Rejected: reject
Rejected --> Draft: revise
Approved --> [*]A dated timeline from a few lines of text. Say a task starts “after” another and the chart chains them for you.
gantt
title Sprint 24
dateFormat YYYY-MM-DD
section Dev
Feature A :a, 2026-02-02, 5d
Feature B :b, after a, 4d
section QA
Test pass :after b, 3dPure indentation: the least-indented line is the centre, every deeper level is a branch. Brainstorm in plain text.
mindmap
root((Blog ideas))
Tutorials
Mermaid tips
Git workflows
Opinion
Tooling rants
Lists
Best CLIsEvery example here is plain Mermaid text — the same syntax GitHub, GitLab and Obsidian render natively. Open one in the Mermaid editor, rename the nodes to your own, and export. To drop a diagram into a repo, see how to embed Mermaid, or compare the syntax with Mermaid vs PlantUML and Graphviz.
Yes. Copy, edit and reuse any example freely — there is no signup, no account and no attribution required. The diagrams render in your browser, so nothing is uploaded.
Click “Open in editor” on any example. It loads the exact Mermaid source into the live editor, where you can change it, see it re-render instantly, and export an SVG or PNG.
Yes. Copy the source and paste it into a fenced ```mermaid code block in a README, issue or pull request — GitHub and GitLab render Mermaid natively, no image needed.
Flowchart, sequence, ER (database), UML class, state, Gantt and mind map. They are all standard Mermaid diagram types, and each links to a dedicated generator with more examples and a syntax cheatsheet.
Yes — open any example in the editor, then use the SVG or PNG export buttons. SVG stays crisp at any size; PNG is handy for slides and documents.