The Diagram Maker is a text-first architecture diagramming tool built on the Datro DSL — a structured, validated, and canonically-formatted language for describing software systems as data, not pictures.

Instead of dragging boxes on a canvas, you write a .dtro file. The toolchain parses it, validates architectural rules, enforces WCAG contrast ratios, and renders it to SVG, PNG, or interactive JSON — all from a single source of truth.

• Typed nodes — 23 semantic types (service, database, gateway, queue, …) produce consistent, shape-correct diagrams automatically.
• Typed edges — 21 semantic kinds (http, query, publish, grpc, …) colour-code and style your connections without manual overrides.
• Architectural constraints — write rules like database !-> external and the validator enforces them at parse time, not review time.
• Canonical formatter — datro fmt rewrites every file to a deterministic format; diff shows real changes, not reformatting noise.
• Import & compose — split large diagrams across files using import, namespace aliasing, and expose whitelists.
• WCAG 2.1 accessibility — contrast ratios are checked automatically against your theme palette; W602 fires when you fall below AA.
• Machine-readable JSON IR — every diagram exports a lossless JSON IR consumable by any toolchain, CI system, or custom renderer.

Every .dtro file passes through four stages before it becomes a diagram:

• Parse — the recursive-descent lexer + parser converts your source text into a DatroIR object. It never throws; all problems are returned as Diagnostic[] with precise line/column locations.
• Validate — 4 passes: structural integrity → semantic constraint checking → info hints → WCAG 2.1 contrast & label-length accessibility.
• Export — the validated IR is converted to DOT (Graphviz), Cytoscape.js JSON, or lossless JSON IR.
• Render — the DOT output is passed to Graphviz to produce SVG or PNG pixel-perfect output.

This .dtro file defines a payment service with groups, typed nodes, semantic edges, a constraint rule, layout hints, and a WCAG-checked colour theme — all in one 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 }
}

Continue to Quick Start to write your first diagram, or jump straight to the Language Reference for the full syntax.