User -> API -> Database gibi oklar yazın, yerleşimi hazır bir mimari veya akış diyagramı alın. Genel görünüm için grupları daraltın, ayrıntılı akış için adımları numaralandırın.
100%
Solda User -> App -> Database gibi bir satır yazın ya da kutu eklemek için buraya çift tıklayın.
Taşımak için kutuları sürükleyin. Yeniden adlandırmak veya kutu eklemek için çift tıklayın. Bağlamak için kutudaki noktayı sürükleyin. Ctrl+Z geri alır.
Hiçbir şey yüklenmez: diyagram tarayıcınızda ve paylaştığınız bağlantılarda kalır.
Hakkında Sistem Diyagramı Oluşturucu
Bir beyaz tahta aracında her kutuyu ve oku siz çizer, elle hizalarsınız. Burada neyin neyle konuştuğunu ok başına bir satır yazarsınız, yerleşim kendiliğinden yapılır. İlgili servisleri bir gruba koyun, genel görünüm için tek kutuya daraltın; ayrıntı için yeniden açın.
Ne işe yarar
Yazarken güncellenen, soldan sağa ya da yukarıdan aşağıya otomatik yerleşim.
Şekiller addan seçilir: DB veritabanı, Kafka kuyruk, User kişi, ? ile biten ad karar olur.
Tek kutuya daralan gruplar sayesinde tek diyagram hem genel hem ayrıntılı görünüm sunar.
Kutuları tuvalde de sürükleyin, bağlayın, yeniden adlandırın ve ekleyin; her değişiklik metne yazılır.
Numaralı adımlar, elle çizim stili, PNG ve SVG dışa aktarma ve paylaşım bağlantıları. Hiçbir şey yüklenmez.
Nasıl çalışır
1User -> Web App -> Orders DB gibi satırlar yazın ya da bir şablonla başlayın.
2Ad { ... } ile grup, iki noktadan sonra etiket ve asenkron çağrılar için --> ekleyin.
3Genel bakış ile Ayrıntılar arasında geçin, kutuları sürükleyerek düzenleyin, sonra dışa aktarın veya bağlantı kopyalayın.
Sorular
Excalidraw'dan farkı ne?
Excalidraw serbest bir beyaz tahtadır: her şekli ve oku siz yerleştirirsiniz. Burada metin diyagramın kendisidir ve yerleşim otomatiktir; yeni bir servis eklemek kutu çizip hizalamak yerine tek satırdır. Serbest bir taslak için Excalidraw hâlâ daha uygundur.
Hem genel hem ayrıntılı görünümü nasıl gösteririm?
İlgili kutuları Ad { ... } ile bir gruba koyun. Genel bakış her grubu tek kutuya daraltır ve oklarını birleştirir; Ayrıntılar yeniden açar. Bir grubu başlığından tek tek de daraltabilirsiniz.
Diyagramım bir yerde saklanıyor mu?
Hayır. Tarayıcınızda çizilir ve onun yerel depolamasında tutulur. Paylaşım bağlantısı diyagramı bağlantının içinde, tarayıcıların sunucuya hiç göndermediği # işaretinden sonra taşır.
Mermaid akış şemasını yapıştırabilir miyim?
Doğrudan hayır; Mermaid içe aktarma yok. A -> B gibi düz satırlar çalışır, ancak üç şey farklıdır. graph TD başlık satırını silin, yoksa bir kutuya dönüşür, onun yerine direction: down yazın. Köşeli parantez içindeki Mermaid etiketlerini kaldırın, çünkü burada [ ] içindeki metin şekil ve renk etiketi olarak okunur. Ayrıca --> burada eşzamansız çağrı için kesikli ok çizer, Mermaid ise bunu normal ok sayar; düz ok için -> kullanın.
A -> B dışında neler yazabilirim?
A -> B: metin oka etiket koyar, A --> B kesikli ok, A <-> B çift yönlü ok çizer, A <- B ise geriye bakar. Ad [db, blue] şekil ve renk belirler; şekiller service, db, cache, queue, actor, client, storage, external, decision, terminal ve note. title: diyagrama ad verir, direction: down yukarıdan aşağıya dizer, # veya // ile başlayan satır yorumdur. Bir diyagram en fazla 300 kutu, 600 ok ve 20.000 karakter metin alır.