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

Mermaid akış şeması editörü

Akış şeması bir sürecin nasıl ilerlediğini gösterir: hangi adımlar var, nerede dallanıyor ve dallar nerede yeniden birleşiyor. Asıl konu kararların sırasıysa uygundur — bir dağıtım, bir isteğin izlediği yol, bir onay akışı. Asıl konu kimin kiminle ne zaman konuştuğuysa sıra diyagramı daha iyidir.

Bunu editörde aç →Kılavuzu okuyun

İki hata yolu olan bir dağıtım hattı

Bu sitedeki akış şemalarının çoğu bu biçimle başlar: düz bir mutlu yol ve ondan ayrılan karar baklavaları. Sondan bir önceki düğümdeki tırnaklara dikkat edin. Etiket içindeki parantezleri tırnağa almak zorunludur ve bunu unutmak hataların en yaygınıdır.

flowchart TD
    Push[main dalına push] --> Lint[Statik analiz ve tipler]
    Lint --> Test{Testler geçti mi}
    Test -->|Hayır| Uyari[Commit sahibine haber ver]
    Test -->|Evet| Build[İmajı oluştur]
    Build --> Tarama{Güvenlik taraması temiz mi}
    Tarama -->|Hayır| Durdur["Sürümü durdur (elle inceleme)"]
    Tarama -->|Evet| Dagitim[Üretime dağıt]
    Dagitim --> Duman[Duman testleri]
    Duman --> Bitti[Sürüm tamamlandı]

Bunu editörde aç

Reklam

Çözümlü örnekler

1. En küçük akış şeması

İki düğüm ve bir ok. `TD` yukarıdan aşağıya, `LR` soldan sağa gider; enine boyundan uzun bir şema neredeyse her zaman `LR` ile daha iyi okunur.

flowchart TD
    Alim[İsteği al] --> Yanit[Yanıtı gönder]

Editörde aç

2. Etiketli bir dallanma

Süslü parantezler baklava çizer. Dikey çizgiler arasındaki metin düğümü değil kenarı etiketler. Bu ayrım aşağıda, hatalar bölümünde yeniden karşımıza çıkacak.

flowchart TD
    Baslangic[İsteği al] --> Kimlik{Belirteç geçerli mi}
    Kimlik -->|Evet| Isle[İşleyiciyi çalıştır]
    Kimlik -->|Hayır| Reddet[401 döndür]
    Isle --> Tamam[200 döndür]

Editörde aç

3. Biçim bir şey anlatsın

Biçimler bir akış şemasına bilgi eklemenin en ucuz yoludur. Yuvarlak uçlar başlangıç ve bitişi, baklava kararı, silindir ise veri deposunu gösterir.

flowchart LR
    Basla([İşi başlat]) --> Oku[(Postgres'ten oku)]
    Oku --> Var{Yeni satır var mı}
    Var -->|Yok| Bitir([Değişiklik yapmadan bitir])
    Var -->|Var| Donustur[/Veriyi dönüştür/]
    Donustur --> Yaz[(S3'e yaz)]
    Yaz --> Bitir

Editörde aç

4. Sahibe göre gruplamak için alt gruplar

Alt grup ilişkili düğümleri bir çerçeveye alır. En çok işe yaradığı yer aşamaya göre değil sahibe göre gruplamaktır: hangi ekibin ya da hangi servisin neyi üstlendiği görününce devir noktaları ortaya çıkar.

flowchart TD
    subgraph istemci [Tarayıcı]
        UI[Formu gönder]
    end
    subgraph api [Sipariş servisi]
        Dogrula[Girdiyi doğrula]
        Kaydet[Siparişi kaydet]
    end
    subgraph async [Arka plan işleri]
        Posta[Onay postası gönder]
        Fatura[Fatura oluştur]
    end
    UI --> Dogrula
    Dogrula --> Kaydet
    Kaydet --> Posta
    Kaydet --> Fatura

Editörde aç

5. Üst sınırı olan yeniden deneme döngüsü

Akış şemaları döngülerle iyi başa çıkar. Yeniden deneme döngüsü gerçekten işe yaradıkları yerdir, çünkü döngünün gerçek bir çıkışı olup olmadığı çizimden bir bakışta görülür.

flowchart TD
    Gonder[Webhook gönder] --> Yanit{2xx geldi mi}
    Yanit -->|Evet| Basarili[Teslim edildi olarak işaretle]
    Yanit -->|Hayır| Deneme{5 denemeden az mı}
    Deneme -->|Evet| Bekle[Üstel bekleme]
    Bekle --> Gonder
    Deneme -->|Hayır| Kuyruk[Başarısızlar kuyruğuna]

Editörde aç

Akış şeması sözdizimi özeti

Buradaki her şey yalnızca akış şemasına özgüdür. Özellikle oklar: başka türlere taşınamazlar. Sıra diyagramındaki `->>` burada sözdizimi hatasıdır.

Sözdizimi	Anlamı
flowchart TD	Yukarıdan aşağıya. `TB` aynı şey. Bir süreci okumanın olağan yönü.
flowchart LR	Soldan sağa. `RL` de var. Geniş ve sığ akışlar için.
A[Metin]	Dikdörtgen — sıradan bir adım.
A(Metin)	Köşeleri yuvarlatılmış dikdörtgen.
A([Metin])	Stadyum biçimi — geleneksel olarak başlangıç ya da bitiş.
A[(Metin)]	Silindir — veri deposu.
A{Metin}	Baklava — karar.
A[/Metin/]	Paralelkenar — girdi ya da çıktı.
A --> B	Ok.
A --- B	Uçsuz çizgi.
A -.-> B	Noktalı ok — geleneksel olarak eşzamansız ya da isteğe bağlı.
A ==> B	Kalın ok — geleneksel olarak ana yol.
A -->\|metin\| B	Etiketli kenar. Parantez varsa tırnak gerekir.
A["Metin (parantezli)"]	Tırnaklı etiket — parantez, tırnak ve biçim sözdizimi gibi okunan her karakter için gerekli.
subgraph ad [Başlık] ... end	Düğümleri bir çerçevede gruplar. `end` ile kapanır.
%% yorum	Yorum satırı. Çizilmez.

Reklam

Akış şemasını gerçekten bozan altı hata

Hepsi bu sitenin kullandığı motorda (Mermaid 11.12.2) yeniden üretildi. Bozuk sürümü editöre yapıştırın, tam olarak anlatılan hatayı alırsınız; düzeltilmiş olan çizilir. Mermaid hatasını okumanın en kısa yolu sonuna bakmaktır: `got` sözcüğünden sonra ayrıştırıcının takıldığı belirteç yazar.

Ne görüyorsunuz

Parse error, sonu: got 'PS'

Neden

Köşeli parantezli etiketin içinde açan yuvarlak parantez var. Yuvarlak parantezler biçim sözdizimidir — `A(metin)` yuvarlatılmış düğüm demektir — bu yüzden köşeli parantez içindeki çıplak parantez yeni bir biçimin başlangıcı olarak okunur.

Çözüm

Etiketin tamamını çift tırnağa alın. Tırnak içinde her şey metin sayılır.

Hatalı

flowchart TD
    A[Yeniden dene (en fazla 5 kez)] --> B[Bitti]

Doğru

flowchart TD
    A["Yeniden dene (en fazla 5 kez)"] --> B[Bitti]

Ne görüyorsunuz

No diagram type detected matching given configuration

Neden

Anahtar sözcükte noktasız ı var. Bu, Türkçe yazarken karşılaşılan kendine özgü tuzaktır: Türkçe klavyede I tuşu noktasız ı üretir ve `classDıagram` ekranda `classDiagram`dan neredeyse ayırt edilemez. Ölçüldü: `classDıagram` ve `stateDıagram-v2` bu hatayı verir, doğru yazımları ise sorunsuz çizilir. Mermaid'in anahtar sözcükleri İngilizcedir ve harfi harfine eşleşir.

Çözüm

Anahtar sözcükleri noktalı i ile yazın: `classDiagram`, `stateDiagram-v2`, `sequenceDiagram`, `erDiagram`. Diyagramın geri kalanında Türkçe harfler serbesttir.

Hatalı

classDıagram
    class Sipariş

Doğru

classDiagram
    class Sipariş

Ne görüyorsunuz

Düğüme ad verdiğiniz satırda Parse error

Neden

Düğüm tanımlayıcısında boşluk var. Türkçede bundan kaçınmak zordur, çünkü doğal adlar çok sözcüklüdür: «kimlik doğrulama servisi», «kullanıcı veritabanı». Tanımlayıcı oktan önceki belirteçtir ve boşluk onu keser, yerleştirilecek yeri olmayan bir sözcük bırakır.

Çözüm

Tanımlayıcı tek sözcük olsun, okunacak metin etikete girsin. Türkçe harfler tanımlayıcıda sorunsuz çalışır — `Sipariş`, `Tamamlandı` ve `Kargoya` ile sınandı. Yalnızca boşluk bozar.

Hatalı

flowchart TD
    kimlik doğrulama servisi --> kullanıcı veritabanı

Doğru

flowchart TD
    auth[Kimlik doğrulama servisi] --> db[(Kullanıcı veritabanı)]

Ne görüyorsunuz

Parse error, sonu: got 'end'

Neden

`end` sözcüğünü düğüm tanımlayıcısı olarak kullandınız. Küçük harfli `end` bir alt grubu kapatır, bu yüzden ayrıştırıcı düğüm beklediği yerde blok sonu görür. Göründüğünden sık olur: İngilizce örnekleri izlerken şemanın geri kalanı Türkçe olsa bile son düğümün adı `end` olup çıkar.

Çözüm

Büyük harfle yazın ya da düğüme başka bir tanımlayıcı verip sözcüğü etikete taşıyın. `Son` hiçbir sorun çıkarmaz.

Hatalı

flowchart TD
    Basla[Başla] --> end

Doğru

flowchart TD
    Basla[Başla] --> Son[Tamamlandı]

Ne görüyorsunuz

Dikey çizgiler arasındaki kenar etiketinde Parse error

Neden

Kenar etiketinin içinde parantez var. `|…|` arasındaki metin düğüm etiketiyle aynı kısıtlamaya tabidir: orada da parantezler metin değil sözdizimidir.

Çözüm

Kenar etiketini de tırnağa alın.

Hatalı

flowchart TD
    A -->|evet (her zaman)| B

Doğru

flowchart TD
    A -->|"evet (her zaman)"| B

Ne görüyorsunuz

Lexical error on line 1. Unrecognized text.

Neden

Yön geçersiz. Akış şeması yalnızca TB, TD, BT, LR ve RL kabul eder; başka her şey tek bir düğüm okunmadan önce sözcüksel çözümlemede düşer. Bu yüzden hata 1. satırı gösterir, yazım yanlışının yerini değil.

Çözüm

Beşinden birini kullanın. TD ve LR neredeyse her şeyi karşılar.

Hatalı

flowchart YUKARIASAGI
    A --> B

Doğru

flowchart TD
    A --> B

Çizim üzerine notlar

Bunların hiçbiri belgelerden kopyalanmadı: hepsi bu sitenin kullandığı Mermaid 11.12.2 üzerinde ölçüldü. Şema oyuncak olmaktan çıktığında önem kazanan davranışlar bunlar.

Noktasız ı yalnızca anahtar sözcüklerde tehlikeli, geri kalan her yerde serbest

Ayrım tam olarak şurada: Mermaid'in anahtar sözcükleri İngilizcedir ve harfi harfine eşleşir, bu yüzden Türkçe klavyenin ürettiği noktasız ı ile yazılan `classDıagram` «No diagram type detected» hatası verir. Ölçüldü. Buna karşılık aynı harfler tanımlayıcılarda tamamen serbesttir: `Sipariş`, `Tamamlandı`, `Kargoya` ve `Ödendi` yalnızca etiket olarak değil, akış şemasında düğüm, durum diyagramında durum, sınıf diyagramında sınıf adı olarak da çalışır. Yani Türkçe harflerden kaçınmanız gerekmez — yalnızca ilk satırdaki anahtar sözcüğün noktalı i ile yazıldığından emin olun.

Etiketler yalnızca boşluklarda bölünür

Ölçüldü: bir düğüm etiketi 276 piksellik viewBox sınırına kadar genişler, sonra satırlara bölünüp yukarı doğru büyür, satır başına yaklaşık 24 piksel. Şaşırtıcı ayrıntı şu: bölünme yalnızca boşluklarda olur. Türkçenin eklemeli yapısı yüzünden uzun tek sözcükler kolayca oluşur ve tek bir sözcük asla bölünmez; bu sınırı aşarak düğümü uzatır ve tüm şemayı bozar.

Yükseklik düğüm başına yaklaşık 105 piksel artar, genişlik neredeyse durur

Yukarıdan aşağıya bir şemada üç düğüm yaklaşık 126×278 viewBox verir. Kırk düğümde bu 135×4126 olur: genişlik 9 piksel artmış, yükseklik on beş katına çıkmıştır. Uzun bir şema hiçbir ekrana sığmayan ince bir şerittir. Önizlemedeki ortalama düğmesi bunun içindir. Aşırı uzadığında `flowchart LR`e geçmek en boy oranını çoğu kez neredeyse yarıya indirir.

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

Akış şemasının etiketleri SVG içindeki `<foreignObject>` içinde gerçek HTML olarak çizilir. Etiketlerde `<br>` ve biraz Markdown çalışmasının nedeni budur. Aynı nedenle tarayıcı bu SVG'yi bir canvas üzerine boyamayı reddeder: bu sitenin PNG dışa aktarımı uzun süre sessizce SVG dosyası döndürdü. Artık dışa aktarmadan önce şema düz SVG metin etiketleriyle yeniden çiziliyor ve PNG doğru çıkıyor. Bedeli, dışa aktarılan PNG'nin dizgisinin ekrandakinden çok az farklı olması.

Tema rengi değiştirir, geometriyi asla

Aynı şema açık ve koyu temada çizildiğinde viewBox tamamen aynıdır. Tema değiştirmek hiçbir şeyi yeniden dizmez, etiketi kutusundan taşırmaz. Koyu temada tuhaf görünen şey açık temada da aynı ölçüde tuhaftır.

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

Asıl mesele kimin kime ne gönderdiğiyse ve zaman sırası dallanmalardan daha ağır basıyorsa, sıra diyagramı daha iyi okunur ve büyüdükçe de okunur kalmayı sürdürür. Altı katılımcının düğüm adı olarak yazıldığı bir akış şeması, bunu henüz kabul etmemiş bir sıra diyagramıdır.

Bir yordamı değil, bir şeyin geçtiği durumları anlatıyorsanız durum diyagramı kullanın. Ayırt etmesi kolay: düğüm etiketleri «sipariş beklemede», «sipariş gönderildi» gibi durumlarsa bu bir durum makinesidir; «girdiyi doğrula», «posta gönder» gibi eylemlerse akış şemasıdır.

Kırk düğümü aştıktan sonra ise, dürüst olmak gerekirse, hiçbir diyagram durumu kurtarmaz. Ya ortak bir girişi paylaşan birkaç şemaya bölersiniz ya da anlatmaya çalıştığınız şeyin tek bir resme sığmayacak kadar karmaşık olduğunu kabul edersiniz. Bu da başlı başına yararlı bir bilgidir.

Diğer diyagram türleri

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

Editörü aç →