Mermaid Akış Şeması Sözdizimi
Akış şemaları, en çok kullanılan Mermaid diyagram türüdür. Süreçleri, karar ağaçlarını ve sistem akışlarını, kenarlarla bağlanan düğümler kullanarak haritalar. Sözdizimi, grafiğin bir açıklaması gibi okunur: düğümleri şekilleriyle tanımlayın, onları oklarla bağlayın ve isteğe bağlı olarak alt grafikler halinde gruplayın.
Yön
İlk satır genel akış yönünü belirler:
flowchart TD %% yukarıdan aşağıya (varsayılan)
flowchart LR %% soldan sağa
flowchart RL %% sağdan sola
flowchart BT %% aşağıdan yukarıya
Yatay süreç akışları (zaman çizelgeleri, boru hatları) için LR seçin. Dikey hiyerarşiler (organizasyon şemaları, karar ağaçları) için TD seçin.
Düğüm Şekilleri
| Sözdizimi | Şekil | Tipik kullanım |
|---|---|---|
A[metin] | Dikdörtgen | Eylemler, adımlar, süreçler |
A(metin) | Yuvarlatılmış dikdörtgen | Başlangıç/bitiş |
A{metin} | Elmas | Kararlar, koşullar |
A([metin]) | Stadyum | Terminaller, başlangıç/bitiş |
A[[metin]] | Alt yordam | Fonksiyon çağrıları, alt süreçler |
A((metin)) | Daire | Bağlayıcılar, olaylar |
A{{metin}} | Altıgen | Hazırlık adımları |
Kenar Türleri
A --> B %% düz ok
A --- B %% düz çizgi, ok yok
A -.-> B %% noktalı ok
A ==> B %% kalın ok
A -->|etiket| B %% etiketli ok
Alt Grafikler
İlgili düğümleri görsel olarak gruplayın:
flowchart LR
subgraph ArkaUç
direction TB
API --> DB
API --> Cache
end
subgraph ÖnUç
UI --> API
end
Stil Verme
Tek tek düğümlere CSS sınıfları veya satır içi stiller uygulayın:
flowchart TD
A[Kritik] --> B[Normal]
style A fill:#f43f5e,color:#fff,stroke:#e11d48
classDef success fill:#10b981,color:#fff
B:::success
Pratik Desenler
Karar ağacı
flowchart TD
Başlangıç --> S1{Bütçe > $1000?}
S1 -- Evet --> S2{Hız gerekli?}
S1 -- Hayır --> Bütçe[Ücretsiz katman]
Boru hattı
flowchart LR
Kaynak --> Derle --> Test --> Dağıt --> İzle
API akışını belgelemeniz mi gerekiyor? Mermaid Sıra Diyagramı istek/yanıt etkileşimleri için yapılmıştır.