Большинство технических диаграмм создаются одним из двух крайних способов: с помощью движков автоматической расстановки (auto-layout) или инструментов абсолютного позиционирования. Инструменты авто-лейаута, такие как Mermaid, Graphviz и D2, позволяют объявлять сущности и связи, но то, где именно они окажутся, решает программа [1]. С другой стороны, такие инструменты, как Figma, Excalidraw и draw.io, дают полный контроль над размещением, но любое редактирование сложной диаграммы требует медленного ручного перемещения элементов [1].
Reladraw предлагает «золотую середину». Это текстовый язык для диаграмм, в котором вы описываете расположение объектов с помощью относительных терминов, а не координат [1]. Вместо того чтобы гадать, как алгоритм отрисует схему, или вручную перетаскивать блоки по холсту, вы задаете структуру простым языком [S1, S3].
Как работает относительное позиционирование
В reladraw каждое положение указывается относительно другого элемента [1]. В языке в любом виде отсутствуют координаты [3]. Вместо этого используются направленные операторы для привязки узлов друг к другу [2].
Например, узел может быть расположен above (над), below (под), left of (слева от) или right of (справа от) другого узла [2]. Также можно использовать комбинированные направления, такие как above-left of, или оператор level with, чтобы два элемента находились на одной центральной линии [2]. Для работы с более сложными группами можно разместить элемент right of A and B, что выровняет его относительно общего прямоугольника, охватывающего оба элемента [2].
Расстояния в reladraw обрабатываются как минимальные зазоры, а не точные измерения [3]. Зазор никогда не является фиксированным числом; вместо этого элементы располагаются настолько близко, насколько позволяют заданные условия [3]. Если вы помещаете узел between (между) двумя другими, он раздвигает их ровно на столько, сколько необходимо для размещения [3]. Если этот средний узел будет удален, оставшиеся элементы автоматически сдвинутся друг к другу [3].
Улучшение построения диаграмм с помощью ИИ-агентов
Традиционные инструменты создания диаграмм создают «слепую зону» для ИИ-агентов. Когда агент генерирует код Mermaid, он лишь предполагает, какой будет макет, который алгоритм определит позже [1]. Агент не видит итоговый SVG, а значит, ему приходится рендерить изображение и анализировать его для поиска ошибок, что делает процесс медленным [3].
С инструментами на основе пикселей проблема иная. Агенту приходится заново восстанавливать всю картину из списка чисел, прежде чем он сможет решить, какие координаты изменить, чтобы переместить один-единственный сервис [1].
Reladraw решает эту проблему, перенося описание расположения непосредственно в исходный файл в виде предложений [1]. Это позволяет агенту:
- Подтверждать намерения, перечитывая исходный код, чтобы убедиться, что база данных находится
under(под) API [S1, S3]. - Изменять схему, просто редактируя предложение, определяющее позицию [1].
- Избежать необходимости интерпретировать сложные системы координат [1].
Однако, поскольку инструмент вычисляет финальный рендер на основе этих утверждений, агент не может подтвердить определенные результаты только с помощью текста [3]. Он не может определить, вышла ли длинная текстовая строка за пределы узла или перекрыли ли друг друга два независимо закрепленных кластера без визуального рендеринга или диагностического отчета [3].
Синтаксис и реализация
Reladraw использует простой формат «одно утверждение на строку» без вложенности или значимых отступов [3]. Это гарантирует, что ни одна строка не зависит от позиции другой [1].
Основные элементы синтаксиса:
- Узлы (Nodes): Определяются как
node name "text"[2]. Имена через точку (например,server.docker) указывают на дочерний узел, при условии, что родитель объявлен первым [2]. - Связи (Edges): Соединения определяются с помощью стрелок, например
edge a -> b[2]. Можно указать изгиб линии с помощьюfrom: right to: left[2]. - Стилизация: Внешний вид настраивается через ключевое слово
styleили в квадратных скобках после текста, что позволяет задавать пользовательские цвета, размеры и формы, такие какrectangle,documentилиdatabase[2].
Чтобы использовать reladraw, вы можете создать файл .reladraw и скомпилировать его в отдельный SVG с помощью команды reladraw diagram.reladraw -o diagram.svg [3]. Для тех, кто использует ИИ-помощников, таких как Claude Code, Cursor или Copilot, можно установить специальный навык агента через npx skills add reladraw/reladraw -g, чтобы обучить модель синтаксису языка [1].
Если вы хотите поэкспериментировать с языком без установки ПО, вы можете воспользоваться песочницей reladraw в браузере, чтобы видеть, как макеты пересчитываются в реальном времени при редактировании исходного кода [S1, S2].
