Диаграмма архитектуры

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

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

Источник	Встроенный (установлен по умолчанию)
Путь	skills/creative/architecture-diagram
Версия	1.0.0
Автор	Cocoon AI (hello@cocoon-ai.com), портировано VibeOS
Лицензия	MIT
Платформы	linux, macos, windows
Теги	architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud
Связанные навыки	concept-diagrams, excalidraw

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

к сведению

Ниже приведено полное описание навыка, которое VibeOS загружает при его активации. Это те инструкции, которые видит агент, когда навык активен.

Навык «Диаграмма архитектуры»

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

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

Лучше всего подходит для:

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

В первую очередь рассмотрите другие навыки для:

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

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

Основано на architecture-diagram-generator от Cocoon AI (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 для категоризации компонентов:

Тип компонента	Заливка (rgba)	Обводка (Hex)
Фронтенд	rgba(8, 51, 68, 0.4)	#22d3ee (cyan-400)
Бэкенд	rgba(6, 78, 59, 0.4)	#34d399 (emerald-400)
База данных	rgba(76, 29, 149, 0.4)	#a78bfa (violet-400)
AWS/Облако	rgba(120, 53, 15, 0.3)	#fbbf24 (amber-400)
Безопасность	rgba(136, 19, 55, 0.4)	#fb7185 (rose-400)
Шина сообщений	rgba(251, 146, 60, 0.3)	#fb923c (orange-400)
Внешнее	rgba(30, 41, 59, 0.5)	#94a3b8 (slate-400)

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

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

<!-- Фоновый рисунок сетки -->
<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-порядок: Рисуйте стрелки раньше в SVG (после сетки), чтобы они отображались за блоками компонентов
• Наконечники стрелок: Определяются через SVG-маркеры
• Потоки безопасности: Используйте пунктирные линии розового цвета (#fb7185)
• Границы:
  • Группы безопасности: Пунктир (4,4), розовый цвет
  • Регионы: Крупный пунктир (8,4), янтарный цвет, rx="12"

Логика расположения и интервалов

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

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

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

1. Заголовок: Название с пульсирующим индикатором и подзаголовком
2. Основной SVG: Диаграмма, размещённая внутри карточки с закруглённой рамкой
3. Карточки сводки: Сетка из трёх карточек под диаграммой для высокоуровневых деталей
4. Нижний колонтитул: Минимальные метаданные

Шаблон информационной карточки

<div class="card">
  <div class="card-header">
    <div class="card-dot cyan"></div>
    <h3>Название</h3>
  </div>
  <ul>
    <li>• Пункт первый</li>
    <li>• Пункт второй</li>
  </ul>
</div>

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

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

Шаблон для справки

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

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

Шаблон содержит рабочие примеры каждого типа компонентов (фронтенд, бэкенд, база данных, облако, безопасность), стилей стрелок (стандартные, пунктирные, изогнутые), групп безопасности, границ регионов и легенды — используйте его как структурную основу при создании диаграмм.