Навыки lark-whiteboard
📦

lark-whiteboard

Безопасно

Создание диаграмм и графиков в Lark whiteboard

Преобразуйте сложную информацию в понятные визуальные диаграммы без усилий. Этот навык выполняет расчёты макета, стилизацию и рендеринг, чтобы вы могли сосредоточиться на содержании.

Поддерживает: Claude Codex Code(CC)
🥉 72 Бронза
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «lark-whiteboard». Создайте простую организационную диаграмму для стартапа с CEO наверху, затем CTO и CMO, подчиняющиеся CEO, каждый с 2 членами команды

Ожидаемый результат:

Диаграмма организационной структуры с иерархической раскладкой: CEO на верхнем уровне, CTO и CMO на втором уровне, соединённые вертикальными линиями, и 4 члена команды на третьем уровне, сгруппированные под своими соответствующими руководителями. Применён чистый отступ и профессиональная стилизация.

Использование «lark-whiteboard». Нарисуйте матрицу сравнения методологий Agile и Waterfall по 5 критериям

Ожидаемый результат:

Диаграмма сравнения бок о бок с двумя колонками (Agile и Waterfall) и 5 строками (Планирование, Разработка, Тестирование, Поставка, Изменения). Каждая ячейка содержит краткие описания. Заголовки используют различные цвета для визуального различия.

Аудит безопасности

Безопасно
v1 • 3/31/2026

All 680 static analysis findings are FALSE POSITIVES. The flagged patterns exist in markdown documentation files as code examples showing CLI usage, DSL syntax, and diagram templates. The skill uses official Lark CLI tools (@larksuite/whiteboard-cli, lark-cli) for legitimate diagram rendering. No actual security vulnerabilities, malicious code, or data exfiltration risks detected.

19
Просканировано файлов
3,537
Проанализировано строк
0
находки
1
Всего аудитов
Проблем безопасности не найдено
Проверено: claude

Оценка качества

45
Архитектура
100
Сопровождаемость
87
Контент
32
Сообщество
100
Безопасность
83
Соответствие спецификации

Что вы можете построить

Документация архитектуры ПО

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

Визуализация бизнес-процессов

Создание блок-схем, временных шкал с вехами и матриц сравнения для презентаций заинтересованным сторонам и документации процессов

Анализ первопричин

Построение диаграмм Исикавы и организационных диаграмм для выявления проблем и представления выводов на ретроспективах команды

Попробуйте эти промпты

Базовая диаграмма архитектуры 
Создайте 3-слойную диаграмму архитектуры, показывающую фронтенд, бэкенд API-сервисы и уровни баз данных для приложения электронной коммерции. Включите основные компоненты в каждом слое и покажите поток данных между ними.
Блок-схема системы 
Сгенерируйте блок-схему процесса входа пользователя, включающую: начало, ввод учётных данных, точку принятия решения о проверке учётных данных, ветви успеха/неудачи, создание сессии и конечные состояния. Используйте стандартные символы блок-схем.
Диаграмма маховика роста 
Спроектируйте диаграмму маховика роста для SaaS-продукта, показывающую цикл: Привлечение пользователей -> Активация -> Создание ценности -> Удержание -> Расширение -> Рекомендации -> Привлечение. Используйте круговую раскладку со стрелками, показывающими петлю обратной связи.
Сложный анализ Исикавы 
Создайте диаграмму Исикавы, анализирующую причины низкой производительности приложения. Используйте 5 категорий (Инфраструктура, Код, База данных, Сеть, Внешние сервисы) с 3-4 конкретными причинами под каждой. Рассчитайте координаты для правильных углов и отступов.

Лучшие практики

  • Всегда используйте fit-content для высоты узлов, содержащих текст, чтобы предотвратить обрезку текста
  • Применяйте принцип «снаружи светло, внутри тяжело»: используйте светлые цвета фона для контейнеров и белый для узлов контента
  • Держите линии соединителей серыми (#BBBFC4) и используйте цвет в первую очередь для заполнения узлов, чтобы уменьшить визуальный шум
  • Для flex-контейнеров опускайте координаты x/y, так как они игнорируются — используйте вместо этого свойство layout
  • Размещайте соединители в массиве узлов верхнего уровня, никогда не вкладывайте внутрь дочерних элементов frame

Избегать

  • Установка явных координат x/y внутри контейнеров с flex-раскладкой — координаты игнорируются
  • Запись фиксированных числовых значений высоты для текстовых узлов вместо использования fit-content
  • Вложение элементов соединителей внутрь дочерних элементов frame вместо корневого массива nodes
  • Использование цветных линий соединителей, создающих визуальный беспорядок, вместо тонких серых
  • Перегруженность диаграмм более чем 12 узлами без группировки или упрощения

Часто задаваемые вопросы

В чём разница между путём DSL и путём Mermaid?
Путь DSL использует собственный JSON-формат Lark для точного контроля над макетом, цветами и позиционированием. Путь Mermaid использует стандартный синтаксис Mermaid для автоматической раскладки распространённых типов диаграмм, таких как блок-схемы, интеллект-карты и диаграммы последовательности. Выбирайте DSL для пользовательских макетов и Mermaid для стандартных типов диаграмм.
Нужно ли устанавливать какие-либо зависимости перед использованием этого навыка?
Да, вам нужен Node.js 18+ и пакет @larksuite/whiteboard-cli. Установите его глобально командой: npm install -g @larksuite/whiteboard-cli@^0.1.0. Для загрузки в документы Lark также требуется инструмент lark-cli.
Можно ли загружать диаграммы напрямую в Lark whiteboard?
Да, используйте команду lark-cli docs +whiteboard-update с токеном whiteboard. Для существующих whiteboard сначала используйте --overwrite --dry-run, чтобы проверить существующий контент, согласуйте с пользователем, затем выполните без --dry-run.
Когда следует использовать генерацию скриптов, а когда писать JSON напрямую?
Используйте генерацию скриптов (Node.js .js файлы) для диаграмм, требующих расчёта координат, таких как диаграммы Исикавы, столбчатые диаграммы, линейные графики или любой макет с абсолютным позиционированием. Пишите JSON напрямую для макетов на основе flex, таких как диаграммы архитектуры и организационные диаграммы.
Как исправить обрезку текста в моей диаграмме?
Установите высоту узла в 'fit-content' вместо фиксированного числа. Это позволяет узлу расширяться в зависимости от содержимого текста. Также проверьте, достаточна ли ширина узла для длины текста.
Что делать, если диаграмма выглядит переполненной или с перекрытиями?
Увеличьте значения gap и padding в свойствах макета frame. Для flex-раскладок gap контролирует расстояние между дочерними элементами. Для абсолютного позиционирования вручную отрегулируйте координаты или перегенерируйте с большими константами отступов в скрипте.

Сведения для разработчиков

Автор

larksuite

Лицензия

MIT

Репозиторий

https://github.com/larksuite/cli/tree/main/skills/lark-whiteboard/

Ссылка

main

Структура файлов

📁 references/

📄 connectors.md

📄 content.md

📄 layout.md

📄 schema.md

📄 style.md

📄 typography.md

📁 scenes/

📄 architecture.md

📄 bar-chart.md

📄 comparison.md

📄 fishbone.md

📄 flywheel.md

📄 funnel.md

📄 line-chart.md

📄 mermaid.md

📄 milestone.md

📄 organization.md

📄 pyramid.md

📄 treemap.md

📄 SKILL.md