Architecture Diagram

Тёмные SVG-диаграммы архитектуры, облака и инфраструктуры — в виде HTML-файла.

Метаданные навыка

Справочник: полный SKILL.md

Architecture Diagram Skill

Генерирует профессиональные тёмные технические диаграммы архитектуры в виде самодостаточных HTML-файлов со встроенной SVG-графикой. Никаких сторонних инструментов, API-ключей и библиотек рендеринга — только HTML-файл, который открывается в браузере.

Область применения

Подходит для:

• Архитектуры программных систем (frontend / backend / база данных)
• Облачной инфраструктуры (VPC, регионы, подсети, управляемые сервисы)
• Топологии микросервисов и сервисной сети
• Карт баз данных и API, диаграмм деплоя
• Всего, что связано с технической инфраструктурой и органично смотрится в тёмной эстетике с сеткой

Сначала поищи другой инструмент, если нужно:

• Физика, химия, математика, биология и другие научные дисциплины
• Физические объекты (транспортные средства, оборудование, анатомия, разрезы)
• Планы помещений, сюжетные путешествия, учебные визуализации
• Наброски на доске от руки (попробуй excalidraw)
• Анимированные объяснялки (попробуй навык анимации)

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

Основан на Cocoon AI’s architecture-diagram-generator (MIT).

Процесс работы

1. Пользователь описывает архитектуру системы: компоненты, связи, технологии
2. Сгенерируй HTML-файл по дизайн-системе, описанной ниже
3. Файл сохраняется через write_file с расширением .html (например, ~/architecture-diagram.html)
4. Пользователь открывает его в любом браузере — работает офлайн, без зависимостей

Расположение файла

Сохраняй диаграммы по пути, указанному пользователем, или по умолчанию в текущую рабочую директорию:

./[project-name]-architecture.html

Предпросмотр

После сохранения предложи пользователю открыть файл:

# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html

Дизайн-система и визуальный язык

Цветовая палитра (семантика компонентов)

Используй конкретные rgba-заливки и hex-обводки для категоризации компонентов:

Типографика и фон

• Шрифт: JetBrains Mono (моноширинный), загружается с Google Fonts
• Размеры: 12px (названия), 9px (подписи), 8px (аннотации), 7px (мелкие метки)
• Фон: Slate-950 (#020617) с едва заметным сетчатым паттерном с шагом 40px

<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>

Технические детали реализации

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

Компоненты — скруглённые прямоугольники (rx="6") с обводкой 1.5px. Чтобы стрелки не просвечивали сквозь полупрозрачную заливку, используй технику маскирования двойным прямоугольником:

1. Сначала нарисуй непрозрачный фоновый прямоугольник (#0f172a)
2. Поверх — полупрозрачный стилизованный прямоугольник

Правила соединений

• Порядок слоёв (Z-Order): Стрелки рисуй в начале SVG (сразу после сетки) — они должны быть позади блоков компонентов
• Наконечники стрелок: Задавай через SVG markers
• Потоки безопасности: Используй пунктирные линии цвета rose (#fb7185)
• Границы:
  • Security Groups: пунктир (4,4), цвет rose
  • Регионы: широкий пунктир (8,4), цвет amber, rx="12"

Правила отступов и компоновки

• Стандартная высота: 60px (сервисы); 80–120px (крупные компоненты)
• Вертикальный зазор: не менее 40px между компонентами
• Message Buses: размещай в зазоре между сервисами, не перекрывая их
• Размещение легенды: КРИТИЧНО. Легенда должна быть вне всех граничных блоков. Найди наибольшую Y-координату среди всех границ и размести легенду не менее чем на 20px ниже неё.

Структура документа

Сгенерированный HTML-файл состоит из четырёх частей:

1. Header: название с пульсирующим индикатором и подзаголовок
2. Main SVG: диаграмма в карточке со скруглённой рамкой
3. Summary Cards: сетка из трёх карточек под диаграммой с общим описанием
4. Footer: минимальные метаданные

Паттерн информационной карточки

<div class="card">
  <div class="card-header">
    <div class="card-dot cyan"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

Требования к результату

• Один файл: единственный самодостаточный .html-файл
• Без внешних зависимостей: весь CSS и SVG должны быть встроены (исключение — Google Fonts)
• Без JavaScript: для анимаций (например, пульсирующих точек) используй только CSS
• Совместимость: должен корректно отображаться в любом современном браузере

Шаблон: справочник

Загрузи полный HTML-шаблон с точной структурой, CSS и примерами SVG-компонентов:

skill_view(name="architecture-diagram", file_path="templates/template.html")

Шаблон содержит рабочие примеры всех типов компонентов (frontend, backend, database, cloud, security), стилей стрелок (стандартные, пунктирные, кривые), security groups, границ регионов и легенды — используй его как структурный ориентир при генерации диаграмм.