Mermaid szintaxis puska

A legrövidebb működő diagram

Egy folyamatábrához egy deklarációs sor és egy nyíl kell. A TD felülről lefelé jelent; használj LR-t balról jobbra, ami jobban illik a széles folyamatokhoz.

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

Az A, B és C csomópont-azonosítók — belső nevek, sosem jelennek meg. A szögletes zárójelben lévő szöveg a felirat, és a zárójel stílusa választja ki az alakot.

Csomópont-alakok

Az alakot a felirat körüli határolójel-pár választja ki. Ezeket érdemes megjegyezni:

💡Idézőjelbe kell tenni a feliratot, ha zárójelet, kettőspontot vagy idézőjelet tartalmaz: A["Load (raw) data"]. Idézőjelek nélkül a feldolgozó az írásjeleidet szintaxisként értelmezi.

Nyilak

A nyíl hossza is számít: a --> egy szintet jelent, a ---> a célt egy szinttel lejjebb tolja. Ez a legegyszerűbb elrendezés-vezérlés, amit a mermaid ad.

Csoportosítás alcsoportokkal

Egy subgraph egy feliratozott dobozt rajzol a csomópontok köré. Az alcsoportok egymásba ágyazhatók, és a nyilak szabadon átlépik a határaikat.

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

Szín és stílus

A style egyetlen csomópontot fest be. A classDef és a class együtt egy csoportnyi csomópontot fest be, ami három-négy csomópont felett hasznosabb.

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

A színek a diagram forrásának részei, így túlélik az exportálást, és a fájllal együtt utaznak. Semmi itt nem függ a renderelő eszköz témabeállításától.

Egy példa minden diagramtípushoz

Szekvenciadiagram

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

Osztálydiagram

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

Állapotdiagram

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

Entitás-kapcsolat diagram

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

Gantt diagram

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

Hol renderel a mermaid önmagában

• GitHub — egy körbekerített ```mermaid blokk renderelődik issue-kban, pull requestekben, kommentekben és README fájlokban.
• GitLab — ugyanaz a körbekerített blokk, issue-kban, merge requestekben és a wikiben.
• Notion — egy kódblokk, aminek a nyelve Mermaidra van állítva, a forrás mellett renderelődik.
• Obsidian — egy körbekerített mermaid blokk renderelődik előnézeti módban.
• Dokumentációs oldalak — a Docusaurus, a MkDocs Material és a VitePress is támogatja a mermaid blokkokat.

Ez az igazi oka annak, hogy a diagramokat mermaidként érdemes megtartani, nem képként: a diagram ugyanabban a szövegfájlban él, mint amit leír, és egy code review láthatja, mi változott benne.