Mermaid Diagram Editor

Mermaid Akış Şeması: Çevrimiçi Akış Diyagramları Oluşturma

Mermaid sözdizimi ile akış şemaları oluşturun. Düğümler, kenarlar, şekiller, alt grafikler ve yön kontrolü. SVG ve PNG dışa aktarma ile canlı önizleme.

Verileriniz tarayıcınızdan çıkmaz.

Şablonlar:

Editör yükleniyor...

Diyagram önizlemesi burada görünecek...

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ŞekilTipik kullanım
A[metin]DikdörtgenEylemler, adımlar, süreçler
A(metin)Yuvarlatılmış dikdörtgenBaşlangıç/bitiş
A{metin}ElmasKararlar, koşullar
A([metin])StadyumTerminaller, başlangıç/bitiş
A[[metin]]Alt yordamFonksiyon çağrıları, alt süreçler
A((metin))DaireBağlayıcılar, olaylar
A{{metin}}AltıgenHazı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.