Mermaid málskipun — yfirlitsblað

Stysta skýringarmyndin sem virkar

Flæðirit þarf eina yfirlýsingarlínu og eina ör. TD þýðir ofan frá og niður; notaðu LR fyrir vinstri-til-hægri, sem hentar betur breiðum ferlum.

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

A, B og C eru auðkenni hnúta — innri nöfn, aldrei birt. Textinn í hornklofunum er merkimiðinn, og stíll hornklofanna ákveður lögunina.

Lögun hnúta

Lögun ræðst af afmörkunarpari umhverfis merkimiðann. Þetta eru þau sem borgar sig að muna:

💡Settu tilvitnunarmerki utan um merkimiða sem inniheldur sviga, tvípunkta eða gæsalappir: A["Load (raw) data"]. Án tilvitnunarmerkja les þáttarinn greinarmerkin þín sem málskipan.

Örvar

Lengd örvar skiptir líka máli: --> er ein röð, ---> ýtir áfangastaðnum einni röð neðar. Það er einfaldasta útlitsstjórnin sem mermaid gefur þér.

Hópun með undirgröfum

subgraph teiknar merktan kassa utan um hnúta. Undirgröf hreiðra sig, og örvar mega fara þvert yfir mörk þeirra frjálslega.

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

Litur og stílsetning

style málar einn hnút. classDef ásamt class málar hóp af þeim, sem er það sem þú vilt eftir þrjá eða fjóra hnúta.

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

Litir eru hluti af frumkóða skýringarmyndarinnar, þannig að þeir lifa af útflutning og fylgja skránni. Ekkert hér er háð þemastillingu í verkfærinu sem birtir hana.

Eitt dæmi fyrir hverja tegund skýringarmyndar

Runurit

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

Klasarit

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

Stöðurit

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

Tengslarit

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

Gantt rit

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

Hvar mermaid birtist á eigin spýtur

• GitHub — afgirt ```mermaid blokk birtist í issues, pull requests, athugasemdum og README skrám.
• GitLab — sama afgirta blokkin, í issues, merge requests og wiki-num.
• Notion — kóðablokk með tungumálið stillt á Mermaid birtist við hlið frumkóðans.
• Obsidian — afgirt mermaid blokk birtist í forskoðunarham.
• Docs sites — Docusaurus, MkDocs Material og VitePress styðja öll mermaid blokkir.

Það er hin raunverulega ástæða til að halda skýringarmyndum sem mermaid frekar en sem myndum: skýringarmyndin lifir í sama textaskjali og það sem hún lýsir, og kóðayfirferð getur séð hvað breyttist í henni.