Overview

Diagram Maker è uno strumento per la creazione di diagrammi con architettura text-first basato su Datro DSL: un linguaggio strutturato, convalidato e formattato canonicamente per descrivere i sistemi software come dati, non come immagini.

Invece di trascinare caselle su un'area di disegno, scrivi un file .dtro. La toolchain lo analizza, convalida le regole dell'architettura, applica i rapporti di contrasto WCAG e lo esegue il rendering in SVG, PNG o JSON interattivo, il tutto da un'unica fonte di verità.

• Nodi tipizzati — 23 tipi semantici (service, database, gateway, queue, …) producono automaticamente diagrammi coerenti e con forma corretta.
• Bordi digitati: 21 tipi semantici (http, query, publish, grpc, …) codificano con colori e stilino le tue connessioni senza sostituzioni manuali.
• Vincoli architetturali: scrivi regole come database !-> external e il validatore le applica in fase di analisi, non in fase di revisione.
• Formattatore canonico — datro fmt riscrive ogni file in un formato deterministico; diff mostra cambiamenti reali, non rumore di riformattazione.
• Importa e componi: dividi diagrammi di grandi dimensioni tra file utilizzando import, aliasing dello spazio dei nomi ed esponi whitelist.
• Accessibilità WCAG 2.1: i rapporti di contrasto vengono confrontati automaticamente con la tavolozza dei temi; W602 si attiva quando scendi al di sotto di AA.
• JSON IR leggibile dalla macchina: ogni diagramma esporta un materiale di consumo JSON IR senza perdite da qualsiasi toolchain, sistema CI o renderer personalizzato.

Ogni file .dtro passa attraverso quattro fasi prima di diventare un diagramma:

• Parse: il lexer + parser a discesa ricorsiva converte il testo sorgente in un oggetto DatroIR. Non lancia mai; tutti i problemi vengono restituiti come Diagnostic[] con posizioni precise di riga/colonna.
• Convalida — 4 passaggi: integrità strutturale → controllo dei vincoli semantici → suggerimenti informativi → contrasto WCAG 2.1 e accessibilità della lunghezza dell'etichetta.
• Esporta: l'IR convalidato viene convertito in DOT (Graphviz), Cytoscape.js JSON o JSON IR senza perdita di dati.
• Render: l'output DOT viene passato a Graphviz per produrre un output SVG o PNG pixel-perfetto.

Questo file .dtro definisce un servizio di pagamento con gruppi, nodi tipizzati, bordi semantici, una regola di vincolo, suggerimenti di layout e un tema colore controllato da WCAG, tutto in un unico 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 }
}

Continua a Quick Start per scrivere il tuo primo diagramma o passa direttamente a Language Reference per la sintassi completa.