Diagram MakerOverview
🗂️

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.

Diyagram Oluşturucuyu Aç

İ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ıtlamalardatabase !-> external gibi kurallar yazın ve doğrulayıcı bunları inceleme zamanında değil ayrıştırma zamanında uygular.
  • Kanonik biçimlendiricidatro fmt her 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şturimport, 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 W602 ateş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:

1 · Ayrıştırma2 · Doğrula3 · İhracat4 · İşleme
  • Ayrıştırma — özyinelemeli inişli sözlük oluşturucu + ayrıştırıcı, kaynak metninizi bir DatroIR nesnesine dönüştürür. Asla fırlatmaz; tüm problemler kesin satır/sütun konumlarıyla birlikte Diagnostic[] 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:

payment-service.dtro
#!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

23 düğüm türü21 kenar türüWCAG 2.1 AA/AAAJSON Şema Taslağı-07SVG · PNG · DOT · Cytoscapeİçe Aktar / Oluştur

İ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.

Schema v1 · Updated September 2026