Fișă cu sintaxa mermaid

Cea mai scurtă diagramă funcțională

Un flowchart are nevoie de o linie de declarare și o săgeată. TD înseamnă de sus în jos; folosește LR pentru de la stânga la dreapta, care se potrivește mai bine proceselor late.

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

A, B și C sunt id-uri de noduri — nume interne, niciodată desenate. Textul din paranteze este eticheta, iar stilul parantezei alege forma.

Forme de noduri

Forma este aleasă de perechea de delimitatori din jurul etichetei. Acestea merită reținute:

💡Pune eticheta între ghilimele când conține paranteze, două puncte sau ghilimele: A["Load (raw) data"]. Fără ghilimele, parserul interpretează punctuația ta ca sintaxă.

Săgeți

Lungimea săgeții contează și ea: --> este un rang, ---> împinge ținta cu încă un rang mai jos. Este cel mai simplu control de layout pe care ți-l oferă mermaid.

Gruparea cu subgrafuri

Un subgraph desenează o casetă etichetată în jurul nodurilor. Subgrafurile se pot imbrica, iar săgețile pot trece liber peste marginile lor.

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

Culoare și stilizare

style colorează un singur nod. classDef plus class colorează un set de noduri, ceea ce e util peste trei sau patru noduri.

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

Culorile fac parte din sursa diagramei, deci supraviețuiesc exportului și călătoresc odată cu fișierul. Nimic aici nu depinde de o setare de temă în unealta care o randează.

Câte un exemplu pentru fiecare tip de diagramă

Diagramă de secvență

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

Diagramă de clase

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

Diagramă de stare

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

Diagramă entitate-relație

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

Diagramă Gantt

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

Unde se randează mermaid din start

• GitHub — un bloc ```mermaid se randează în issues, pull request-uri, comentarii și fișiere README.
• GitLab — același bloc, în issues, merge request-uri și wiki.
• Notion — un bloc de cod cu limbajul setat pe Mermaid se randează lângă sursă.
• Obsidian — un bloc mermaid se randează în modul de previzualizare.
• Site-uri de documentație — Docusaurus, MkDocs Material și VitePress suportă toate blocuri mermaid.

Acesta este motivul real pentru a păstra diagramele ca mermaid și nu ca imagini: diagrama trăiește în același fișier text ca lucrul pe care îl descrie, iar un code review poate vedea ce s-a schimbat în ea.