MermaidJs Cheatsheet

Quick Reference

Notes

Note right of John: Text in note
Note over Alice,John: A typical interaction
Note over Alice,John: A typical interaction<br/>But now in two lines
    sequenceDiagram
        Note right of John: Text in note
        Note over Alice,John: A typical interaction
        Note over Alice,John: A typical interaction
But now in two lines

Class Diagram

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

Entity Relationship Diagram

erDiagram
    CAR {
        string registrationNumber PK
        string make
        string model
        string[] parts
    }
    PERSON {
        string driversLicense PK "The license #"
        string(99) firstName "Only 99 characters are allowed"
        string lastName
        string phone UK
        int age
    }
    NAMED-DRIVER {
        string carRegistrationNumber PK, FK
        string driverLicence PK, FK
    }
    erDiagram
        CAR {
            string registrationNumber PK
            string make
            string model
            string[] parts
        }
        PERSON {
            string driversLicense PK "The license #"
            string(99) firstName "Only 99 characters are allowed"
            string lastName
            string phone UK
            int age
        }
        NAMED-DRIVER {
            string carRegistrationNumber PK, FK
            string driverLicence PK, FK
        }

Flow Chart

---
title: Diagram Title
---
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
    ---
    title: Diagram Title
    ---
    flowchart LR
        A[Start] --> B{Is it?}
        B -->|Yes| C[OK]
        C --> D[Rethink]
        D --> B
        B ---->|No| E[End]

Sequence Diagram

sequenceDiagram
    actor User
    participant System
    User->>System: Sends Request

    alt is valid?
    System-->>User: Process Request
    else is not valid?
    System-->>User: Show Error Message
    end
    sequenceDiagram
        actor User
        participant System
        User->>System: Sends Request
        System-->>User: Process Request
        alt is valid?
            System-->>User: Process Request
        else is not valid?
            System-->>User: Show Error Message
        end