Красивые диаграммы без Figma и тяжелых редакторов

Каждый раз, когда нужно нарисовать архитектуру приложения или последовательность вызовов API, мы упираемся в одну и ту же проблему. Можно пойти в Figma и потратить полчаса на подбор скруглений, шрифтов и правильных оттенков серого. Можно попросить Claude или ChatGPT сгенерировать Mermaid-код, но на выходе получится стандартная схема с ядовитыми цветами и странной версткой.

Автор репозитория diagram-design Кэтрин Лавери столкнулась с этой рутиной при ведении собственного блога. Вместо того чтобы каждый раз двигать пиксели вручную, она создала набор инструкций для Claude Code, Pi и Codex. Проект превращает LLM в аккуратного верстальщика, который генерирует автономный HTML и SVG без сторонних библиотек, JavaScript или тяжелых билдов.

Зачем менять подход к генерации диаграмм

Главная идея проекта заключается в жестких правилах дизайна. Обычный промпт выдает хаотичные блоки. Набор правил из diagram-design заставляет модель соблюдать сетку с кратностями 4 пикселя, контролировать плотность элементов и использовать акцентный цвет только для 1–2 главных узлов.

Вам не нужно учить новые DSL или разбираться с синтаксисом. Вы просите агента показать архитектуру сервиса, а он выдает готовый HTML-файл с вложенным SVG. Его можно открыть прямо в браузере, вставить в статью или импортировать в презентацию.

Четыре главных возможности инструмента

Первая фича — автоматический онбординг бренда. Вы даете агенту команду со ссылкой на ваш сайт. Скрипт скачивает главную страницу, разбирает стили, находит цвета фона, текста и акцентов, а затем считывает шрифты. Перед сохранением настроек инструмент автоматически проверяет контрастность по стандарту WCAG AA. Если цвет текста плохо читается на выбранном фоне, система предложит скорректированную палитру.

Вторая фича — перерисовка существующих диаграмм. Если у вас есть файлы .drawio, .mmd или схемы Mermaid прямо внутри Markdown, вы отправляете их агенту. Инструмент перерабатывает схему под заданный формат и аудиторию:

• Формат меняется под задачу: SVG для Figma, PNG для слайдов или HTML для веб-страниц.
• Размер подстраивается под носитель: от узкой иллюстрации в документации до формата 16:9 для презентаций.
• Уровень деталей регулирует количество узлов: исходная схема на 20 блоков может автоматически сократиться до 7 главных элементов.
• Сложность формулировок адаптируется под читателя: технические термины вроде Auth Service / JWT RS256 переименовываются в понятный для менеджеров Sign-in.

Третья фича — поддержка 27 типов визуализации. В галерее есть всё: архитектурные схемы, ER-диаграммы, диаграммы последовательности, временные шкалы, матрицы 2x2 и воронки.

Четвертая фича — доступность из коробки. Сгенерированные SVG-файлы содержат теги role="img", валидные атрибуты aria-labelledby, а также уникальные префиксы идентификаторов. Несколько таких SVG можно безопасно вставлять на одну страницу без конфликтов в DOM.

Примеры доступных видов визуализации

Каждый из 27 типов диаграмм поставляется в трех вариантах оформления: светлый минималистичный, темный минималистичный и полный редакционный с карточками описания.

Architecture Components + connections	Flowchart Decision logic	Sequence Messages over time
State machine States + transitions	ER / data model Entities + fields	Timeline Events on an axis
Swimlane Cross-functional flow	Quadrant Two-axis positioning	Nested Hierarchy by containment
Tree Parent → children	Org chart Ownership + routing	Venn Set overlap
Layer stack Stacked abstractions	Pyramid / funnel Ranked hierarchy or drop-off	Consultant 2×2 Scenario matrix · named cells
Radar / Spider Multi-axis comparison	Loop Flywheel · stations around a hub	IT current-state Legacy landscape · modernization
High-Level End-to-end stack on a cluster	Bar chart Categorical comparison	Line chart Trends over time
Gantt Tasks and phases on a timeline	Scatter plot Distribution and correlation	Process Multi-actor sequential workflow
Medallion Multi-tier data storage	Data flow Role-scoped pipeline steps	DP integration Sources → core → consumers
DP security matrix Per-role access permissions

Как устроена архитектура навыка

Проект использует принцип «постепенного раскрытия» контекста. Файл SKILL.md служит только как оглавление. Когда вы просите нарисовать блок-схему, ИИ подгружает файл type-flowchart.md, не читая описания остальных 26 видов диаграмм.

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

Структура репозитория устроена логично:

• В папке references/ лежат описания каждого типа диаграмм, стайл-гайды и специфичные примитивы.
• В scripts/ находятся парсеры Python для вытягивания структуры из файлов .drawio и Mermaid.
• В assets/ собран сгенерированный галерейный сайт, где можно посмотреть живые примеры.

Установка и практическое применение

Для работы нужен один из поддерживаемых AI-помощников.

В Claude Code плагин подключается командами:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

В Pi установка выполняется еще проще:

pi install https://github.com/cathrynlavery/diagram-design

После установки вы можете формулировать задачи обычной разговорной речью:

"Сделай архитектурную диаграмму приложения: фронтенд, бэкенд, база данных Postgres и кэш Redis."
"Нарисуй последовательность авторизации с обновлением токена при ошибке 401."
"Перерисуй схему из файла platform.drawio для презентации инвесторам, оставь только 6 главных блоков."

Экспорт готовых вариантов выполняется штатным вызовом:

/diagram-design:export path/to/diagram.html --png-only --scale=3

Скрипт запускает Headless Chromium через Playwright и делает чистый рендер без лишних элементов оформления.

Кому пригодится проект

Репозиторий станет отличным помощником для разработчиков, технических писателей и основателей стартапов. Если вы часто пишете статьи, готовите слайды или обновляете документацию в репозитории, проект сэкономит часы ручной работы.

При этом автор сразу обозначает ограничения. Не стоит использовать инструмент для создания обычных списков, таблиц сравнения «до/после» или схем из одного блока. Для таких задач стандартный текст или таблица в Markdown сработают быстрее и понятнее.