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é.
É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 !-> externalet le validateur les applique au moment de l'analyse, pas au moment de la révision. - Formateur canonique —
datro fmtréé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 ;
W602se 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 :
- 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 formeDiagnostic[]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 :
#!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
Continuez vers Quick Start pour écrire votre premier diagramme, ou passez directement au Language Reference pour la syntaxe complète.