Mermaid-syntaksin pikaopas

Lyhin toimiva kaavio

Vuokaavio tarvitsee yhden määrittelyrivin ja yhden nuolen. TD tarkoittaa ylhäältä alas; käytä LR-suuntaa vasemmalta oikealle, joka sopii paremmin leveille prosesseille.

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

A, B ja C ovat solmujen tunnisteita – sisäisiä nimiä, joita ei koskaan piirretä. Hakasulkeissa oleva teksti on selite, ja hakasulkeiden tyyli määrää muodon.

Solmujen muodot

Muoto valitaan selitteen ympärillä olevan erotinparin perusteella. Nämä kannattaa muistaa:

💡Laita selite lainausmerkkeihin, kun se sisältää sulkeita, kaksoispisteitä tai lainausmerkkejä: A["Load (raw) data"]. Ilman lainausmerkkejä jäsentäjä tulkitsee välimerkkisi syntaksiksi.

Nuolet

Nuolen pituudella on myös merkitys: --> on yksi taso, ---> työntää kohteen yhden tason alemmas. Se on yksinkertaisin asettelun hallintakeino, jonka mermaid tarjoaa.

Ryhmittely alikaavioilla

subgraph piirtää nimetyn laatikon solmujen ympärille. Alikaaviot voivat sisäkkäistyä, ja nuolet voivat ylittää niiden rajat vapaasti.

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

Väri ja tyylittely

style värittää yhden solmun. classDef yhdessä class-määrityksen kanssa värittää joukon niitä, mikä kannattaa kolmen tai neljän solmun jälkeen.

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

Värit ovat osa kaavion lähdekoodia, joten ne säilyvät viennissä ja kulkevat tiedoston mukana. Mikään täällä ei riipu piirtävän työkalun teema-asetuksesta.

Yksi esimerkki jokaisesta kaaviotyypistä

Sekvenssikaavio

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

Luokkakaavio

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

Tilakaavio

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

Entiteettisuhdekaavio

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

Gantt-kaavio

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

Missä mermaid piirtyy itsestään

• GitHub — aidattu ```mermaid-lohko piirtyy issueissa, pull requesteissa, kommenteissa ja README-tiedostoissa.
• GitLab — sama aidattu lohko, issueissa, merge requesteissa ja wikissä.
• Notion — koodilohko, jonka kieleksi on asetettu Mermaid, piirtyy lähdekoodin viereen.
• Obsidian — aidattu mermaid-lohko piirtyy esikatselutilassa.
• Dokumentaatiosivustot — Docusaurus, MkDocs Material ja VitePress tukevat kaikki mermaid-lohkoja.

Se on todellinen syy pitää kaaviot mermaidina eikä kuvina: kaavio elää samassa tekstitiedostossa kuin asia, jota se kuvaa, ja koodikatselmuksessa näkee mitä siinä muuttui.