🏠 Главная › user guide › creative excalidraw

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

Экскалидрайв

Диаграммы Excalidraw в формате JSON (арка, поток, последовательность).

Метаданные навыки
Источник Встроенный (установлен по умолчанию)
Путь навыки/креатив/excalidraw
Версия 1.0.0
Автор Агент Гермес
Лицензия Массачусетский технологический институт
Платформы Linux, MacOS, Windows
Теги Excalidraw, Диаграммы, Блок-схемы, Архитектура, Визуализация, JSON

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

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

Навык создания диаграммы Excalidraw

Создавайте диаграммы, записывайте стандартные элементы JSON Excalidraw и сохраняйте их в файлах .excalidraw. Эти файлы можно перетащить на excalidraw.com для просмотра и редактирования. Никаких учётных записей, API-ключей или библиотек рендеринга — только JSON.

Когда использовать

Создайте файлы .excalidraw для архитектурных диаграмм, блок-схем, диаграмм последовательности, карт понятий и многого другого. Файлы можно открыть на excalidraw.com или загрузить для получения ссылок для совместного доступа.

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

  1. Загрузите этот навык (вы уже сделали)
  2. Написать элементы JSON — массив объектов элементов Excalidraw
  3. Сохраните файл с помощью write_file, чтобы создать файл .excalidraw
  4. Опционально загрузите для получения ссылок для совместного доступа с помощью scripts/upload.py через terminal

Диаграммы охраны

Оборачивайте элементы массива в стандартный конверт .excalidraw и сохраняйте с помощью write_file:

{
  "type": "excalidraw",
  "version": 2,
  "source": "hermes-agent",
  "elements": [...ваш массив элементов здесь... ],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

Сохраните в любом случае, например, ~/diagrams/my_diagram.excalidraw.

Загрузка для получения ссылок для общего доступа

Запустите загрузку скрипта (находится в каталоге scripts/ этого навыка) через терминал:

python skills/diagramming/excalidraw/scripts/upload.py ~/diagrams/my_diagram.excalidraw

Он загружается на excalidraw.com (учётная запись не требуется) и выводит ссылку для совместного доступа. Требуется пакет cryptography pip (pip install cryptography).

Справочник по элементам формата

Обязательные поля (все элементы)

type, id (уникальная строка), x, y, width, height

Значения по умолчанию (пропустите — они применяются автоматически)

Фон холста — белый.

Типы элементов

Прямоугольник:

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 100 }

Эллипс:

{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }

Ромб:

{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }

Подписанная фигура (привязка контейнера) — создайте текстовый элемент, соответствующий фигуре:

ПРЕДУПРЕЖДЕНИЕ: Не воспользуйтесь "label": { "text": "..." } на фигурах. Это НЕ допустимо Свойством Excalidraw и будет молча проигнорировано, создавать пустые фигуры. ВЫ ДОЛЖНЫ подход использовать с привязкой контейнера, описанный ниже.

Фигуре нужен boundElements, перечисляющий текст, а тексту нужен containerId, указывающий обратно:

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid",
  "boundElements": [{ "id": "t_r1", "type": "text" }] },
{ "type": "text", "id": "t_r1", "x": 105, "y": 110, "width": 190, "height": 25,
  "text": "Hello", "fontSize": 20, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "r1", "originalText": "Hello", "autoResize": true }

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

{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
  "points": [[0,0],[200,0]], "endArrowhead": "arrow",
  "boundElements": [{ "id": "t_a1", "type": "text" }] },
{ "type": "text", "id": "t_a1", "x": 370, "y": 130, "width": 60, "height": 20,
  "text": "connects", "fontSize": 16, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "a1", "originalText": "connects", "autoResize": true }

Отдельный текст (только заголовки и аннотации — без контейнера):

{ "type": "text", "id": "t1", "x": 150, "y": 138, "text": "Hello", "fontSize": 20,
  "fontFamily": 1, "strokeColor": "#1e1e1e", "originalText": "Hello", "autoResize": true }

Стрелка:

{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
  "points": [[0,0],[200,0]], "endArrowhead": "arrow" }

Привязка стрелок (соединение стрелок с фигурками)

{
  "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
  "points": [[0,0],[150,0]], "endArrowhead": "arrow",
  "startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
  "endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] }
}

Координаты fixedPoint: top=[0.5,0], bottom=[0.5,1], left=[0,0.5], right=[1,0.5]

Порядок рисования (z-order)

Рекомендации по размерам

Размеры шрифта: - Минимальный fontSize: 16 для основного текста, меток, описаний. - Минимальный размер шрифта: 20 для заголовков и подзаголовков. - Минимальный fontSize: 14 только для вторичных аннотаций (экономно) - НИКОГДА не воспользуйтесь fontSize ниже 14

Размеры элементов: - Минимальный размер фигуры: 120x60 для подписанных контуров/эллипсов. - Обеспечьте минимум 20–30 пикселей зазоров между элементами. - Предпочитайте меньшие, но более важные элементы множества микроскопических частиц.

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

См. references/colors.md для полных таблиц цветов. Краткая справка:

Использование Цветки залива Шестнадцатеричный
Основной / Ввод Светло-голубой #a5d8ff
Успех / Вывод Светло-зелёный #b2f2bb
Предупреждение / Внешнее Светло-оранжевый #ffd8a8
Обработка / Особое Светло-фиолетовый #d0bfff
Ошибка / Критическое Светло-красный #ffc9c9
Заметки / Решения Светло-жёлтый #fff3bf
Хранилище / Данные Светло-бирюзовый #c3fae8

Советы