Overview

Diagram Maker adalah alat diagram arsitektur teks pertama yang dibangun di atas Datro DSL — bahasa yang terstruktur, tervalidasi, dan diformat secara kanonik untuk mendeskripsikan sistem perangkat lunak sebagai data, bukan gambar.

Daripada menyeret kotak di kanvas, Anda menulis file .dtro. Toolchain menguraikannya, memvalidasi aturan arsitektur, menerapkan rasio kontras WCAG, dan merendernya menjadi SVG, PNG, atau JSON interaktif — semuanya dari satu sumber kebenaran.

• Node yang diketik — 23 tipe semantik (service, database, gateway, queue, …) menghasilkan diagram yang konsisten dan bentuk yang benar secara otomatis.
• Tepi yang diketik — 21 jenis semantik (http, query, publish, grpc, …) kode warna dan gaya koneksi Anda tanpa penggantian manual.
• Kendala arsitektur — menulis aturan seperti database !-> external dan validator menerapkannya pada waktu penguraian, bukan waktu peninjauan.
• Canonical formatter — datro fmt menulis ulang setiap file ke format deterministik; diff menunjukkan perubahan nyata, bukan memformat ulang noise.
• Impor & tulis — membagi diagram besar ke seluruh file menggunakan import, aliasing namespace, dan mengekspos daftar putih.
• Aksesibilitas WCAG 2.1 — rasio kontras diperiksa secara otomatis terhadap palet tema Anda; W602 menyala ketika Anda berada di bawah AA.
• JSON IR yang dapat dibaca mesin — setiap diagram mengekspor JSON IR lossless yang dapat digunakan oleh rantai alat, sistem CI, atau perender khusus apa pun.

Setiap file .dtro melewati empat tahap sebelum menjadi diagram:

• Parse — lexer + parser keturunan rekursif mengonversi teks sumber Anda menjadi objek DatroIR. Ia tidak pernah melempar; semua masalah dikembalikan sebagai Diagnostic[] dengan lokasi garis/kolom yang tepat.
• Validasi — 4 lintasan: integritas struktural → pemeriksaan batasan semantik → petunjuk info → kontras WCAG 2.1 & aksesibilitas panjang label.
• Ekspor — IR yang divalidasi dikonversi ke DOT (Graphviz), Cytoscape.js JSON, atau lossless JSON IR.
• Render — keluaran DOT diteruskan ke Graphviz untuk menghasilkan keluaran sempurna piksel SVG atau PNG.

File .dtro ini mendefinisikan layanan pembayaran dengan grup, node yang diketik, tepi semantik, aturan batasan, petunjuk tata letak, dan tema warna yang diperiksa WCAG — semuanya dalam satu file:

#!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 }
}

Lanjutkan ke Quick Start untuk menulis diagram pertama Anda, atau langsung ke Language Reference untuk sintaks selengkapnya.