Diagram Design

Это не отдельный графический редактор, а набор инструкций, шаблонов и правил дизайна, по которым ИИ агент выбирает подходящий тип схемы и создаёт готовый HTML файл со встроенными SVG и CSS. Такой файл можно сразу открыть в браузере без сборки и дополнительных библиотек.

Проект поддерживает 27 типов визуализаций, включая:

архитектурные схемы и высокоуровневые карты систем • блок схемы, диаграммы последовательностей и конечных состояний • модели данных и ER диаграммы • временные шкалы, дорожки процессов и диаграммы Ганта • деревья, организационные структуры, слои и вложенные системы • квадранты, радарные диаграммы, циклы и воронки • столбчатые, линейные и точечные графики • схемы потоков данных, интеграций и матрицы доступа

Для каждого типа предусмотрены собственные правила компоновки, соединения элементов, отображения подписей и ограничения сложности.

Навык старается избегать типичного оформления автоматически созданных схем с одинаковыми скруглёнными блоками, тенями, неоновыми цветами и перегруженной структурой.

Вместо этого используется сдержанный редакционный стиль, где каждый элемент должен нести смысл, а акцентный цвет применяется только к одному или двум главным объектам.

Все диаграммы доступны в трёх вариантах оформления:

минималистичный светлый • минималистичный тёмный • расширенный редакционный вариант с заголовками, пояснениями и дополнительными карточками

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

Готовую диаграмму можно оставить в формате HTML или экспортировать:

в SVG для Figma, Illustrator, презентаций и веб страниц • в PNG с настраиваемым масштабом через Playwright

Diagram Design подходит для технической документации, презентаций, статей, архитектурных обзоров и продуктовых материалов.

При этом он не заменяет полноценный визуальный редактор: содержимое и расположение элементов генерирует языковая модель, поэтому сложные или критически важные схемы всё равно следует проверять вручную.