Mermaid süntaksi spikker

Lühim diagramm, mis töötab

Vookaart vajab üht deklaratsioonirida ja üht noolt. TD tähendab ülevalt alla; laiemate protsesside jaoks, mis sobivad paremini vasakult paremale, kasuta LR.

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

A, B ja C on sõlme id-d — sisemised nimed, mida kunagi ei kuvata. Nurksulgudes olev tekst on silt ja sulu stiil valib kuju.

Sõlmede kujud

Kuju valitakse sildi ümber oleva eraldajapaari järgi. Need tasub meeles pidada:

💡Pane silt jutumärkidesse, kui see sisaldab sulge, koolonit või jutumärke: A["Load (raw) data"]. Ilma jutumärkideta tõlgendab parser su kirjavahemärgid süntaksina.

Nooled

Ka noole pikkus on tähenduslik: --> on üks aste, ---> lükkab sihtmärgi ühe astme võrra allapoole. See on lihtsaim paigutuse juhtimise viis, mida mermaid pakub.

Rühmitamine alamgraafikutega

subgraph joonistab sildistatud kasti ümber sõlmede. Alamgraafikud pesastuvad ja nooled võivad nende piire vabalt ületada.

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

Värv ja stiil

style värvib ühe sõlme. classDef koos class-iga värvib terve komplekti, mida tasub teha alates kolmandast-neljandast sõlmest.

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ärvid on osa diagrammi lähtekoodist, seega säilivad need ekspordil ja liiguvad failiga kaasas. Miski siin ei sõltu renderdava tööriista teemaseadest.

Üks näide iga diagrammitüübi kohta

Jadadiagramm

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

Klassidiagramm

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

Olekudiagramm

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

Olemi-seose diagramm

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

Gantti diagramm

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

Kus mermaid renderdub iseenesest

• GitHub — sildistatud ```mermaid plokk renderdub probleemides, pull request'ides, kommentaarides ja README-failides.
• GitLab — sama sildistatud plokk, probleemides, merge request'ides ja wikis.
• Notion — koodiplokk, mille keeleks on määratud Mermaid, renderdub lähtekoodi kõrval.
• Obsidian — sildistatud mermaid plokk renderdub eelvaaterežiimis.
• Dokusaidid — Docusaurus, MkDocs Material ja VitePress toetavad kõik mermaid plokke.

See ongi tegelik põhjus, miks hoida diagramme mermaidina, mitte piltidena: diagramm elab samas tekstifailis nagu asi, mida ta kirjeldab, ja koodiülevaatus näeb, mis selles muutus.