Інструменти й релізи
Reladraw: декларативна мова діаграм із відносним позиціонуванням для ШІ-агентів
Reladraw — це нова мова розмітки діаграм та утиліта командного рядка без зовнішніх залежностей, що використовує відносне позиціонування замість авторозкладки чи абсолютних координат. Проєкт має навичку для Claude Code, Codex і Cursor.
27 вересня 2026 р. 3 хв читання
Куратор Oleksandr Kuzmenko, AI Product EngineerОновлено 27 вересня 2026 р.Джерела вказані в кожному матеріалі
За участі AI · перевірено редакторомЯк ми використовуємо AI
Вплив: Середній
Чому це важливо
Ви можете генерувати точні архітектурні діаграми за допомогою ШІ-агентів без боротьби з авторозміткою Mermaid чи координатами draw.io.
TL;DR
- 01Забезпечує відносне позиціонування без ручного обчислення координат
- 02Компілюється у SVG за допомогою рушія на TypeScript без сторонніх залежностей
- 03Встановлюється в один рядок як навичка для Claude Code, Cursor та Codex
Ключові факти
- Поточна версія
- v0.8.0
- Залежності
- 0 (TypeScript CLI без залежностей)
- Ліцензія
- Apache-2.0
Баланс між декларативністю та контролем
Reladraw вирішує дилему розмітки діаграм:
- Mermaid/Graphviz: декларативний синтаксис, але алгоритм часто непередбачувано переміщує вузли.
- draw.io/Excalidraw: абсолютні координати, які складно точно формувати через запити до ШІ.
- Reladraw: відносні орієнтири, де положення блоків задається відносно сусідніх елементів.
node store "Database" right of app level with app
edge app.api -> store "queries" from: right to: leftІнтеграція з кодинг-агентами
Репозиторій постачається зі спеціальним пакетом для екосистеми skills, що дозволяє прописати інструкції використання у конфігураціях Claude Code, Codex, Cursor чи Copilot.
Спробуй за 2 хвилини
npx skills add reladraw/reladraw -g -a claude-codebash
✓ Коли використовувати
- Створення точних системних і архітектурних діаграм за допомогою агентів
- Збереження діаграм у вигляді простого читабельного тексту під контролем версій Git
✕ Коли НЕ варто
- Коли для побудови величезних графів потрібна автоматична оптимізація розташування
- Для інтерактивного спільного малювання у форматі drag-and-drop
Що зробити сьогодні
- Встановіть навичку для Claude Code: npx skills add reladraw/reladraw -g -a claude-code
- Перевірте рендеринг у SVG командою npx reladraw arch.reladraw -o out.svg
- Використовуйте відносні описи архітектури у запитах до кодинг-агентів
Що каже спільнота
“Awesome! Exactly the problem I was having with drawio and mermaid. Nice work on addressing these problems and sharing it!”
“I always wanted this kind of tool, it’s a great idea”
Джерела