Mermaid cheat sheet sintakse

Najkraći dijagram koji radi

Flowchart treba jedan redak deklaracije i jednu strelicu. TD znači odozgo prema dolje; koristite LR za smjer slijeva nadesno, koji bolje odgovara širokim procesima.

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

A, B i C su id-jevi čvorova — interna imena, nikad prikazana. Tekst u zagradama je oznaka, a stil zagrada određuje oblik.

Oblici čvorova

Oblik se bira prema paru graničnika oko oznake. Ovo su oni vrijedni pamćenja:

💡Stavite oznaku pod navodnike kad sadrži zagrade, dvotočke ili navodnike: A["Load (raw) data"]. Bez navodnika parser vašu interpunkciju tumači kao sintaksu.

Strelice

Duljina strelice također ima značenje: --> je jedan rang, ---> gura odredište jedan rang dalje prema dolje. To je najjednostavnija kontrola izgleda koju mermaid nudi.

Grupiranje pomoću podgrafova

subgraph crta označeni okvir oko čvorova. Podgrafovi se mogu ugnijezditi, a strelice slobodno prelaze njihove granice.

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

Boja i stiliziranje

style boja jedan čvor. classDef plus class boja skup čvorova, što je ono što želite nakon tri ili četiri čvora.

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

Boje su dio izvornog koda dijagrama, pa preživljavaju izvoz i putuju zajedno s datotekom. Ništa ovdje ne ovisi o postavci teme u alatu koji ga prikazuje.

Po jedan primjer za svaku vrstu dijagrama

Dijagram slijeda

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

Dijagram klasa

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

Dijagram stanja

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

Dijagram entiteta i veza

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

Gantt dijagram

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

Gdje se mermaid prikazuje samostalno

• GitHub — ograđeni ```mermaid blok prikazuje se u issues, pull requestovima, komentarima i README datotekama.
• GitLab — isti ograđeni blok, u issues, merge requestovima i wikiju.
• Notion — blok koda s jezikom postavljenim na Mermaid prikazuje se pored izvora.
• Obsidian — ograđeni mermaid blok prikazuje se u pregledu.
• Docs stranice — Docusaurus, MkDocs Material i VitePress svi podržavaju mermaid blokove.

To je pravi razlog da dijagrame držite kao mermaid, a ne kao slike: dijagram živi u istoj tekstualnoj datoteci kao stvar koju opisuje, a code review može vidjeti što se u njemu promijenilo.