Установка скиллов и плагинов OpenClaw осуществляется на ваш страх и риск. Все файлы были получены из открытых источников и предоставляются «как есть». Мы не гарантируем их корректную работу, безопасность или совместимость с вашей системой. Перед установкой настоятельно рекомендуется ознакомиться с содержимым кода и убедиться, что вы понимаете, какие изменения будут внесены в вашу систему.
Генератор диаграмм Excalidraw позволяет создавать визуально привлекательные схемы в стиле «ручного рисунка» и экспортировать их в формате PNG. Это удобный инструмент для быстрого создания блок-схем, архитектурных диаграмм и других визуализаций на основе JSON-описания.
Как это работает
- Генерация JSON — создайте массив элементов Excalidraw в соответствии с нужной диаграммой
- Сохранение — запишите JSON в файл
/tmp/.excalidraw - Рендеринг — выполните команду для генерации изображения
- Отправка — получите готовый PNG-файл
node /scripts/render.js input.excalidraw output.png Типы элементов
- rectangle — прямоугольник (x, y, width, height)
- ellipse — овал
- diamond — ромб (решение)
- arrow — стрелка (связывает элементы)
- line — линия
- text — текстовая подпись
Стилизация
{
"strokeColor": "#1e1e1e",
"backgroundColor": "#a5d8ff",
"fillStyle": "hachure",
"strokeWidth": 2,
"roughness": 1,
"strokeStyle": "solid"
}fillStyle: hachure (штриховка), cross-hatch, solid
roughness: 0 — аккуратно, 1 — эффект ручного рисунка, 2 — максимально «скетчевый» стиль
Связи стрелок (важно)
Для стрелок всегда используйте привязки from и to. Это позволяет автоматически рассчитывать точки соединения без ручной работы с координатами. :
{"type":"arrow","id":"a1","from":"box1","to":"box2"}Для сложных маршрутов можно использовать absolutePoints с промежуточными точками.
Подписи и стили стрелок
- Добавляйте текст как отдельный элемент рядом со стрелкой
strokeStyle: "dashed"— пунктирная линияstartArrowhead: true— двусторонняя стрелка
Рекомендации по компоновке
- Размер блоков: 140–200 × 50–70 px
- Отступы по вертикали: 60–100 px
- Отступы по горизонтали: 80–120 px
- Текст размещайте внутри фигур с небольшим смещением
- Группируйте элементы и используйте цветовую кодировку
Цветовая палитра
Заливки: синий, зелёный, жёлтый, красный, фиолетовый, розовый, кремовый
Контуры: тёмный, синий, зелёный, оранжевый, фиолетовый
Подписи: серый для аннотаций
Практические советы
- Каждому элементу нужен уникальный
id - Используйте
from/toвместо ручных координат - Выбирайте
roughnessв зависимости от стиля - Для кода используйте
fontFamily: 3 - Для сложных схем используйте контейнеры (большие прямоугольники)
Когда использовать
- Создание быстрых блок-схем
- Визуализация архитектуры систем
- Документация и презентации
- Автоматическая генерация диаграмм из данных
FAQ
Нужно ли вручную задавать координаты стрелок?
Нет, достаточно указать from и to.
Как обойти препятствия стрелкой?
Используйте absolutePoints с промежуточными точками маршрута.
Инструмент Excalidraw позволяет быстро преобразовывать структурированные данные в наглядные изображения, сохраняя баланс между простотой и гибкостью. :
Файл из источника