Overview
What the Diagram Maker is and how it works
Diyagram Oluşturucu Nedir?
Diagram Maker, yazılım sistemlerini resim olarak değil veri olarak tanımlamak için yapılandırılmış, doğrulanmış ve kanonik olarak biçimlendirilmiş bir dil olan Datro DSL üzerine kurulmuş, metin öncelikli bir mimari diyagram oluşturma aracıdır.
Kutuları tuval üzerinde sürüklemek yerine bir .dtro dosyası yazarsınız. Araç zinciri bunu ayrıştırır, mimari kuralları doğrular, WCAG kontrast oranlarını uygular ve bunları SVG, PNG veya etkileşimli JSON'a dönüştürür; üstelik bunların tümü tek bir doğruluk kaynağından sağlanır.
İlk diyagramınızı birkaç dakika içinde yazın, doğrulayın ve işleyin.
Neden Denizkızı veya Draw.io yerine Datro?
- Yazılan düğümler — 23 anlamsal tür (
service,database,gateway,queue, …) otomatik olarak tutarlı, şekli doğru diyagramlar üretir. - Yazılan kenarlar — 21 anlamsal tür (
http,query,publish,grpc, …) manuel geçersiz kılmalar olmadan bağlantılarınızı renk koduyla kodlayın ve stillendirin. - Mimari kısıtlamalar —
database !-> externalgibi kurallar yazın ve doğrulayıcı bunları inceleme zamanında değil ayrıştırma zamanında uygular. - Kanonik biçimlendirici —
datro fmther dosyayı deterministik bir biçime yeniden yazar; diff, gürültüyü yeniden biçimlendirmek yerine gerçek değişiklikleri gösterir. - İçe aktar ve oluştur —
import, ad alanı takma adını kullanarak büyük diyagramları dosyalara bölün ve beyaz listeleri ortaya çıkarın. - WCAG 2.1 erişilebilirliği — kontrast oranları tema paletinize göre otomatik olarak kontrol edilir; AA'nın altına düştüğünüzde
W602ateşlenir. - Makine tarafından okunabilen JSON IR — her şema, herhangi bir araç zinciri, CI sistemi veya özel oluşturucu tarafından kayıpsız bir JSON IR sarf malzemesinin dışa aktarımını sağlar.
Alet zinciri nasıl çalışır?
Her .dtro dosyası bir diyagram haline gelmeden önce dört aşamadan geçer:
- Ayrıştırma — özyinelemeli inişli sözlük oluşturucu + ayrıştırıcı, kaynak metninizi bir
DatroIRnesnesine dönüştürür. Asla fırlatmaz; tüm problemler kesin satır/sütun konumlarıyla birlikteDiagnostic[]olarak döndürülür. - Doğrulama — 4 geçiş: yapısal bütünlük → anlamsal kısıtlama kontrolü → bilgi ipuçları → WCAG 2.1 kontrast ve etiket uzunluğu erişilebilirliği.
- Dışa aktarma — doğrulanan IR, DOT (Graphviz), Cytoscape.js JSON veya kayıpsız JSON IR'ye dönüştürülür.
- Render — DOT çıktısı, SVG veya PNG piksel kusursuzluğunda çıktı üretmek için Graphviz'e aktarılır.
Tam bir örnek
Bu .dtro dosyası, grupları, yazılan düğümleri, anlamsal kenarları, kısıtlama kuralını, düzen ipuçlarını ve WCAG tarafından kontrol edilen renk temasını içeren bir ödeme hizmetini tek bir dosyada tanımlar:
#!DATRO 1.0
meta {
title: "Payment Service"
version: "2.0.0"
owner: "payments-team"
sla: "99.95%"
}
group data {
label: "Data Layer"
members: [payments_db, fraud_cache]
}
node api_gw { type: gateway label: "API Gateway" }
node payment_svc { type: service label: "Payment Service" attrs { tech: "nestjs" } }
node payments_db { type: database label: "Payments DB" attrs { tech: "postgres" } }
node fraud_cache { type: cache label: "Fraud Cache" attrs { tech: "redis" } }
node stripe { type: external label: "Stripe" }
edge api_gw -> payment_svc { kind: http label: "POST /charge" }
edge payment_svc -> payments_db { kind: query }
edge payment_svc -> fraud_cache { kind: read }
edge payment_svc -> stripe { kind: http label: "charge API" }
constraint {
id: "no-db-external"
rule: "database !-> external"
message: "Databases must not call external APIs"
severity: error
}
layout { direction: LR algo: dagre }
theme {
palette { gateway: "#FFD0D0" service: "#D0E8FF" database: "#FFE8C0" cache: "#C0FFE8" }
accessibility { min_contrast: AA }
}Şimdi dene
Yukarıdaki örneği Diagram Maker düzenleyicisine yapıştırın ve Doğrula'yı tıklayın; yazılan teşhisleri satır numaralarıyla birlikte göreceksiniz, ardından tek tıklamayla SVG'ye dönüştüreceksiniz.
Özellik özeti
İlk diyagramınızı yazmak için Quick Start ile devam edin veya tam söz dizimi için doğrudan Language Reference'e geçin.