🏠 Главная › user guide › creative concept diagrams

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

Концептуальные диаграммы

Создавайте плоские SVG-диаграммы с минимальным учетом света и темноты в виде отдельных HTML-файлов, используя единый образовательный визуальный язык с 9 семантическими цветовыми шкалами, типографикой с регистром предложений и автоматическим темным режимом. Лучше всего подходит для образовательных и непрограммных визуальных эффектов — физических установок, химических механизмов, математических кривых, физических объектов (самолетов, турбин, смартфонов, механических часов), анатомии, планов этажей, поперечных сечений, повествовательных путешествий (жизненный цикл X, процесс Y), системной интеграции узлов (умный город, IoT) и представлений с разнесенными слоями. Если для предмета существуют более специализированные навыки (специальное программное обеспечение/облачная архитектура, нарисованные от руки эскизы, анимированные пояснения и т. д.), отдайте предпочтение этому — в противном случае этот навык также может служить запасным вариантом SVG-диаграмм общего назначения с чистым образовательным видом. Поставляется с 15 примерами диаграмм.

Метаданные навыков
Источник Необязательно — установите с помощью hermesskills installofficial/creative/concept-diagrams
Путь необязательные навыки/творческие/концептуальные диаграммы
Версия 0.1.0
Автор v1k22 (оригинальный PR), портированный в гермес-агент
Лицензия Массачусетский технологический институт
Платформы Linux, MacOS, Windows
Теги диаграммы, svg, визуализация, образование, физика, химия, техника
Сопутствующие навыки architecture-diagram, excalidraw, generative-widgets

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

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

Концептуальные диаграммы

Создавайте SVG-диаграммы промышленного качества с помощью единой плоской системы минимального дизайна. Выходные данные представляют собой отдельный автономный HTML-файл, который одинаково отображается в любом современном браузере с автоматическим светлым/темным режимом.

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

Наиболее подходит для: - Физические установки, химические механизмы, математические кривые, биология. - Физические объекты (самолеты, турбины, смартфоны, механические часы, аккумуляторы) - Анатомия, поперечные сечения, виды слоев в разобранном виде. - Планы этажей, архитектурные преобразования - Повествовательные путешествия (жизненный цикл X, процесс Y) - Интеграция узловых систем (умный город, сети IoT, электросети) - Образовательные/учебные визуальные эффекты в любой области. - Количественные диаграммы (сгруппированные столбцы, энергетические профили)

Сначала поищите в другом месте: - Специализированное программное обеспечение/архитектура облачной инфраструктуры с эстетикой темных технологий (рассмотрите «схему архитектуры», если таковая имеется) - Эскизы, нарисованные на доске (рассмотрите вариант excalidraw, если он доступен). - Анимированные пояснения или вывод видео (учитывайте навыки анимации)

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

Рабочий процесс

  1. Определитесь с типом диаграммы (см. Типы диаграмм ниже).
  2. Размещайте компоненты, используя правила системы проектирования.
  3. Напишите полную HTML-страницу, используя в качестве оболочки templates/template.html — вставьте свой SVG туда, где в шаблоне написано <!-- ВСТАВЬТЕ SVG ЗДЕСЬ -->.
  4. Сохраните как отдельный файл .html (например, ~/my-diagram.html или ./my-diagram.html).
  5. Пользователь открывает его прямо в браузере — без сервера, без зависимостей.

Необязательно: если пользователю нужна просматриваемая галерея из нескольких диаграмм, см. «Локальный сервер предварительного просмотра» внизу.

Загрузите HTML-шаблон:

skill_view(name="concept-diagrams", file_path="templates/template.html")

В шаблон встроена полная система дизайна CSS (цветовые классы c-*, текстовые классы, светлые/темные переменные, стили маркеров стрелок). Создаваемый вами SVG зависит от присутствия этих классов на странице хостинга.

Система дизайна

Философия

Цветовая палитра

9 цветовых рамок, каждая по 7 ступеней. Поместите имя класса в <g> или элемент формы; CSS шаблона поддерживает оба режима.

Класс 50 (самый легкий) 100 200 400 600 800 900 (самый темный)
c-фиолетовый #EEEDFE #CECBF6 #AFA9EC #7F77DD #534AB7 #3C3489 #26215C
c-бирюзовый #E1F5EE #9FE1CB #5DCAA5 #1D9E75 #0F6E56 #085041 #04342C
c-коралл #FAECE7 #F5C4B3 #F0997B #D85A30 #993C1D #712B13 #4A1B0C
c-розовый #FBEAF0 #F4C0D1 #ED93B1 #D4537E #993556 #72243E #4B1528
c-серый #F1EFE8 #D3D1C7 #B4B2A9 #888780 #5F5E5A #444441 #2C2C2A
c-синий #E6F1FB #B5D4F4 #85B7EB #378ДОБАВИТЬ #185FA5 #0C447C #042C53
c-зеленый #EAF3DE #C0DD97 #97C459 #639922 #3B6D11 #27500А #173404
c-янтарный #ФАИДА #FAC775 #EF9F27 #BA7517 #854F0B #633806 #412402
c-красный #FCEBEB #F7C1C1 #F09595 #E24B4A #A32D2D #791F1F #501313

Правила назначения цветов

Цвет кодирует значение, а не последовательность. Никогда не меняйте цвета, как радуга.

Отображение светлых/темных остановок (осуществляется шаблонным CSS — просто используйте класс): - Светлый режим: 50 заливок + 600 обводок + 800 титров/600 субтитров - Темный режим: 800 заливок + 200 обводок + 100 заголовков/200 субтитров.

Типографика

Всего два размера шрифта. Никаких исключений.

Класс Размер Вес Использование
эт 14 пикселей 500 Названия узлов, метки регионов
тс 12 пикселей 400 Субтитры, описания, метки со стрелками
т 14 пикселей 400 Общий текст

Оценка ширины (приблизительно): - Вес 14 пикселей 500: ~8 пикселей на символ - Вес 12 пикселей 400: ~6,5 пикселей на символ. - Всегда проверяйте: box_width >= (char_count × px_per_char) + 48 (отступы по 24 пикселя с каждой стороны)

Интервал и макет

Обводка и форма

– Ширина обводки: 0,5 пикселя на всех границах узлов. Не 1 пиксель, не 2 пикселя. - Округление прямоугольника: от rx="8" для узлов, от rx="12" для внутренних контейнеров, от rx="16" до rx="20" для внешних контейнеров. - Пути соединителей: ДОЛЖНЫ иметь fill="none". В противном случае SVG по умолчанию использует «fill: black».

Маркер-стрелка

Включите этот блок <defs> в начало каждого SVG:

<defs>
  <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
          markerWidth="6" markerHeight="6" orient="auto-start-reverse">
    <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </marker>
</defs>

Используйте marker-end="url(#arrow)" для строк. Стрелка наследует цвет линии через context-stroke.

Классы CSS (предоставляются шаблоном)

Страница шаблона предоставляет:

Вам не нужно их переопределять — просто примените их в своем SVG. Файл шаблона содержит полные определения CSS.

Шаблон SVG

Каждый SVG внутри страницы шаблона начинается с такой структуры:

<svg width="100%" viewBox="0 0 680 {HEIGHT}" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>

  <!-- Diagram content here -->

</svg>

Замените {HEIGHT} фактической вычисленной высотой (нижний элемент последнего элемента + 40 пикселей).

Шаблоны узлов

Однострочный узел (44 пикселя):

<g class="node c-blue">
  <rect x="100" y="20" width="180" height="44" rx="8" stroke-width="0.5"/>
  <text class="th" x="190" y="42" text-anchor="middle" dominant-baseline="central">Service name</text>
</g>

Двухстрочный узел (56 пикселей):

<g class="node c-teal">
  <rect x="100" y="20" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="200" y="38" text-anchor="middle" dominant-baseline="central">Service name</text>
  <text class="ts" x="200" y="56" text-anchor="middle" dominant-baseline="central">Short description</text>
</g>

Разъем (без этикетки):

<line x1="200" y1="76" x2="200" y2="120" class="arr" marker-end="url(#arrow)"/>

Контейнер (пунктирный или сплошной):

<g class="c-purple">
  <rect x="40" y="92" width="600" height="300" rx="16" stroke-width="0.5"/>
  <text class="th" x="66" y="116">Container label</text>
  <text class="ts" x="66" y="134">Subtitle info</text>
</g>

Типы диаграмм

Выберите макет, соответствующий теме:

  1. Блок-схема — конвейеры CI/CD, жизненные циклы запросов, рабочие процессы утверждения, обработка данных. Однонаправленный поток (сверху вниз или слева направо). Максимум 4-5 узлов в ряду.
  2. Структурное/ограничение — вложенность облачной инфраструктуры, многоуровневая архитектура системы. Большие внешние контейнеры с внутренними областями. Пунктирные прямоугольники для логических группировок.
  3. API/Карта конечных точек — маршруты REST, схемы GraphQL. Дерево от корня с разветвлением на группы ресурсов, каждая из которых содержит узлы конечных точек.
  4. Топология микросервисов — Сервисная сетка, системы, управляемые событиями. Сервисы как узлы, стрелки для шаблонов связи, очереди сообщений между ними.
  5. Поток данных — конвейеры ETL, потоковые архитектуры. Поток слева направо от источников через обработку к приемникам.
  6. Физический/конструктивный — транспортные средства, здания, оборудование, анатомия. Используйте формы, соответствующие физической форме — <path> для изогнутых тел, <polygon> для конических форм, <ellipse>/<circle> для цилиндрических деталей, вложенный <rect> для отсеков. См. «ссылки/physical-shape-cookbook.md».
  7. Инфраструктура/Системная интеграция — Умные города, сети IoT, многодоменные системы. Компоновка со ступичными спицами с центральной платформой, соединяющей подсистемы. Семантические стили линий (.data-line, .power-line, .water-pipe, .road). См. references/infrastructure-patterns.md.
  8. Мокапы пользовательского интерфейса/дашборда — Панели администратора, панели мониторинга. Рамка экрана с вложенными элементами диаграммы/датчика/индикатора. См. references/dashboard-patterns.md.

Для физических диаграмм, схем инфраструктуры и информационных панелей перед созданием загрузите соответствующий справочный файл — каждый из них предоставляет готовые классы CSS и примитивы фигур.

Контрольный список проверки

Прежде чем завершить работу над любым SVG, проверьте ВСЕ следующее:

  1. Каждый <text> имеет класс t, ts или th.
  2. Каждый <text> внутри блока имеет dominant-baseline="central".
  3. Каждый соединитель <path> или <line>, используемый в качестве стрелки, имеет fill="none".
  4. Ни одна стрелка не пересекает несвязанный прямоугольник.
  5. box_width >= (longest_label_chars × 8) + 48 для текста размером 14 пикселей.
  6. box_width >= (longest_label_chars × 6,5) + 48 для текста размером 12 пикселей.
  7. Высота ViewBox = самый нижний элемент + 40 пикселей.
  8. Весь контент находится в пределах от x=40 до x=640.
  9. Цветовые классы (c-*) находятся на <g> или элементах формы, но никогда на соединителях <path>.
  10. Присутствует блок со стрелками <defs>.
  11. Никаких градиентов, теней, размытия или эффектов свечения.
  12. Ширина обводки — 0,5 пикселя по всем границам узла.

Вывод и предварительный просмотр

По умолчанию: отдельный HTML-файл.

Напишите один файл .html, который пользователь сможет открыть напрямую. Нет сервера, нет зависимостей, работает в автономном режиме. Шаблон:

# 1. Load the template
template = skill_view("concept-diagrams", "templates/template.html")

# 2. Fill in title, subtitle, and paste your SVG
html = template.replace(
    "<!-- DIAGRAM TITLE HERE -->", "SN2 reaction mechanism"
).replace(
    "<!-- OPTIONAL SUBTITLE HERE -->", "Bimolecular nucleophilic substitution"
).replace(
    "<!-- PASTE SVG HERE -->", svg_content
)

# 3. Write to a user-chosen path (or./ by default)
write_file("./sn2-mechanism.html", html)

Сообщите пользователю, как его открыть:

# macOS
open./sn2-mechanism.html
# Linux
xdg-open./sn2-mechanism.html

Необязательно: локальный сервер предварительного просмотра (многодиаграммная галерея)

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

Правила: - Привязка только к 127.0.0.1. Никогда 0.0.0.0. Публикация диаграмм на всех сетевых интерфейсах представляет угрозу безопасности в общих сетях. - Выберите свободный порт (НЕ запрограммируйте его жестко) и сообщите пользователю выбранный URL-адрес. - Сервер не является обязательным и требует согласия — сначала отдайте предпочтение автономному HTML-файлу.

Рекомендуемый шаблон (позволяет ОС выбрать свободный временный порт):

# Put each diagram in its own folder under.diagrams/
mkdir -p.diagrams/sn2-mechanism
#...write.diagrams/sn2-mechanism/index.html...

# Serve on loopback only, free port
cd.diagrams && python3 -c "
import http.server, socketserver
with socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s:
    print(f'Serving at http://127.0.0.1:{s.server_address[1]}/')
    s.serve_forever()
" &

Если пользователь настаивает на фиксированном порте, используйте 127.0.0.1:<port> — но никогда не 0.0.0.0. Задокументируйте, как остановить сервер (kill %1 или pkill -f "http.server").

Примеры Справочник

В каталоге examples/ содержится 15 полных, проверенных диаграмм. Просмотрите их на предмет рабочих шаблонов, прежде чем писать новую диаграмму аналогичного типа:

Файл Тип Демонстрирует
больница-скорая помощь-отделение-flow.md Блок-схема Приоритетная маршрутизация с семантическими цветами
полнометражный-фильм-производство-pipeline.md Блок-схема Поэтапный рабочий процесс, горизонтальные подпотоки
automated-password-reset-flow.md Блок-схема Поток аутентификации с ветвями ошибок
автономный-llm-research-agent-flow.md Блок-схема Петлевые стрелки, ветви решений
place-order-uml-sequence.md Последовательность Стиль диаграммы последовательности UML
коммерческий-самолет-структура.md Физический Контуры, многоугольники, эллипсы для создания реалистичных фигур
ветер-турбина-структура.md Физическое сечение Разделение подземного и надземного пространства, цветовая маркировка
smartphone-layer-anatomy.md Разобранный вид Чередование левых и правых меток, многослойные компоненты
квартира-план-конверсия.md План этажа Стены, двери, предлагаемые изменения выделены красным пунктиром
банановое-путешествие-дерево-в-смузи.md Сюжетное путешествие Извилистый путь, прогрессивные изменения состояния
cpu-ooo-microarchitecture.md Аппаратный конвейер Разветвление, боковая панель иерархии памяти
sn2-реакция-механизм.md Химия Молекулы, изогнутые стрелки, энергетический профиль
smart-city-infrastructure.md Ступица Семантические стили линий для каждой системы
electricity-grid-flow.md Многоступенчатый поток Иерархия напряжений, маркеры потока
ml-benchmark-grouped-bar-chart.md Диаграмма Сгруппированные стержни, двухосные

Загрузите любой пример с помощью:

skill_view(name="concept-diagrams", file_path="examples/<filename>")

Краткое руководство: что использовать, когда

Пользователь говорит Тип диаграммы Рекомендуемые цвета
«показать трубопровод» Блок-схема серое начало/конец, фиолетовые ступени, красные ошибки, бирюзовое развертывание
"нарисовать поток данных" Конвейер данных (слева направо) серые источники, фиолетовая обработка, бирюзовые раковины
"визуализировать систему" Структурный (защита) фиолетовый контейнер, услуги бирюзового цвета, данные о кораллах
"сопоставить конечные точки" Дерево API фиолетовый корень, по одному пандусу на группу ресурсов
"показать услуги" Топология микросервиса серый ингресс, бирюзовые службы, фиолетовый автобус, коралловые рабочие
«нарисовать самолет/автомобиль» Физический пути, многоугольники, эллипсы для создания реалистичных фигур
«умный город/Интернет вещей» Интеграция со ступицей стили семантических линий для каждой подсистемы
"показать панель" Макет пользовательского интерфейса темный экран, цвета диаграммы: бирюзовый, фиолетовый, коралловый для оповещений
«электросети/электричество» Многоступенчатый поток иерархия напряжений (веса линий ВН/СН/НН)
«ветряк/турбина» Физическое сечение фундамент + башня в разрезе + цветовая маркировка гондолы
"путешествие X/жизненный цикл" Сюжетное путешествие извилистый путь, прогрессивные изменения состояния
"слои X/взорванные" Представление в разобранном виде вертикальная стопка, чередующиеся этикетки
«ЦП/конвейер» Аппаратный конвейер вертикальные ступени, разветвления к исполнительным портам
"план этажа/квартиры" План этажа стены, двери, предлагаемые изменения выделены красным пунктиром
"механизм реакции" Химия атомы, связи, изогнутые стрелки, переходное состояние, энергетический профиль