UML Diagram Editor (Mermaid)

Why write diagrams as text

• Easy to change. Renaming a class or adding a step is a one-line edit, and the layout adjusts itself.
• Fits in version control. A diagram is a few lines of plain text, so changes show up clearly in a diff.
• Works in other places too. GitHub, GitLab, Notion, Obsidian and many documentation tools render Mermaid directly, so the same text works in a README.

Class diagrams

Class diagrams show the structure of a system: classes, what they contain, and how they relate.

classDiagram
    class Order {
      +int id
      +Date created
      +addItem(Product p)
      +total() double
    }
    class Customer {
      +String name
      +String email
    }
    Customer "1" --> "*" Order : places
    Order *-- LineItem : contains
    LineItem --> Product

+ marks a public member and - a private one. A member with parentheses is a method; text after the closing parenthesis is its return type.

Relationships

Interfaces and abstract classes

classDiagram
    class PaymentGateway {
      <<interface>>
      +charge(int cents) bool
    }
    class StripeGateway
    PaymentGateway <|.. StripeGateway

Sequence diagrams

Sequence diagrams show messages passing between participants over time, top to bottom.

sequenceDiagram
    participant U as User
    participant W as Web app
    participant D as Database
    U->>W: Submit form
    W->>D: INSERT order
    D-->>W: OK
    W-->>U: Order confirmed

->> is a request and -->> (dashed) is a reply. Use loop, alt/else and opt blocks for repetition and branches:

sequenceDiagram
    Client->>Server: Login
    alt valid password
        Server-->>Client: Token
    else wrong password
        Server-->>Client: 401 Unauthorized
    end

State diagrams

State diagrams show the states something can be in and what moves it between them. [*] is the start or the end.

stateDiagram-v2
    [*] --> Draft
    Draft --> Submitted : submit
    Submitted --> Approved : approve
    Submitted --> Rejected : reject
    Rejected --> Draft : edit
    Approved --> Published
    Published --> [*]

Entity-relationship diagrams

ER diagrams model database tables and how they relate. The symbols on each end of a line give the cardinality: || is exactly one, o{ is zero or more, |{ is one or more.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "appears in"
    CUSTOMER {
      int id PK
      string email
    }
    ORDER {
      int id PK
      int customer_id FK
      date created
    }

Flowcharts

Not strictly UML, but often what you need for a process or a use case. LR lays it out left to right; TD goes top down.

flowchart TD
    A[Request received] --> B{Logged in?}
    B -- yes --> C[Show dashboard]
    B -- no --> D[Show login page]
    D --> B

Tips

• Start small. Render after every few lines, so when something breaks you know which line did it.
• Name things the way your code does. The diagram then doubles as documentation people can search.
• One idea per diagram. Two clear diagrams beat one crowded one.
• Use SVG for documents. It stays sharp when zoomed or printed and is usually smaller than PNG.

When the diagram will not render

The editor shows Mermaid's error message under the preview. The usual causes:

The Mermaid documentation covers every diagram type in full, including pie charts, Gantt charts, timelines and mind maps, which the editor also renders.