Excalidraw

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

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


Источник	Встроенный (установлен по умолчанию)
Путь	`skills/creative/excalidraw`
Версия	`1.0.0`
Автор	VibeOS
Лицензия	MIT
Платформы	linux, macos, windows
Теги	`Excalidraw`, `Диаграммы`, `Блок-схемы`, `Архитектура`, `Визуализация`, `JSON`

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

к сведению

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

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

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

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

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

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

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

Сохранение диаграммы

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

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

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

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

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

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

Это загрузит файл на excalidraw.com (аккаунт не требуется) и выведет ссылку для общего доступа. Требуется пакет pip cryptography (pip install cryptography).

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

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

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

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

strokeColor: "#1e1e1e"
backgroundColor: "transparent"
fillStyle: "solid"
strokeWidth: 2
roughness: 1 (эффект hand-drawn)
opacity: 100

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

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

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

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

roundness: { "type": 3 } для скругленных углов
backgroundColor: "#a5d8ff", fillStyle: "solid" для заливки

Эллипс:

{ "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": "Привет", "fontSize": 20, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "r1", "originalText": "Привет", "autoResize": true }

Работает с прямоугольником, эллипсом, ромбом
Текст автоматически центрируется Excalidraw, когда установлен containerId
Значения x/y/width/height текста являются приблизительными — Excalidraw пересчитывает их при загрузке
originalText должен совпадать с text
Всегда указывайте fontFamily: 1 (шрифт Virgil/hand-drawn)

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

{ "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": "соединяет", "fontSize": 16, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "a1", "originalText": "соединяет", "autoResize": true }

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

{ "type": "text", "id": "t1", "x": 150, "y": 138, "text": "Привет", "fontSize": 20,
  "fontFamily": 1, "strokeColor": "#1e1e1e", "originalText": "Привет", "autoResize": true }

x — это ЛЕВЫЙ край. Чтобы центрировать в позиции cx: x = cx - (text.length * fontSize * 0.5) / 2
НЕ полагайтесь на textAlign или width для позиционирования

Стрелка:

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

points: смещения [dx, dy] от x, y элемента
endArrowhead: null | "arrow" | "bar" | "dot" | "triangle"
strokeStyle: "solid" (по умолчанию) | "dashed" | "dotted"

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

{
  "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)

Порядок в массиве = z-order (первый = на заднем плане, последний = на переднем)
Размещайте последовательно: фоновые зоны → фигура → ее привязанный текст → ее стрелки → следующая фигура
ПЛОХО: все прямоугольники, затем все тексты, затем все стрелки
ХОРОШО: фоновая_зона → фигура1 → текст_для_фигуры1 → стрелка1 → текст_подписи_стрелки → фигура2 → текст_для_фигуры2 → ...
Всегда размещайте привязанный текстовый элемент сразу после его фигуры-контейнера

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

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

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

Советы

Используйте цветовую палитру единообразно по всей диаграмме
Контрастность текста КРИТИЧЕСКИ важна — никогда не используйте светло-серый текст на белом фоне. Минимальный цвет текста на белом: #757575
НЕ используйте эмодзи в тексте — они не отображаются в шрифте Excalidraw
Для диаграмм в темном режиме см. references/dark-mode.md
Для более крупных примеров см. references/examples.md

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

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

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

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

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

Сохранение диаграммы​

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

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

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

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

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

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

Порядок отрисовки (z-order)​

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

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

Советы​