20. avgust 2026

Mermaid sintaksa: hitri pregled

Q: Kako dodam prelom vrstice znotraj oznake vozlišča?

Uporabi ` ` znotraj oznake v narekovajih: `A["First line Second line"]`. Mermaid oznako izriše kot HTML, zato oznaka deluje, čeprav preostala sintaksa ni HTML.

Q: Lahko nadzorujem postavitev?

Le posredno. Izberi smer (`TD`, `LR`, `BT`, `RL`), uporabi daljše puščice (`--->`), da potisneš vozlišča bolj narazen, in združi povezana vozlišča v podgrafe. Mermaid izračuna preostalo — koordinat ni.

Mermaid ima obsežno referenco in majhno podmnožico, ki pokrije skoraj vse, kar ljudje rišejo. Ta stran je ta podmnožica: oblike, puščice, združevanje, barve in en primer za kopiranje in lepljenje za vsako vrsto diagrama. Vsak spodnji odlomek se izriše tak, kot je — prilepi ga v urejevalnik, da ga vidiš.

Najkrajši diagram, ki deluje

Flowchart potrebuje eno vrstico deklaracije in eno puščico. TD pomeni od zgoraj navzdol; za širše procese uporabi LR, od leve proti desni.

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

Flowchart s tremi vozlišči, od zgoraj navzdol.

A, B in C so id-ji vozlišč — interna imena, ki se nikoli ne izrišejo. Besedilo v oklepajih je oznaka, slog oklepaja pa določa obliko.

Oblike vozlišč

Obliko določa par ločil okoli oznake. To so tiste, ki si jih velja zapomniti:

Sintaksa	Oblika	Običajen pomen
`A[Text]`	Pravokotnik	Korak ali dejanje
`A(Text)`	Zaobljen	Začetna ali končna točka
`A([Text])`	Tabletka	Terminator
`A[[Text]]`	Podproces	Klic v drug proces
`A[(Text)]`	Valj	Baza podatkov ali shramba
`A((Text))`	Krog	Stičišče
`A{Text}`	Romb	Odločitev
`A{{Text}}`	Šesterokotnik	Korak priprave
`A[/Text/]`	Paralelogram	Vhod ali izhod
`A[/Text\]`	Trapez	Ročna operacija

Oznako postavi v narekovaje, kadar vsebuje oklepaje, dvopičja ali narekovaje: A["Load (raw) data"]. Brez narekovajev parser tvoja ločila razume kot sintakso.

Puščice

Sintaksa	Rezultat
`A --> B`	Puščica
`A --- B`	Črta, brez puščične glave
`A -.-> B`	Pikčasta puščica
`A ==> B`	Debela puščica
`A -->\|label\| B`	Puščica z oznako
`A --> B --> C`	Veriga, napisana v eni vrstici
`A --> B & C`	En vir, dva cilja

Tudi dolžina puščice je pomembna: --> je en rang, ---> potisne cilj še en rang nižje. To je najpreprostejši nadzor postavitve, ki ga mermaid ponuja.

Združevanje s podgrafi

subgraph nariše označeno škatlo okoli vozlišč. Podgrafi se lahko gnezdijo, puščice pa lahko prosto prečkajo njihove meje.

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

Dve storitvi, vsaka s svojo shrambo.

Barva in oblikovanje

style pobarva eno vozlišče. classDef skupaj z class pobarva celo skupino, kar je tisto, kar želiš po treh ali štirih vozliščih.

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

Barve so del izvorne kode diagrama, zato preživijo izvoz in potujejo skupaj z datoteko. Nič od tega ni odvisno od nastavitve teme v orodju, ki ga izrisuje.

En primer za vsako vrsto diagrama

Sekvenčni diagram

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

Razredni diagram

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

Stanjski diagram

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

Entitetno-razmerjski diagram

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

Gantogram

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

Kje se mermaid izriše sam od sebe

GitHub — ograjen ```mermaid blok se izriše v issues, pull requestih, komentarjih in datotekah README.
GitLab — enak ograjen blok, v issues, merge requestih in wikiju.
Notion — blok kode z jezikom, nastavljenim na Mermaid, se izriše poleg izvorne kode.
Obsidian — ograjen mermaid blok se izriše v načinu predogleda.
Spletišča z dokumentacijo — Docusaurus, MkDocs Material in VitePress vsi podpirajo mermaid bloke.

To je pravi razlog, da diagrame ohranjaš kot mermaid namesto kot slike: diagram živi v isti besedilni datoteki kot stvar, ki jo opisuje, pregled kode pa lahko vidi, kaj se je v njem spremenilo.

Preizkusi kateri koli odlomek s te strani

Prilepi ga v zavihek s kodo in se takoj izriše — ali zgradi enak diagram na platnu in preberi sintakso nazaj.

Pogosta vprašanja

Kako dodam prelom vrstice znotraj oznake vozlišča?

Uporabi <br> znotraj oznake v narekovajih: A["First line<br>Second line"]. Mermaid oznako izriše kot HTML, zato oznaka deluje, čeprav preostala sintaksa ni HTML.

Zakaj moja oznaka pokvari diagram?

Skoraj vedno gre za oklepaj, dvopičje ali narekovaj v oznaki, ki ni v narekovajih. Celotno oznako zavij v dvojne narekovaje in parser preneha tvoja ločila razumeti kot sintakso.

Lahko nadzorujem postavitev?

Le posredno. Izberi smer (TD, LR, BT, RL), uporabi daljše puščice (--->), da potisneš vozlišča bolj narazen, in združi povezana vozlišča v podgrafe. Mermaid izračuna preostalo — koordinat ni.

Katero različico mermaida uporablja ta urejevalnik?

Mermaid 11, trenutno glavno različico, zato se tu izriše vse, kar je dokumentirano za sintakso v10 in v11.