Overview

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.