Πλήρης οδηγός σύνταξης mermaid

Το πιο σύντομο διάγραμμα που λειτουργεί

Ένα flowchart χρειάζεται μία γραμμή δήλωσης και ένα βέλος. Το TD σημαίνει από πάνω προς τα κάτω· χρησιμοποιήστε LR για από αριστερά προς τα δεξιά, που ταιριάζει καλύτερα σε ευρείες διαδικασίες.

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

Τα A, B και C είναι ids κόμβων — εσωτερικά ονόματα, που δεν εμφανίζονται ποτέ. Το κείμενο μέσα στις αγκύλες είναι η ετικέτα, και το στυλ των αγκυλών καθορίζει το σχήμα.

Σχήματα κόμβων

Το σχήμα επιλέγεται από το ζεύγος οριοθετών γύρω από την ετικέτα. Αυτά αξίζει να τα θυμάστε:

💡Βάλτε την ετικέτα σε εισαγωγικά όταν περιέχει αγκύλες, άνω-κάτω τελεία ή εισαγωγικά: A["Load (raw) data"]. Χωρίς εισαγωγικά ο parser βλέπει τα σημεία στίξης σας ως σύνταξη.

Βέλη

Το μήκος του βέλους έχει επίσης σημασία: το --> είναι μία τάξη απόστασης, το ---> σπρώχνει τον στόχο μία τάξη παρακάτω. Είναι ο απλούστερος έλεγχος διάταξης που προσφέρει το mermaid.

Ομαδοποίηση με subgraph

Ένα subgraph σχεδιάζει ένα πλαίσιο με ετικέτα γύρω από κόμβους. Τα subgraph μπορούν να εμφωλεύονται, και τα βέλη μπορούν να διασχίζουν τα όριά τους ελεύθερα.

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

Χρώμα και στυλ

Το style βάφει έναν κόμβο. Το classDef μαζί με το class βάφει ένα σύνολο κόμβων, κάτι που θέλετε πέρα από τρεις ή τέσσερις κόμβους.

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

Τα χρώματα είναι μέρος της πηγής του διαγράμματος, οπότε επιβιώνουν στην εξαγωγή και ταξιδεύουν μαζί με το αρχείο. Τίποτα εδώ δεν εξαρτάται από μια ρύθμιση θέματος στο εργαλείο που το σχεδιάζει.

Ένα παράδειγμα ανά τύπο διαγράμματος

Sequence diagram

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

Class diagram

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

State diagram

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

Entity relationship diagram

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

Gantt chart

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

Πού σχεδιάζεται το mermaid αυτόματα

• GitHub — ένα περιφραγμένο ```mermaid block σχεδιάζεται σε issues, pull requests, σχόλια και αρχεία README.
• GitLab — το ίδιο περιφραγμένο block, σε issues, merge requests και το wiki.
• Notion — ένα code block με τη γλώσσα ορισμένη σε Mermaid σχεδιάζεται δίπλα στην πηγή.
• Obsidian — ένα περιφραγμένο mermaid block σχεδιάζεται σε λειτουργία προεπισκόπησης.
• Ιστοσελίδες τεκμηρίωσης — Docusaurus, MkDocs Material και VitePress υποστηρίζουν όλα mermaid blocks.

Αυτός είναι ο πραγματικός λόγος να κρατάτε τα διαγράμματα ως mermaid αντί για εικόνες: το διάγραμμα ζει στο ίδιο αρχείο κειμένου με αυτό που περιγράφει, και μια αναθεώρηση κώδικα μπορεί να δει τι άλλαξε σε αυτό.