Overview
What the Diagram Maker is and how it works
Was ist der Diagrammersteller?
Der Diagram Maker ist ein Text-First-Architekturdiagramm-Tool, das auf Datro DSL basiert – einer strukturierten, validierten und kanonisch formatierten Sprache zur Beschreibung von Softwaresystemen als Daten, nicht als Bilder.
Anstatt Kästchen auf einer Leinwand zu ziehen, schreiben Sie eine .dtro-Datei. Die Toolchain analysiert es, validiert Architekturregeln, erzwingt WCAG-Kontrastverhältnisse und rendert es in SVG, PNG oder interaktives JSON – alles aus einer einzigen Quelle der Wahrheit.
Schreiben, validieren und rendern Sie Ihr erstes Diagramm in wenigen Minuten.
Warum Datro statt Mermaid oder draw.io?
- Typisierte Knoten – 23 semantische Typen (
service,database,gateway,queue, …) erzeugen automatisch konsistente, formrichtige Diagramme. - Typisierte Kanten – 21 semantische Arten (
http,query,publish,grpc, …) kodieren und gestalten Ihre Verbindungen ohne manuelle Überschreibungen. - Architektonische Einschränkungen – Schreiben Sie Regeln wie
database !-> externalund der Validator erzwingt sie zur Analysezeit, nicht zur Überprüfungszeit. - Kanonischer Formatierer –
datro fmtschreibt jede Datei in ein deterministisches Format um; diff zeigt echte Änderungen, kein Neuformatierungsrauschen. - Importieren und erstellen – Teilen Sie große Diagramme mithilfe von
import, Namespace-Aliasing und der Bereitstellung von Whitelists auf mehrere Dateien auf. - WCAG 2.1-Barrierefreiheit – Kontrastverhältnisse werden automatisch anhand Ihrer Themenpalette überprüft;
W602wird ausgelöst, wenn Sie unter AA fallen. - Maschinenlesbare JSON IR – jedes Diagramm exportiert ein verlustfreies JSON IR, das von jeder Toolchain, jedem CI-System oder jedem benutzerdefinierten Renderer verwendet werden kann.
Wie die Toolchain funktioniert
Jede .dtro-Datei durchläuft vier Phasen, bevor sie zu einem Diagramm wird:
- Parsen – der rekursive Lexer + Parser konvertiert Ihren Quelltext in ein
DatroIR-Objekt. Es wirft nie; Alle Probleme werden alsDiagnostic[]mit genauen Zeilen-/Spaltenpositionen zurückgegeben. - Validieren – 4 Durchgänge: strukturelle Integrität → semantische Einschränkungsprüfung → Infohinweise → WCAG 2.1-Kontrast und Zugänglichkeit der Etikettenlänge.
- Exportieren – die validierte IR wird in DOT (Graphviz), Cytoscape.js JSON oder verlustfreie JSON IR konvertiert.
- Rendern – die DOT-Ausgabe wird an Graphviz übergeben, um eine pixelgenaue SVG- oder PNG-Ausgabe zu erzeugen.
Ein vollständiges Beispiel
Diese .dtro-Datei definiert einen Zahlungsdienst mit Gruppen, typisierten Knoten, semantischen Kanten, einer Einschränkungsregel, Layouthinweisen und einem WCAG-geprüften Farbthema – alles in einer Datei:
#!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 }
}Probieren Sie es jetzt aus
Fügen Sie das obige Beispiel in den Diagram Maker-Editor ein und klicken Sie auf „Validieren“. Sie sehen eine eingegebene Diagnose mit Zeilennummern und können diese dann mit einem Klick in SVG rendern.
Funktionszusammenfassung
Fahren Sie mit Quick Start fort, um Ihr erstes Diagramm zu schreiben, oder springen Sie direkt zu Language Reference, um die vollständige Syntax zu erhalten.