Diagram MakerOverview
🗂️

Overview

What the Diagram Maker is and how it works

Qu'est-ce que le créateur de diagrammes ?

Diagram Maker est un outil de création de diagrammes d'architecture axé sur le texte, construit sur Datro DSL, un langage structuré, validé et formaté canoniquement pour décrire les systèmes logiciels sous forme de données et non d'images.

Au lieu de faire glisser des cases sur un canevas, vous écrivez un fichier .dtro. La chaîne d'outils l'analyse, valide les règles architecturales, applique les rapports de contraste WCAG et le restitue au format SVG, PNG ou JSON interactif, le tout à partir d'une source unique de vérité.

Ouvrir le créateur de diagrammes

Écrivez, validez et affichez votre premier diagramme en quelques minutes.

Pourquoi Datro plutôt que Mermaid ou draw.io ?

  • Nœuds typés — 23 types sémantiques (service, database, gateway, queue, …) produisent automatiquement des diagrammes cohérents et de forme correcte.
  • Bords typés — 21 types sémantiques (http, query, publish, grpc, …) codez par couleur et stylisez vos connexions sans remplacement manuel.
  • Contraintes architecturales — écrivez des règles comme database !-> external et le validateur les applique au moment de l'analyse, pas au moment de la révision.
  • Formateur canoniquedatro fmt réécrit chaque fichier dans un format déterministe ; diff montre de vrais changements, pas de bruit de reformatage.
  • Importer et composer : divisez les grands diagrammes en fichiers à l'aide de import, de l'alias d'espace de noms et exposez des listes blanches.
  • Accessibilité WCAG 2.1 — les taux de contraste sont automatiquement vérifiés par rapport à votre palette de thèmes ; W602 se déclenche lorsque vous tombez en dessous de AA.
  • JSON IR lisible par machine — chaque diagramme exporte un consommable JSON IR sans perte par n'importe quelle chaîne d'outils, système CI ou moteur de rendu personnalisé.

Comment fonctionne la chaîne d'outils

Chaque fichier .dtro passe par quatre étapes avant de devenir un diagramme :

1 · Analyser2 · Valider3 · Exporter4 · Rendu
  • Parse — le lexer + analyseur à descente récursive convertit votre texte source en un objet DatroIR. Il ne lance jamais ; tous les problèmes sont renvoyés sous la forme Diagnostic[] avec des emplacements précis de ligne/colonne.
  • Valider — 4 passes : intégrité structurelle → vérification des contraintes sémantiques → conseils d'information → contraste WCAG 2.1 et accessibilité à la longueur des étiquettes.
  • Exporter — l'IR validé est converti en DOT (Graphviz), Cytoscape.js JSON ou JSON IR sans perte.
  • Render — la sortie DOT est transmise à Graphviz pour produire une sortie SVG ou PNG au pixel près.

Un exemple complet

Ce fichier .dtro définit un service de paiement avec des groupes, des nœuds typés, des bords sémantiques, une règle de contrainte, des conseils de mise en page et un thème de couleurs vérifié par WCAG, le tout dans un seul fichier :

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 }
}
💡

Essayez-le maintenant

Collez l'exemple ci-dessus dans l'éditeur Diagram Maker et cliquez sur Valider. Vous verrez les diagnostics saisis avec les numéros de ligne, puis rendus au format SVG en un seul clic.

Résumé des fonctionnalités

23 types de nœuds21 types de bordsWCAG 2.1 AA/AAAProjet de schéma JSON-07SVG · PNG · POINT · CytoscapeImporter / Composer

Continuez vers Quick Start pour écrire votre premier diagramme, ou passez directement au Language Reference pour la syntaxe complète.

Schema v1 · Updated September 2026