Ściągawka ze składni mermaid

Najkrótszy diagram, który działa

Flowchart potrzebuje jednej linii deklaracji i jednej strzałki. TD oznacza od góry do dołu; użyj LR dla układu od lewej do prawej, który lepiej sprawdza się przy szerokich procesach.

flowchart TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| A

A, B i C to identyfikatory węzłów — nazwy wewnętrzne, nigdy nierysowane. Tekst w nawiasach to etykieta, a styl nawiasu decyduje o kształcie.

Kształty węzłów

Kształt jest wybierany przez parę ograniczników wokół etykiety. Oto te warte zapamiętania:

💡Ujmij etykietę w cudzysłów, gdy zawiera nawiasy, dwukropki lub cudzysłowy: A["Load (raw) data"]. Bez cudzysłowu parser odczyta twoją interpunkcję jako składnię.

Strzałki

Długość strzałki też ma znaczenie: --> to jeden poziom, ---> przesuwa cel o jeden poziom dalej w dół. To najprostsza kontrola układu, jaką daje mermaid.

Grupowanie za pomocą podgrafów

subgraph rysuje opisany prostokąt wokół węzłów. Podgrafy mogą się zagnieżdżać, a strzałki mogą swobodnie przekraczać ich granice.

flowchart LR
  subgraph api["API"]
    H[Handler] --> S[(Postgres)]
  end
  subgraph worker["Worker"]
    Q[Queue] --> W[Job]
  end
  H --> Q

Kolor i stylowanie

style maluje jeden węzeł. classDef razem z class maluje cały ich zestaw, co przydaje się już powyżej trzech, czterech węzłów.

flowchart TD
  A[OK] --> B[Failed]
  style A fill:#16a34a,stroke:#333,color:#fff
  classDef bad fill:#dc2626,stroke:#333,color:#fff
  class B bad

Kolory są częścią źródła diagramu, więc przetrwają eksport i wędrują razem z plikiem. Nic tutaj nie zależy od ustawień motywu w narzędziu, które go renderuje.

Po jednym przykładzie na każdy typ diagramu

Diagram sekwencji

sequenceDiagram
  participant User
  participant API
  participant DB
  User->>API: request
  API->>DB: query
  DB-->>API: rows
  API-->>User: response

Diagram klas

classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog

Diagram stanów

stateDiagram-v2
  [*] --> Idle
  Idle --> Running: start
  Running --> Idle: stop
  Running --> [*]: finish

Diagram relacji encji

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  CUSTOMER {
    string name
    string email
  }

Wykres Gantta

gantt
  title Project
  dateFormat YYYY-MM-DD
  section Phase 1
  Task 1 :a1, 2026-01-01, 5d
  Task 2 :after a1, 5d

Gdzie mermaid renderuje się samodzielnie

• GitHub — otoczony znacznikami blok ```mermaid renderuje się w issues, pull requestach, komentarzach i plikach README.
• GitLab — ten sam blok w znacznikach, w issues, merge requestach i wiki.
• Notion — blok kodu z językiem ustawionym na Mermaid renderuje się obok źródła.
• Obsidian — blok mermaid w znacznikach renderuje się w trybie podglądu.
• Strony dokumentacji — Docusaurus, MkDocs Material i VitePress obsługują bloki mermaid.

To prawdziwy powód, by trzymać diagramy jako mermaid, a nie jako obrazy: diagram żyje w tym samym pliku tekstowym co opisywana przez niego rzecz, a code review widzi, co się w nim zmieniło.