Diagram MakerOverview
🗂️

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.

Öffnen Sie den Diagrammersteller

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 !-> external und der Validator erzwingt sie zur Analysezeit, nicht zur Überprüfungszeit.
  • Kanonischer Formatiererdatro fmt schreibt 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; W602 wird 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:

1 · Analysieren2 · Validieren3 · Exportieren4 · Rendern
  • Parsen – der rekursive Lexer + Parser konvertiert Ihren Quelltext in ein DatroIR-Objekt. Es wirft nie; Alle Probleme werden als Diagnostic[] 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:

payment-service.dtro
#!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

23 Knotentypen21 KantenartenWCAG 2.1 AA/AAAJSON-Schemaentwurf-07SVG · PNG · DOT · CytoscapeImportieren / Verfassen

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.

Schema v1 · Updated September 2026