Diagram MakerOverview
🗂️

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 проходит четыре этапа, прежде чем стать диаграммой:

1 · Разбор2 · Подтвердить3 · Экспорт4 · Рендеринг
  • Разбор — лексер + синтаксический анализатор рекурсивного спуска преобразует исходный текст в объект DatroIR. Он никогда не бросает; все проблемы возвращаются как Diagnostic[] с точным расположением строк/столбцов.
  • Проверка — 4 прохода: структурная целостность → проверка семантических ограничений → информационные подсказки → контрастность WCAG 2.1 и доступность длины метки.
  • Экспорт — проверенный IR преобразуется в DOT (Graphviz), Cytoscape.js JSON или JSON IR без потерь.
  • Рендеринг — выходные данные DOT передаются в Graphviz для создания пиксельных результатов в формате SVG или PNG.

Полный пример

Этот файл .dtro определяет платежный сервис с группами, типизированными узлами, семантическими ребрами, правилом ограничений, подсказками по макету и цветовой темой, проверенной WCAG — все в одном файле:

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

Попробуйте сейчас

Вставьте приведенный выше пример в редактор Diagram Maker и нажмите «Проверить» — вы увидите введенную диагностику с номерами строк, а затем выполните рендеринг в SVG одним щелчком мыши.

Краткое описание функций

23 типа узлов21 вид кромокWCAG 2.1 АА/АААПроект схемы JSON-07SVG · PNG · DOT · ЦитоскейпИмпорт/Создание

Продолжайте Quick Start, чтобы написать свою первую диаграмму, или сразу перейдите к Language Reference для получения полного синтаксиса.

Schema v1 · Updated September 2026