Mermaid sözdizimi kopya kağıdı

İşe yarayan en kısa diyagram

Bir akış şeması bir tanım satırı ve bir ok gerektirir. TD yukarıdan aşağıya anlamına gelir; geniş süreçlere daha uygun olan soldan sağa için LR kullanın.

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

A, B ve C düğüm kimlikleridir — dahili adlardır, asla çizilmezler. Köşeli parantez içindeki metin etikettir ve parantez stili şekli belirler.

Düğüm şekilleri

Şekil, etiketin etrafındaki sınırlayıcı karakter çiftine göre seçilir. Akılda tutmaya değer olanlar şunlardır:

💡Etiket köşeli parantez, iki nokta üst üste veya tırnak içeriyorsa tırnak içine alın: A["Load (raw) data"]. Tırnak olmadan ayrıştırıcı noktalama işaretlerinizi sözdizimi olarak algılar.

Oklar

Ok uzunluğu da anlamlıdır: --> bir sıra, ---> hedefi bir sıra daha aşağı iter. Bu, mermaid'in size verdiği en basit yerleşim kontrolüdür.

Alt grafiklerle gruplama

Bir subgraph, düğümlerin etrafına etiketli bir kutu çizer. Alt grafikler iç içe geçebilir ve oklar sınırlarını serbestçe geçebilir.

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

Renk ve stil

style tek bir düğümü boyar. classDef ve class ise bir grup düğümü boyar, ki üç dört düğümden sonra istediğiniz şey de budur.

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

Renkler diyagram kaynağının bir parçasıdır, bu yüzden dışa aktarmadan sağ çıkar ve dosyayla birlikte taşınır. Burada hiçbir şey onu render eden aracın tema ayarına bağlı değildir.

Her diyagram türünden bir örnek

Sıralama diyagramı

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

Sınıf diyagramı

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

Durum diyagramı

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

Varlık ilişki diyagramı

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

Gantt şeması

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

Mermaid'in kendi başına render edildiği yerler

• GitHub — çevrelenmiş bir ```mermaid bloğu issue'larda, pull request'lerde, yorumlarda ve README dosyalarında render edilir.
• GitLab — aynı çevrelenmiş blok, issue'larda, merge request'lerde ve wiki'de.
• Notion — dili Mermaid olarak ayarlanmış bir kod bloğu, kaynağın yanında render edilir.
• Obsidian — önizleme modunda çevrelenmiş bir mermaid bloğu render edilir.
• Doküman siteleri — Docusaurus, MkDocs Material ve VitePress'in hepsi mermaid bloklarını destekler.

Diyagramları görsel yerine mermaid olarak tutmanın gerçek nedeni budur: diyagram, tanımladığı şeyle aynı metin dosyasında yaşar ve bir kod incelemesi onda neyin değiştiğini görebilir.