ИИтог

Reladraw: язык диаграмм, где позиции элементов вы задаёте сами

инструментыРедакция ИИтогHacker News🔥59Рейтинг ИИтог59Влияние42Новизна50Релевантность70Неожиданность28Участники12Достоверность83
Reladraw: язык диаграмм, где позиции элементов вы задаёте сами

На Hacker News в рубрике Show HN представлен проект reladraw, текстовый язык и инструмент командной строки для рисования диаграмм, который компилирует файл с расширением .reladraw в SVG-изображение. Автор объясняет идею через сравнение с существующими инструментами: языки вроде Mermaid, Graphviz и D2 позволяют только объявить блоки и связи между ними, а расположение на схеме они рассчитывают автоматически, по словам автора, это не подходит, если в голове уже есть конкретная картинка. Другая крайность, редакторы вроде draw.io или Excalidraw, где позиции задаются вручную и абсолютно: человеку приходится таскать блоки мышью, а ИИ-агенту, пересчитывать координаты и редактировать громоздкий XML-код. Reladraw, по замыслу автора, находится между этими крайностями: он сохраняет удобство языка описания диаграмм, как в Mermaid, но при этом даёт такую же выразительность и возможность точной расстановки элементов, как в draw.io. Достигается это за счёт относительных позиций, не нужно вручную подбирать координаты, вместо этого элементы описываются через отношения друг к другу. Пример синтаксиса из источника: блок app с подписью "Web app", вложенные в него app.ui ("Interface") и app.api ("API", расположен below app.ui, то есть под ним), отдельный блок store ("Database"), размещённый right of app (справа от app) и level with app (на одном уровне с ним), а также связь-стрелка от app.api к store с подписью "queries". Инструмент устанавливается через npm install -g reladraw, после чего диаграмма собирается командой reladraw diagram.reladraw -o diagram.svg. Отдельно предусмотрена установка "скилла" для ИИ-агентов через npx skills add reladraw/reladraw -g, который работает с Claude Code, Codex, Cursor, Copilot и другими агентами, каждый со своей папкой скиллов; команду можно ограничить конкретным агентом или текущим проектом. Текущая версия, 0.8.0, автор описывает проект как раннюю стадию, но рабочую: парсер, движок раскладки и рендерер SVG написаны на TypeScript без рантайм-зависимостей. Синтаксис языка ещё не стабилен и, по словам автора, будет меняться. Проект распространяется по лицензии Apache-2.0, но она покрывает только код: права на имя "reladraw", логотип и другие знаки проекта лицензия не даёт. Автор пишет, что открытые issue сейчас полезнее pull request'ов, поскольку язык быстро меняется, и особенно ценны сообщения о диаграммах, которые пока не получается описать средствами reladraw.

Ключевые факты

  • Reladraw, текстовый язык и CLI-инструмент, который компилирует файл .reladraw в SVG-диаграмму
  • В отличие от Mermaid, Graphviz и D2 (автоматическая раскладка) и от draw.io/Excalidraw (ручное абсолютное позиционирование), reladraw использует относительные позиции элементов друг относительно друга
  • Синтаксис включает отношения вроде below (под), right of (справа от) и level with (на одном уровне с) для расстановки блоков без ручного подбора координат
  • Текущая версия, 0.8.0, проект на ранней стадии, написан на TypeScript без рантайм-зависимостей, синтаксис языка ещё не стабилен
  • Есть отдельная установка "скилла" для ИИ-агентов (Claude Code, Codex, Cursor, Copilot и других) через npx skills add

Почему это важно

Reladraw пытается закрыть нишу между двумя типами инструментов для диаграмм: языками с автоматической раскладкой (Mermaid, Graphviz, D2), где нельзя точно управлять расположением элементов, и редакторами с ручным абсолютным позиционированием (draw.io, Excalidraw), где для любой правки нужно заново двигать блоки или редактировать координаты. Относительные позиции, компромисс, который может быть удобен как людям, так и ИИ-агентам, которым проще описать диаграмму текстом, чем пересчитывать XML-координаты.

Кому это важно

Разработчикам и техническим писателям, которые документируют архитектуру систем через диаграммы-как-код, а также тем, кто настраивает ИИ-агентов на автоматическую генерацию схем, для них в проекте предусмотрена отдельная установка "скилла" под конкретных агентов.

Как это применить

Инструмент ставится командой npm install -g reladraw, диаграмма описывается в текстовом файле с расширением .reladraw и компилируется в SVG командой reladraw diagram.reladraw -o diagram.svg. Для использования агентами есть отдельная команда npx skills add reladraw/reladraw, которая устанавливает инструкции для Claude Code, Codex, Cursor, Copilot и других инструментов, глобально или в рамках одного проекта.

Можно ли доверять

Это авторский Show HN-пост о собственном проекте с открытым README на GitHub, а не независимый обзор: все приведённые факты и формулировки, со слов автора. В источнике не указаны ни имя автора или сопровождающих проекта, ни дата выхода версии 0.8.0, ни какие-либо замеры производительности или сравнения с Mermaid, Graphviz, D2, draw.io или Excalidraw, ни данные о том, кто и сколько раз уже пользовался инструментом.

Риски и подводные камни

Автор прямо предупреждает, что язык ещё не стабилен и синтаксис будет меняться, то есть уже написанные диаграммы могут потребовать переделки в будущих версиях. Лицензия Apache-2.0 покрывает только код: права на само имя "reladraw", логотип и другие знаки проекта она не даёт. Поскольку проект на ранней стадии и работает как утилита с новым синтаксисом, стоит ожидать шероховатостей и отсутствия части возможностей более зрелых инструментов.

«Reladraw находится между этими двумя крайностями: он стремится сохранить преимущества языка описания диаграмм, как в Mermaid, но при этом дать такую же выразительность и возможность точной расстановки элементов, как в draw.io.»

— автор проекта, README reladraw