Mermaid sintakses uzziņa

Īsākā diagramma, kas darbojas

Plūsmas diagrammai nepieciešama viena deklarācijas rinda un viena bulta. TD nozīmē no augšas uz leju; izmantojiet LR no kreisās uz labo, kas labāk piemērots plašiem procesiem.

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

A, B un C ir mezglu id — iekšēji nosaukumi, kas nekad netiek zīmēti. Teksts iekavās ir etiķete, un iekavu stils nosaka formu.

Mezglu formas

Forma tiek izvēlēta pēc norobežotāju pāra ap etiķeti. Šīs ir vērtas iegaumēt:

💡Ievietojiet etiķeti pēdiņās, ja tā satur iekavas, kolus vai pēdiņas: A["Load (raw) data"]. Bez pēdiņām parsētājs uztver jūsu pieturzīmes kā sintaksi.

Bultas

Bultas garums arī ir nozīmīgs: --> ir viena pakāpe, ---> pabīda mērķi vienu pakāpi tālāk. Tā ir vienkāršākā izkārtojuma kontrole, ko dod mermaid.

Grupēšana ar apakšgrafiem

subgraph uzzīmē marķētu rāmi ap mezgliem. Apakšgrafi var ligzdoties, un bultas var brīvi šķērsot to robežas.

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

Krāsa un stilošana

style iekrāso vienu mezglu. classDef kopā ar class iekrāso mezglu kopu, kas noder, kad mezglu ir vairāk par trīs vai četriem.

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

Krāsas ir daļa no diagrammas pirmkoda, tāpēc tās saglabājas eksportā un ceļo kopā ar failu. Nekas šeit nav atkarīgs no rīka, kas to atveido, tēmas iestatījuma.

Pa vienam piemēram katram diagrammas veidam

Secības diagramma

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

Klašu diagramma

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

Stāvokļu diagramma

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

Entītiju attiecību diagramma

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

Gantt diagramma

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

Kur mermaid atveidojas pats no sevis

• GitHub — norobežots ```mermaid bloks atveidojas issues, pull requests, komentāros un README failos.
• GitLab — tas pats norobežotais bloks, issues, merge requests un wiki.
• Notion — koda bloks ar valodu iestatītu uz Mermaid atveidojas blakus pirmkodam.
• Obsidian — norobežots mermaid bloks atveidojas priekšskatījuma režīmā.
• Dokumentācijas vietnes — Docusaurus, MkDocs Material un VitePress visi atbalsta mermaid blokus.

Tas ir īstais iemesls glabāt diagrammas kā mermaid, nevis kā attēlus: diagramma dzīvo tajā pašā teksta failā, ko apraksta, un koda pārskatā var redzēt, kas tajā mainījies.