Overview
What the Diagram Maker is and how it works
Что такое конструктор диаграмм?
Diagram Maker — это текстовый инструмент для построения диаграмм архитектуры, созданный на основе Datro DSL — структурированного, проверенного и канонически отформатированного языка для описания программных систем как данных, а не изображений.
Вместо перетаскивания прямоугольников на холсте вы пишете файл .dtro. Инструментальная цепочка анализирует его, проверяет архитектурные правила, обеспечивает соблюдение коэффициентов контрастности WCAG и преобразует его в SVG, PNG или интерактивный JSON — и все это из единого источника достоверных данных.
Напишите, проверьте и визуализируйте свою первую диаграмму за считанные минуты.
Почему Датро, а не Русалка или draw.io?
- Типизированные узлы — 23 семантических типа (
service,database,gateway,queue, …) автоматически создают последовательные диаграммы с правильной формой. - Типизированные края — 21 семантический вид (
http,query,publish,grpc, …) цветовая кодировка и стилизация соединений без ручной настройки. - Архитектурные ограничения — пишите правила типа
database !-> externalи валидатор применяет их во время синтаксического анализа, а не во время проверки. - Канонический форматировщик —
datro fmtперезаписывает каждый файл в детерминированный формат; diff показывает реальные изменения, а не шум переформатирования. - Импорт и составление — разделение больших диаграмм по файлам с помощью
import, псевдонимов пространства имен и предоставление белых списков. - Доступность WCAG 2.1 — коэффициенты контрастности автоматически проверяются по палитре вашей темы;
W602срабатывает, когда ваша АА падает ниже уровня АА. - Машиночитаемый JSON IR — каждая диаграмма экспортирует потребляемый файл JSON IR без потерь с помощью любой цепочки инструментов, системы CI или пользовательского средства визуализации.
Как работает набор инструментов
Каждый файл .dtro проходит четыре этапа, прежде чем стать диаграммой:
- Разбор — лексер + синтаксический анализатор рекурсивного спуска преобразует исходный текст в объект
DatroIR. Он никогда не бросает; все проблемы возвращаются какDiagnostic[]с точным расположением строк/столбцов. - Проверка — 4 прохода: структурная целостность → проверка семантических ограничений → информационные подсказки → контрастность WCAG 2.1 и доступность длины метки.
- Экспорт — проверенный IR преобразуется в DOT (Graphviz), Cytoscape.js JSON или JSON IR без потерь.
- Рендеринг — выходные данные DOT передаются в Graphviz для создания пиксельных результатов в формате SVG или PNG.
Полный пример
Этот файл .dtro определяет платежный сервис с группами, типизированными узлами, семантическими ребрами, правилом ограничений, подсказками по макету и цветовой темой, проверенной WCAG — все в одном файле:
#!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 }
}Попробуйте сейчас
Вставьте приведенный выше пример в редактор Diagram Maker и нажмите «Проверить» — вы увидите введенную диагностику с номерами строк, а затем выполните рендеринг в SVG одним щелчком мыши.
Краткое описание функций
Продолжайте Quick Start, чтобы написать свою первую диаграмму, или сразу перейдите к Language Reference для получения полного синтаксиса.