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

Mermaid sıra diyagramı editörü

Sıra diyagramı kimin kiminle hangi sırayla konuştuğunu gösterir. Birkaç taraf arasındaki mesaj alışverişi asıl konuysa uygundur — kimlik doğrulama, ödeme, servisler arası entegrasyon. Katılımcı tekse ve önemli olan dallanmalarsa, akış şeması aynı şeyi daha az gürültüyle anlatır.

Bunu editörde aç →Kılavuzu okuyun

FAST ile anlık para transferi

Bu diyagramın değeri `alt` bloğunda: transferin her zaman aynı yoldan gitmediğini ve iki ayrı sonucu olduğunu gösteriyor. Bir de şuna dikkat edin — gönderen bankası ile alıcı bankası doğrudan konuşmuyor, aradaki takas sistemi konuşuyor. Sıra diyagramının görünür kıldığı, akış şemasının gizlediği tam olarak budur.

sequenceDiagram
    autonumber
    participant G as Gönderen
    participant GB as Gönderen bankası
    participant F as FAST sistemi
    participant AB as Alıcı bankası
    participant A as Alıcı

    G->>GB: IBAN ve tutar gir
    GB->>GB: Bakiye ve limit kontrolü

    alt Tutar FAST limitinin altında
        GB->>F: Transfer talimatı gönder
        F->>AB: Talimatı ilet
        AB-->>F: Hesap doğrulandı
        F-->>GB: Transfer tamamlandı
        AB->>A: Hesabına para geçti bildirimi
    else Tutar limiti aşıyor
        GB-->>G: EFT olarak devam edilsin mi
        G->>GB: Onayla
        GB->>AB: EFT talimatı kuyruğa alındı
    end

    GB-->>G: Dekont oluştur

Bunu editörde aç

Reklam

Çözümlü örnekler

1. İki katılımcı ve bir mesaj

`->>` dolu uçlu oktur, yani bir çağrı. `-->>` noktalıdır ve yanıtı gösterir. Diyagramların çoğunda bu ikili yeter.

sequenceDiagram
    Istemci->>API: Sipariş oluştur
    API-->>Istemci: 201 Created

Editörde aç

2. Uzun adlar için takma adlar

`participant X as Uzun ad` yazmak için kısa bir tanımlayıcı, okumak için düzgün bir ad verir. Katılımcıları başta bildirmek aynı zamanda çizimdeki sıralarını da belirler; bildirmezseniz sırayı ilk geçtikleri yer belirler.

sequenceDiagram
    participant T as Tarayıcı
    participant S as Sipariş servisi
    participant D as Depo servisi

    T->>S: POST /siparisler
    S->>D: Stok ayır
    D-->>S: Ayırma onaylandı
    S-->>T: 201 Created

Editörde aç

3. Etkinleştirme ve kendine çağrı

`activate` ve `deactivate` katılımcının çalıştığını gösteren bir çubuk çizer. Okun sonundaki `+` ve `-` ekleri aynı işi daha az yazarak yapar. Katılımcıdan kendisine giden ok iç işi gösterir.

sequenceDiagram
    participant A as API
    participant V as Veritabanı

    Istemci->>+A: GET /fatura/42
    A->>+V: SELECT fatura
    V-->>-A: Kayıt bulundu
    A->>A: KDV hesapla
    A-->>-Istemci: 200 OK

Editörde aç

4. Seçenekler, koşullar ve döngüler

`alt`/`else` birbirini dışlayan yollar, `opt` olmayabilecek bir blok, `loop` ise tekrardır. Üçü de `end` ile kapanır ve bunu unutmak bu tipin en sık hatasıdır.

sequenceDiagram
    participant K as Kullanıcı
    participant A as API
    participant P as Posta servisi

    K->>A: Hesap açma isteği
    alt E-posta zaten kayıtlı
        A-->>K: 409 Conflict
    else E-posta uygun
        A-->>K: 201 Created
        A->>P: Doğrulama postası gönder
        loop En fazla 3 deneme
            P->>P: Başarısız gönderimi yinele
        end
    end
    opt Kullanıcı bültene izin verdi
        A->>P: Listeye ekle
    end

Editörde aç

5. Notlar ve eşzamanlı işler

`par` aynı anda olan dalları gösterir; akış şemasının ima ettiği ama asla söylemediği şey budur. Notlar da mesaj etiketine sığmayan ayrıntının doğru yeridir.

sequenceDiagram
    participant S as Sipariş servisi
    participant F as e-Fatura servisi
    participant L as Lojistik

    Note over S: Sipariş ödemesi alınmış durumda

    par Faturayı başlat
        S->>F: e-Arşiv fatura oluştur
        F-->>S: Fatura 2026/0431
    and Sevkiyatı başlat
        S->>L: Kargo hazırla
        L-->>S: Takip numarası üretildi
    end

    Note over F,L: İkisi kendi hızında ilerler

Editörde aç

Sıra diyagramı sözdizimi özeti

Ezberlenecek olan oklardır ve yalnızca bu tipe aittirler: akış şemasındaki `-->` burada başka bir şey demektir, buradaki `->>` ise sınıf diyagramında hatadır.

Sözdizimi	Anlamı
sequenceDiagram	Diyagramı açar. Büyük-küçük harfe duyarlı: `sequencediagram` çalışmaz.
participant A	Katılımcıyı bildirir ve konumunu sabitler.
participant A as Ad	Kısa tanımlayıcı, okunur ad.
actor A	participant gibi, ama çöp adam çizer.
A->>B: metin	Dolu uçlu mesaj — çağrı.
A-->>B: metin	Noktalı çizgi — yanıt.
A-)B: metin	Açık uç — eşzamansız mesaj.
A->>A: metin	Katılımcının kendine çağrısı.
activate A / deactivate A	A'nın çalıştığı süreyi işaretler.
A->>+B: / B-->>-A:	Aynı şeyin okun üzerindeki kısa biçimi.
alt koşul ... else ... end	Birbirini dışlayan yollar.
opt koşul ... end	Olmayabilecek blok.
loop metin ... end	Tekrar.
par ... and ... end	Eşzamanlı dallar.
Note over A,B: metin	Bir ya da birkaç katılımcının üstüne not. `Note left of` ve `Note right of` de var.
autonumber	Mesajları kendiliğinden numaralar.

Reklam

Sıra diyagramını bozan altı hata

Hepsi Mermaid 11.12.2 üzerinde yeniden üretildi. En sık görüleni birincisidir ve hata iletisi sorunun yerini en kötü gösterenlerden biridir.

Ne görüyorsunuz

Diyagramın son satırını gösteren Parse error

Neden

Açılmış ve hiç kapanmamış bir blok. `alt`, `opt`, `loop` ve `par` kendi `end`ini ister. Mermaid hatayı girdinin bittiği yerde bildirir, bu yüzden satır numarası kapanmamış bloğu değil dosyanın sonunu gösterir. İç içe iki blok varsa fark etmek gerçekten zorlaşır.

Çözüm

Açık blokları ve yazdığınız `end` sayısını sayın. Hata son satırı gösteriyorsa neredeyse her zaman budur.

Hatalı

sequenceDiagram
    Istemci->>API: İstek
    alt Her şey yolunda
        API-->>Istemci: 200 OK

Doğru

sequenceDiagram
    Istemci->>API: İstek
    alt Her şey yolunda
        API-->>Istemci: 200 OK
    end

Ne görüyorsunuz

No diagram type detected matching given configuration

Neden

Anahtar sözcükte noktasız ı var. Türkçe klavyede I tuşu noktasız ı ürettiği için `sequenceDıagram` yazmak çok kolaydır ve ekranda doğrusundan neredeyse ayırt edilemez. Ölçüldü: `sequenceDıagram` ve `erDıagram` bu hatayı verir. Aynı şey büyük-küçük harf için de geçerlidir — `sequencediagram` da çalışmaz.

Çözüm

Anahtar sözcüğü noktalı i ve büyük D ile yazın: `sequenceDiagram`. Diyagramın geri kalanında Türkçe harfler serbesttir.

Hatalı

sequenceDıagram
    Istemci->>API: Merhaba

Doğru

sequenceDiagram
    Istemci->>API: Merhaba

Ne görüyorsunuz

Çizilir, ama mesaj etiketsiz çıkar

Neden

İki noktadan sonra metin yok. Ölçüldü: Mermaid bunu reddetmez — mesajı boş bir etiketle çizer ve ok açıklamasız kalır. Asıl devrilen şey iki noktanın tümüyle atlanmasıdır: yalnızca `Istemci->>API` yazmak `Expecting 'TXT', got 'NEWLINE'` verir. Yani iki nokta zorunlu, metin değil — tahmin edilenin tam tersi.

Çözüm

İki noktadan sonra bir şey yazın, tek sözcük bile olsa. Etiketsiz bir ok neredeyse hiçbir zaman kastettiğiniz şey değildir.

Hatalı

sequenceDiagram
    Istemci->>API:
    API-->>Istemci: 200

Doğru

sequenceDiagram
    Istemci->>API: Sipariş oluştur
    API-->>Istemci: 200

Ne görüyorsunuz

Uzun koşullu bir `alt` satırından sonra Parse error

Neden

Blok koşulunun içinde satır sonu var. `alt`, `opt` ya da `loop` koşulu tek satıra sığmak zorundadır; böldüğünüzde ikinci yarı mesaj sanılır ve hiçbir yere oturmaz. Türkçede yüklem sona geldiği için koşullar doğal olarak uzar, bu yüzden bölme isteği burada daha güçlüdür.

Çözüm

Koşulu tek satırda tutun. Uzunsa kısaltın, ayrıntıyı nota taşıyın.

Hatalı

sequenceDiagram
    alt Müşterinin hesabında yeterli
    bakiye bulunuyorsa
        A-->>B: Tamam
    end

Doğru

sequenceDiagram
    alt Müşterinin bakiyesi yeterliyse
        A-->>B: Tamam
    end
    Note over A,B: Bakiye günlük limite göre denetlenir

Ne görüyorsunuz

Çizilir, ama bildirmediğiniz bir katılımcı belirir

Neden

Katılımcı adında yazım farkı. Mermaid bir adı ilk gördüğünde katılımcıyı oluşturur, bu yüzden `Alıcı` ve `Alici` iki ayrı sütundur ve hiçbir uyarı gelmez. Türkçede bunun en sık kaynağı noktalı i ile noktasız ı arasındaki karışıklıktır: aynı adı bir yerde `Alıcı`, bir yerde `Alici` yazmak fazladan bir sütun doğurur. Ölçüldü — iki katılımcılık bir diyagram üç sütuna çıkar.

Çözüm

Katılımcıları başta `participant` ile bildirin. Yazım farkını engellemez ama hangi adların doğru olduğunu görünür kılar, fazladan sütun da hemen göze çarpar.

Hatalı

sequenceDiagram
    Gönderen->>Alıcı: Havale gönder
    Alici-->>Gönderen: Onay

Doğru

sequenceDiagram
    participant G as Gönderen
    participant A as Alıcı
    G->>A: Havale gönder
    A-->>G: Onay

Ne görüyorsunuz

Çizilir, ama sütun sırası istediğiniz gibi değil

Neden

Katılımcıları bildirmediniz. Bildirim yoksa sırayı her adın ilk geçtiği yer belirler, bu yüzden diyagramın başına eklenen bir mesaj bütün sütunları yeniden dizip okları birbirinin üstünden geçirebilir. Diyagram doğru kalır, okunurluğu ciddi biçimde düşer.

Çözüm

Bütün katılımcıları başlıkta, görmek istediğiniz sırayla bildirin.

Hatalı

sequenceDiagram
    Banka-->>Gecit: Onaylandı
    Musteri->>Magaza: Siparişi onayla
    Magaza->>Gecit: Provizyon al

Doğru

sequenceDiagram
    participant Musteri
    participant Magaza
    participant Gecit
    participant Banka
    Musteri->>Magaza: Siparişi onayla
    Magaza->>Gecit: Provizyon al
    Gecit->>Banka: İşlemi ilet
    Banka-->>Gecit: Onaylandı

Çizim üzerine notlar

Bu sitenin kullandığı Mermaid 11.12.2 üzerinde ölçüldü. Sıra diyagramı iki somut konuda diğerlerinden farklı davranır.

Genişliği katılımcılar belirler, mesajlar değil

Ölçüldü: iki katılımcı 450 piksel genişliğinde bir viewBox verir, altı katılımcı 1250 — yani eklenen her sütun mesaj içeriğinden bağımsız olarak yaklaşık 200 piksel getirir. Mesajlar yalnızca yükseklik ekler, her biri yaklaşık 46 piksel. Tek istisna şu: mesaj etiketi sütunun en küçük genişliğinden genişse diyagramı gerçekten genişletir — aynı katılımcı çifti yalnızca tek bir mesajın metni uzadığı için 450'den 603 piksele çıktı. Türkçede etiketler eklerle uzadığı için bu İngilizceye göre daha erken olur.

viewBox'ı eksi değerden başlayan tek tip

Sıra diyagramları `0 0` yerine `-50 -10` ile başlayan bir viewBox üretir. Bu bir kusur değil: Mermaid bu payı katılımcı kutuları için ayırır. Yalnızca SVG'yi kendi araçlarınızla işliyorsanız önem taşır, çünkü başlangıcı sıfır varsayan her hesap ilk sütunu keser.

PNG dışa aktarımı burada birebir

Akış şeması ile sınıf, durum ve ER diyagramlarının aksine sıra diyagramı etiketlerini `<foreignObject>` içinde değil düz SVG metni olarak çizer. Bu sayede doğrudan rasterlenebilir: dışa aktarılan PNG, araya yeniden çizim girmeden ve dizgide kayma olmadan ekrandakine karşılık gelir.

Bildirilip kullanılmayan katılımcı yine de çizilir

Hiçbir mesaj göndermeyen ya da almayan bir `participant` diyagramda boş bir sütunla görünür. Bu bazen bilerek yapılır: var olan ama bu akışa katılmayan birini göstermek için. Daha sık görüleni ise katılımcının son mesajı silinip bildiriminin silinmesinin unutulmasıdır.

Tema rengi değiştirir, geometriyi asla

Aynı diyagram açık ve koyu temada aynı viewBox'ı verir; tema değiştiğinde sütunlar kaymaz, bloklar boyut değiştirmez.

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

Katılımcı tekse gösterilecek bir sıra yoktur. Tek sütunlu ve kendine giden oklarla dolu bir diyagram, rahatsız bir biçimde yazılmış akış şemasıdır.

Birkaç tarafın konuşmasını değil, bir şeyin geçtiği durumları anlatmak istiyorsanız durum diyagramı kullanın. İşaret açıktır: aynı mesajı farklı koşullarla tekrar tekrar yazıyorsanız, karşınızdaki şey bir durum makinesidir.

Alışveriş on beş mesajı aşıyorsa bölün. Altmış mesajlık bir sıra diyagramı teknik olarak doğrudur ve insan için kullanışsızdır; hemen her zaman aşama başına bir tane olmak üzere üç diyagram olarak, aralarına bir notla bağlanarak daha iyi okunur.

Diğer diyagram türleri

Yazan Dominik Malsch · Son güncelleme: 8 Eylül 2026

Editörü aç →