🏠 Главная › user guide › creative architecture diagram

{/ Эта страница автоматически передается из навыков SKILL.md с помощью сайта/scripts/generate-skill-docs.py. Редактируйте исходный SKILL.md, а не эту страницу. /}

Диаграмма конструкции

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

Метаданные навыки
Источник Встроенный (установлен по умолчанию)
Путь навыки/креатив/архитектурная диаграмма
Версия 1.0.0
Автор Cocoon AI (hello@cocoon-ai.com), портировано агентом Hermes
Лицензия Массачусетский технологический институт
Платформы Linux, MacOS, Windows
Теги архитектура, диаграммы, SVG, HTML, визуализация, инфраструктура, облако
Связанные навыки concept-diagrams, excalidraw

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

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

Навык создания диаграммы конструкции

Создавайте профессиональные темные технические диаграммы в виде автономных 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

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

После сохранения предложенному пользователю открыть файл:
```bash
# macOS
open./my-architecture.html
# Linux
xdg-open./my-architecture.html

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

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

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

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

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

<!-- Фоновый узор сетки -->
<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,5 пикселей. Чтобы не просвечивать сквозь прозрачные полупрозрачные заливки, используйте технику двойного контура с маскированием: 1. Нарисуйте непрозрачный фоновый контур (#0f172a) 2. Поверх нарисуйте полупрозрачный стилизованный контур.

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

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

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

Сгенерированный 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-компонентов:

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

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