Diagram MakerQuick Start

Quick Start

Build your first diagram in six steps

Быстрый старт

Создайте свою первую проверенную архитектурную схему за шесть шагов. Каждый шаг представляет одну новую концепцию Datro. К концу у вас будет полная, оформленная и проверенная по ограничениям диаграмма, готовая к экспорту в формате SVG.

Открыть конструктор диаграмм

Следуйте инструкциям в интерактивном редакторе — вставьте каждый фрагмент и нажмите «Проверить».

Шаг 1 — Напишите свои первые узлы и ребра

Каждый файл .dtro начинается с магического заголовка. После этого объявите узлы (сущности) и ребра (отношения). Вставьте это в редактор:

arch.dtro
#!DATRO 1.0

node frontend { type: web      label: "React App" }
node backend  { type: service  label: "NestJS API" }
node db       { type: database label: "PostgreSQL" }

edge frontend -> backend { kind: http }
edge backend  -> db      { kind: query }
ℹ️

Требуется магический заголовок

Строка #!DATRO 1.0 в строке 1 является обязательной. Анализатор возвращает E100, если он отсутствует.

Шаг 2. Добавьте `attrs` для более полных метаданных.

Блок attrs содержит произвольные метаданные «ключ-значение». Значения могут быть строками, числами, логическими значениями или массивами. Общие атрибуты: tech, owner, deprecated и sla.

DATRO
node backend {
  type:  service
  label: "NestJS API"
  attrs {
    tech:  "nestjs"
    owner: "platform-team"
  }
}

Атрибуты передаются в JSON IR и отображаются в виде всплывающих подсказок в визуализированном SVG, что полезно для метаданных дежурства и SLA.

Шаг 3 — Добавьте метаданные края

Края имеют вид (тип семантической связи), необязательную метку, вес (относительный трафик) и флаг async. Асинхронные края отображаются в виде пунктирных линий.

DATRO
edge backend -> stripe {
  kind:  http
  label: "charge API"
  async: false
}
FieldTypeRequiredDescription
kindEdgeKind
"http""grpc""query""publish""subscribe""read""write""deploys""monitors""depends""…21 total"
YesТип семантической связи
labelstringNoКраткий текст, отображаемый на краевой линии
weightnumberNoОтносительный вес трафика — более тяжелые края становятся толще.
asyncbooleanNoЕсли установлено значение true, края отображаются пунктирными (шаблон «выстрелил и забыл»).

Шаг 4. Сгруппируйте узлы в кластеры.

Используйте блок group для кластеризации связанных узлов. Группы отображаются как помеченные поля подграфов в SVG. Узел может принадлежать только одной группе.

DATRO
group data_tier {
  label:   "Data Layer"
  members: [db, redis_cache]
}

node redis_cache { type: cache label: "Redis" }

edge backend -> redis_cache { kind: read  label: "session" }
💡

Группы против node.group

Вы также можете назначить группу непосредственно на узле с помощью group: data_tier. Оба стиля действительны; список members блока group имеет приоритет.

Шаг 5 — Добавьте архитектурное ограничение

Ограничения — это архитектурные правила, проверяемые машиной. Валидатор сравнивает их с IR и возвращает ошибки E501 при нарушении правила.

DATRO
constraint {
  id:       "no-db-external"
  rule:     "database !-> external"
  message:  "Databases must not connect to external services"
  severity: error
}

Правило database !-> external означает: ни один узел типа database не может иметь направленного ребра к любому узлу типа external. Это блокирует случайные прямые вызовы БД → сторонние API.

Шаг 6. Добавьте подсказки по макету и тему.

Управляйте расположением диаграммы с помощью блока layout и определяйте цветовую палитру с помощью блока theme. Проверка доступности срабатывает W602 если какой-либо цвет падает ниже контрастности WCAG AA.

DATRO
layout { direction: LR  algo: dagre  node_sep: 60  rank_sep: 120 }

theme {
  palette {
    service:    "#D0E8FF"
    database:   "#FFE8C0"
    web:        "#E8D0FF"
    cache:      "#C0FFE8"
    background: "#FFFFFF"
  }
  accessibility { min_contrast: AA }
}
💡

Контраст WCAG автоматический

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

Следующие шаги

  • Прочтите Language Reference для получения полного синтаксиса каждого типа блока.
  • Используйте CLI Reference для проверки, форматирования и экспорта из командной строки.
  • Узнайте, как редактировать документы embed diagrams in Markdown с помощью плагина примечаний или уценки.
Открыть конструктор диаграмм

Ваша диаграмма готова к рендерингу — нажмите «Рендеринг» → SVG на панели инструментов редактора.

Schema v1 · Updated September 2026