Mermaid sintaksės trumpasis vadovas

Trumpiausia veikianti diagrama

Blokinei schemai reikia vienos deklaracijos eilutės ir vienos rodyklės. TD reiškia iš viršaus į apačią; naudok LR procesams iš kairės į dešinę, kai jie platesni.

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

A, B ir C yra mazgų id — vidiniai vardai, kurie niekada nepiešiami. Tekstas skliaustuose yra etiketė, o skliaustų stilius parenka formą.

Mazgų formos

Forma parenkama pagal skliaustų porą aplink etiketę. Štai tos, kurias verta įsiminti:

💡Cituok etiketę, kai joje yra skliaustų, dvitaškių ar kabučių: A["Load (raw) data"]. Be kabučių analizatorius supranta skyrybos ženklus kaip sintaksę.

Rodyklės

Rodyklės ilgis taip pat turi reikšmę: --> yra vienas lygis, ---> nustumia taikinį dar vienu lygiu žemiau. Tai paprasčiausias išdėstymo valdymo būdas, kurį duoda mermaid.

Grupavimas su potipėmis (subgraph)

subgraph nupiešia pažymėtą dėžę aplink mazgus. Potipės gali būti įdėtos viena į kitą, o rodyklės gali laisvai kirsti jų ribas.

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

Spalva ir stilius

style nudažo vieną mazgą. classDef kartu su class nudažo jų rinkinį, o to ir reikia, kai mazgų daugiau nei trys ar keturi.

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

Spalvos yra diagramos kodo dalis, tad jos išlieka po eksporto ir keliauja kartu su failu. Čia niekas nepriklauso nuo temos nustatymo įrankyje, kuris ją atvaizduoja.

Po vieną pavyzdį kiekvienam diagramos tipui

Sekos diagrama

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

Klasių diagrama

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

Būsenų diagrama

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

Esybių ryšių diagrama

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

Ganto diagrama

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

Kur mermaid atvaizduojamas savaime

• GitHub — apibrėžtas ```mermaid blokas atvaizduojamas issues, pull request'uose, komentaruose ir README failuose.
• GitLab — tas pats apibrėžtas blokas, issues, merge request'uose ir wiki.
• Notion — kodo blokas su kalba nustatyta į Mermaid atvaizduojamas šalia kodo.
• Obsidian — apibrėžtas mermaid blokas atvaizduojamas peržiūros režime.
• Docs svetainės — Docusaurus, MkDocs Material ir VitePress palaiko mermaid blokus.

Būtent dėl to verta laikyti diagramas kaip mermaid, o ne kaip paveikslėlius: diagrama gyvena tame pačiame tekstiniame faile kaip ir dalykas, kurį ji aprašo, o code review gali matyti, kas joje pasikeitė.