Full de trucs de sintaxi mermaid

El diagrama més curt que funciona

Un flowchart necessita una línia de declaració i una fletxa. TD vol dir de dalt a baix; fes servir LR per a d'esquerra a dreta, que va millor per a processos amples.

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

A, B i C són identificadors de node — noms interns, mai dibuixats. El text entre claudàtors és l'etiqueta, i l'estil dels claudàtors és el que tria la forma.

Formes de node

La forma es tria pel parell de delimitadors al voltant de l'etiqueta. Aquestes són les que val la pena recordar:

💡Posa l'etiqueta entre cometes quan contingui claudàtors, dos punts o cometes: A["Load (raw) data"]. Sense cometes, l'analitzador interpreta la teva puntuació com a sintaxi.

Fletxes

La longitud de la fletxa també és significativa: --> és un rang, ---> empeny la destinació un rang més avall. És el control de disposició més senzill que mermaid ofereix.

Agrupar amb subgrafs

Un subgraph dibuixa una capsa amb etiqueta al voltant de nodes. Els subgrafs es poden imbricar, i les fletxes poden travessar les seves vores lliurement.

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

Color i estils

style pinta un node. classDef més class pinta un conjunt d'ells, que és el que vols passats tres o quatre nodes.

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

Els colors formen part del codi font del diagrama, així que sobreviuen l'exportació i viatgen amb el fitxer. Res aquí depèn d'una configuració de tema de l'eina que el renderitza.

Un exemple per cada tipus de diagrama

Diagrama de seqüència

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

Diagrama de classes

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

Diagrama d'estats

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

Diagrama de relació d'entitats

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

Diagrama de Gantt

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

On mermaid es renderitza tot sol

• GitHub — un bloc ```mermaid amb tanca es renderitza en issues, pull requests, comentaris i fitxers README.
• GitLab — el mateix bloc amb tanca, en issues, merge requests i la wiki.
• Notion — un bloc de codi amb el llenguatge configurat a Mermaid es renderitza al costat del codi font.
• Obsidian — un bloc mermaid amb tanca es renderitza en mode de previsualització.
• Llocs de documentació — Docusaurus, MkDocs Material i VitePress admeten tots blocs mermaid.

Aquesta és la raó real per mantenir els diagrames com a mermaid en lloc d'imatges: el diagrama viu al mateix fitxer de text que allò que descriu, i una revisió de codi pot veure què hi ha canviat.