Об этом проекте

Diagram Design — это коллекция из 39 типов диаграмм редакционного качества, поставляемых в виде автономных HTML и SVG файлов, разработанных как навык или плагин для ИИ-ассистентов кодирования, включая Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro и OpenCode. Основная философия проекта заключается в том, что диаграммы должны соответствовать визуальному качеству окружающего контента, а не выглядеть как шаблонные блоки с закругленными углами. Каждый тип диаграммы поставляется в трех статических вариантах: минимальный светлый, минимальный темный и полный редакционный. Все выходные данные автономны, без этапа сборки, JavaScript или внешних зависимостей для изображений. 39 типов охватывают широкий спектр случаев использования, включая архитектурные диаграммы, блок-схемы, диаграммы последовательности, конечные автоматы, ER/модели данных, временные шкалы, дорожки (swimlanes), квадранты, радарные диаграммы, циклы/маховики, вложенные иерархии, деревья, организационные диаграммы, стеки слоев, диаграммы Венна, пирамиды/воронки, столбчатые диаграммы, древовидные карты, линейные диаграммы, диаграммы Ганта, точечные графики, высокоуровневые стеки, процессы, медальонные архитектуры, потоки данных, интеграции платформ данных, матрицы безопасности, диаграммы Санкея, диаграммы Исикавы, карты Уорда, канбан-доски, пользовательские пути, диаграммы развертывания, графы зависимостей, UML-диаграммы классов, карты историй, схемы баз данных, полярные диаграммы и каскадные диаграммы. Ключевым отличием является процесс адаптации под бренд. Навык может загрузить главную страницу веб-сайта, извлечь доминирующую цветовую палитру и набор шрифтов, сопоставить обнаруженные значения с семантическими ролями (бумага, чернила, приглушенный, акцент, ссылка) и применить их ко всем диаграммам. Он автоматически выполняет проверки контрастности WCAG AA и выдает чек о достоверности, документирующий образцы URL, точные цветовые роли, семейства шрифтов и любые запасные варианты. Профили можно сохранять и обмениваться ими между несколькими клиентскими проектами с помощью файла-маркера `.diagram-design`. Инструмент также поддерживает импорт существующих диаграмм из draw.io, Mermaid или Excalidraw и их перерисовку в системе Diagram Design с выбранным форматом, размером и уровнем детализации. Семантические паттерны описывают поведение отдельно от макета, поэтому такие концепции, как очереди, трассировки политик или границы доверия, могут использовать ближайший существующий тип без расширения количества типов. Доступно необязательное анимированное движение для упорядоченных объяснений с поддержкой reduced-motion и статическим значением по умолчанию. Доступность встроена по умолчанию: каждый SVG включает role="img", aria-labelledby и элементы title/desc с префиксами ID для каждой диаграммы, чтобы предотвратить конфликты при встраивании нескольких диаграмм на одну страницу. Установка доступна через нативный маркетплейс плагинов каждого хоста или через прямое клонирование Git для редактируемых установок. Общий навык находится в `skills/diagram-design/` и совместим со всеми поддерживаемыми хостами Agent Skills.