Ücretsiz · Kayıt yok · .mmd dosyalarıyla çalışır

Mermaid durum diyagramı editörü

Durum diyagramı tek bir şeyin bulunabileceği durumları ve onu bunlar arasında taşıyan olayları gösterir. Konu bir yaşam döngüsüyse uygundur — bir sipariş, bir abonelik, incelemedeki bir belge. Şaşmaz işaret şudur: etiketleriniz eylem değil hâl bildirir — beklemede, gönderildi, iptal edildi.

Bunu editörde aç →Kılavuzu okuyun

İptalin çıkışsız olduğu bir sipariş yaşam döngüsü

Durumlar siparişin ne olduğudur; okların etiketleri ise ona ne olduğudur. İptal edildi durumuna üç durumdan ulaşıldığını ama oradan hiçbir yere gidilmediğini fark edin. Durum diyagramının apaçık gösterdiği, akış şemasının ise sakladığı asimetri tam olarak budur.

stateDiagram-v2
    state "Ödeme bekliyor" as odemeBekliyor

    [*] --> odemeBekliyor: sipariş verildi
    odemeBekliyor --> Odendi: ödeme onaylandı
    odemeBekliyor --> IptalEdildi: müşteri vazgeçti
    Odendi --> Hazirlandi: depoda toplandı
    Odendi --> IadeEdildi: ödeme geri alındı
    Hazirlandi --> Kargoda: kargo teslim aldı
    Hazirlandi --> IptalEdildi: stok yok
    Kargoda --> TeslimEdildi: teslimat doğrulandı
    Kargoda --> Kayip: 14 gündür okutma yok
    TeslimEdildi --> [*]
    IadeEdildi --> [*]
    IptalEdildi --> [*]
    Kayip --> IadeEdildi: talep kabul edildi
Bunu editörde aç
Reklam

Çözümlü örnekler

1. En küçük durum makinesi

`[*]` hem başlangıç hem bitiş sözde durumudur: hangisi olduğu okun hangi tarafında durduğuna bağlıdır.

stateDiagram-v2
    [*] --> Taslak
    Taslak --> Yayinda: yayımla
    Yayinda --> [*]
Editörde aç

2. Boşluk içeren durumları adlandırmak

Durum tanımlayıcıları boşluk içeremez, ama `state "Etiket" as id` güvenli bir tanımlayıcıyla okunabilir bir etiket verir. Türkçede buna neredeyse her zaman ihtiyaç duyulur, çünkü doğal durum adlarımız çok sözcüklüdür: «ödeme bekliyor», «incelemede».

stateDiagram-v2
    state "İnceleme bekliyor" as inceleme
    state "Düzeltme istendi" as duzeltme
    [*] --> inceleme
    inceleme --> duzeltme: inceleyen itiraz etti
    duzeltme --> inceleme: yazar düzeltti
    inceleme --> [*]: onaylandı
Editörde aç

3. Bileşik durumlar

Bir durum kendi durum makinesini içerebilir. Bir aşamanın üst düzeyde yalnızca kalabalık yaratacak ama kendi içinde anlamlı adımları varsa bunu kullanın: burada İşleniyor içinde olan biten her şey.

stateDiagram-v2
    [*] --> Kuyrukta
    Kuyrukta --> Isleniyor: işçi aldı

    state Isleniyor {
        [*] --> Dogrulama
        Dogrulama --> Donusturme: şema uygun
        Donusturme --> Yazma: satırlar eşlendi
        Yazma --> [*]
    }

    Isleniyor --> Basarili: hata yok
    Isleniyor --> Basarisiz: özel durum
    Basarisiz --> Kuyrukta: yeniden dene
    Basarili --> [*]
Editörde aç

4. Seçim sözde durumları

`<<choice>>` bir olaya değil bir koşula bağlı dallanmadır. Kararı görünür tutar ama onu nesnenin içinde beklediği bir durummuş gibi göstermez.

stateDiagram-v2
    state degerlendirme <<choice>>
    [*] --> Basvuruldu
    Basvuruldu --> degerlendirme: risk puanı hesapla
    degerlendirme --> Onaylandi: puan < 40
    degerlendirme --> ElleInceleme: puan >= 40
    ElleInceleme --> Onaylandi: uzman kabul etti
    ElleInceleme --> Reddedildi: uzman reddetti
    Onaylandi --> [*]
    Reddedildi --> [*]
Editörde aç

5. Eşzamanlı bölgeler

Kendi satırındaki iki tire bileşik bir durumu aynı anda etkin bölgelere böler. Durum diyagramının yaptığı, akış şemasının ise gerçekten yapamadığı tek şey budur.

stateDiagram-v2
    [*] --> Kayit

    state Kayit {
        [*] --> PostaDogrulanmadi
        PostaDogrulanmadi --> PostaDogrulandi: bağlantıya tıklandı
        --
        [*] --> ProfilBos
        ProfilBos --> ProfilTam: form gönderildi
    }

    Kayit --> Etkin: ikisi de tamam
    Etkin --> [*]
Editörde aç

Durum diyagramı sözdizimi özeti

`stateDiagram` yerine `stateDiagram-v2` kullanın. İkisi de çizilir, ama v2 hâlâ geliştirilen yerleşim motorudur ve bileşik ile eşzamanlı durumları belirgin biçimde daha iyi ele alır.

SözdizimiAnlamı
stateDiagram-v2Diyagramı açar. `stateDiagram` hâlâ çalışır ama eski yerleşimi kullanır.
[*] --> ABaşlangıç durumu — giriş noktası.
A --> [*]Bitiş durumu.
A --> BAdı verilmemiş bir geçiş.
A --> B: olayGeçişi tetikleyen olayla etiketlenmiş geçiş.
state "Etiket" as idBoşluksuz tanımlayıcıyla okunabilir etiket.
state A { ... }Kendi makinesini içeren bileşik durum.
--Bileşik durumun içinde onu eşzamanlı bölgelere böler.
state x <<choice>>Koşula bağlı dallanma noktası.
state f <<fork>> / <<join>>Paralel geçişlere ayırma ve yeniden birleştirme.
note right of A: metinNot ekler. `note left of` de var.
direction LRMakineyi yukarıdan aşağıya değil soldan sağa yerleştirir.
Reklam

Durum diyagramını bozan altı hata

Mermaid 11.12.2 üzerinde yeniden üretildi. İlk dördü çizimi durdurur. Son ikisi daha kötüdür: hiç istifini bozmadan çizilir ve yazdığınızın anlamına gelmeyen bir diyagram döndürür.

Ne görüyorsunuz

Çiziliyor ama bir durumun yerine birkaç kutu beliriyor

Neden

Durum tanımlayıcısının içinde boşluk var. Türkçede yapılması en kolay hata budur, çünkü durum adlarımızın neredeyse hiçbiri tek sözcüğe sığmaz. Mermaid bunu reddetmez, geri kalanı açıklama olarak da almaz: her sözcük için ayrı bir kutu oluşturur. Üretilen durum tanımlayıcıları okunarak ölçüldü: `[*] --> Ödeme bekliyor` iki durum verir — `Ödeme` ve `bekliyor` — ve okun ucunda yalnızca ilki vardır; öteki hiçbir yere bağlanmadan durur. Üç sözcükte üç kutu olur ve şema hiçbir şey söylemeden yana doğru genişler. Açıklama gerçekten vardır ama iki nokta ister — `odemeBekliyor: tahsilat bekleniyor` — bu hata da tam olarak onunla karıştırılır.

Çözüm

`state "Etiket" as id` ile bildirin ve ona hep tanımlayıcısıyla atıfta bulunun.

Hatalı
stateDiagram-v2
    [*] --> Ödeme bekliyor
    Ödeme bekliyor --> Kapandı
Doğru
stateDiagram-v2
    state "Ödeme bekliyor" as odemeBekliyor
    [*] --> odemeBekliyor
    odemeBekliyor --> Kapandı

Ne görüyorsunuz

Parse error, sonu: got 'INVALID'

Neden

Durum tanımlayıcısında tire var. Tireli adlar kendiliğinden akla gelir — `devam-eden`, `on-onayli` — ama tire bir geçiş okunun başlangıcı olarak okunur.

Çözüm

Tanımlayıcı için tek sözcük ya da alt çizgi kullanın, okunacak metni tırnaklı etikete koyun.

Hatalı
stateDiagram-v2
    [*] --> devam-eden
    devam-eden --> Kapandı
Doğru
stateDiagram-v2
    state "Devam eden" as devamEden
    [*] --> devamEden
    devamEden --> Kapandı

Ne görüyorsunuz

Bileşik durumun içinde Parse error

Neden

`{` ile açılmış bileşik durum hiç kapatılmamış. Kapatan süslü parantez kendi satırında olmalıdır.

Çözüm

Bloğu kapatın.

Hatalı
stateDiagram-v2
    [*] --> Dis
    state Dis {
        [*] --> Ic
Doğru
stateDiagram-v2
    [*] --> Dis
    state Dis {
        [*] --> Ic
    }

Ne görüyorsunuz

Lexical error on line N. Unrecognized text.

Neden

Eşzamanlı bölge ayıracı yanlış sayıda tireyle yazılmış. Bileşik durumun içinde, kendi satırında, tam olarak iki tanedir. Üç tire tümüyle başka bir belirteçtir.

Çözüm

Tam olarak `--` kullanın.

Hatalı
stateDiagram-v2
    state Ikisi {
        [*] --> A
        ---
        [*] --> B
    }
Doğru
stateDiagram-v2
    state Ikisi {
        [*] --> A
        --
        [*] --> B
    }

Ne görüyorsunuz

Parse error on line 1, sonu: got 'ID'

Neden

Var olmayan bir sürüm eki. `stateDiagram` ve `stateDiagram-v2` vardır, başka bir şey yoktur: `-v3` ilk satırda düşer.

Çözüm

`stateDiagram-v2` kullanın.

Hatalı
stateDiagram-v3
    [*] --> Taslak
Doğru
stateDiagram-v2
    [*] --> Taslak

Ne görüyorsunuz

Çiziliyor ama seçim düğümü sıradan bir durum gibi çiziliyor

Neden

`<<choice>>` bildirimi onu kullanan geçişlerden sonra geliyor. Mermaid durumu ilk anıldığı anda oluşturur ve sonradan eklenen bir stereotip, oluşturulmuş olanı değiştirmez.

Çözüm

Sözde durumları, onlara atıfta bulunan geçişlerden önce bildirin.

Hatalı
stateDiagram-v2
    [*] --> degerlendirme
    degerlendirme --> Onaylandi
    degerlendirme --> Reddedildi
    state degerlendirme <<choice>>
Doğru
stateDiagram-v2
    state degerlendirme <<choice>>
    [*] --> degerlendirme
    degerlendirme --> Onaylandi
    degerlendirme --> Reddedildi

Çizim üzerine notlar

Bu sitenin kullandığı Mermaid 11.12.2 üzerinde ölçüldü.

Tanımlayıcıdaki boşluk asıl burada sessizce başarısız olur

Türler arasındaki karşılaştırma bilinmeye değer, çünkü aynı dalgınlık çok farklı biçimde cezalandırılır. Akış şemasında düğüm tanımlayıcısındaki boşluk Parse error verir ve hemen haberiniz olur. Durum diyagramında hiçbir şey vermez: diyagram çizilir ve durum, sözcük sayısı kadar kutuya dağılır. Bu, sizi uyaran hata ile susan hata arasındaki farktır. Türkçede durum adlarının neredeyse hiçbiri tek sözcüğe sığmadığı için tek gerçek savunma, alışkanlıktan `state "…" as id` yazmaktır.

Yükseklik durum başına yaklaşık 114 piksel artar

Ölçüldü: üç durum yaklaşık 91×348 viewBox verir, kırk durum ise 100×4566 — durum başına yaklaşık 114 piksel. Akış şemalarındaki gibi genişlik neredeyse kımıldamaz: durum makineleri aşağı doğru büyür. Yaşam döngüsü uzun ve az dallıysa, diyagramın içine `direction LR` yazmak alışılmış çözümdür.

Hem stateDiagram hem stateDiagram-v2 çizilir — tuzak da bu

Sık sık «`stateDiagram-v2` kullanmazsanız hiçbir şey çizilmez» diye okunur. 11.12.2'de bu doğru değil: iki anahtar sözcük de hatasız çizilir. Değişen şey yerleşim kalitesidir, özellikle bileşik ve eşzamanlı durumlarda, ve eskisini kullandığınızda hiçbir uyarı çıkmaz. Bileşik bir durum sıkışık görünüyorsa ya da oklar tuhaf yollardan dolaşıyorsa, diyagramı yeniden yazmaya girişmeden önce hangi anahtar sözcükle açtığınıza bakın.

Etiketler HTML olduğu için PNG dışa aktarımı yeniden çizer

Akış şeması, sınıf ve ER diyagramlarında olduğu gibi, durum etiketleri de SVG içindeki `<foreignObject>` içinde çizilir. Tarayıcılar bunu bir canvas üzerine rasterlemeyi reddettiği için, bu sitenin PNG dışa aktarımı diyagramı önce düz SVG metin etiketleriyle yeniden çizer. PNG doğru ve tam boyutta çıkar; dizgi ekrandakinden çok az farklıdır.

Tema rengi değiştirir, geometriyi asla

Açık ve koyu temalar aynı kaynak için aynı viewBox'ı üretir, dolayısıyla tema değiştiğinde bir durum makinesi yeniden dizilemez.

Başka bir diyagramın daha uygun olduğu durumlar

Etiketleriniz eylem bildiriyorsa — doğrula, gönder, yeniden dene — bir yaşam döngüsünü değil bir süreci anlatıyorsunuz ve dürüst seçim akış şemasıdır. En açık işaret, «bu durumda olan şey nedir?» sorusuna yanıt verememenizdir.

Birden çok bileşenin kendi yaşam döngüsü varsa ve ilginç olan bunların etkileşimiyse, bileşen başına bir durum diyagramı artı etkileşim için bir sıra diyagramı, tek bir devasa makineye üstün gelir.

Her durum her durumla bağlantılıysa, nasıl çizilirse çizilsin diyagram bir yumak olacaktır. Bu genellikle durum diye sıraladığınız şeylerin aslında serbestçe birleşen bayraklar olduğu anlamına gelir; o durumda geçerli birleşimlerin tablosu bir resimden çok daha fazlasını anlatır.

Diğer diyagram türleri

Yazan Dominik Malsch · Son güncelleme:

Editörü aç →