Перейти к руководству
diagramавтор Garry Tan

Diagram Skill.

Skill для Claude Code и Codex для диаграмм и графиков: превращает описание или Mermaid-код в редактируемый файл Excalidraw, а также SVG и PNG.

  • Diagrams & Data Visualization
  • Diagram
garrytan/gstack · diagram/SKILL.mdSKILL.md
--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules
Вводная часть и заголовки разделов прочитаны из исходного файла 2026-09-14 · 16 276 символов полностью

01 Что делает

Что делает Skill диаграмм в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Преобразует описание на английском языке или исходник Mermaid в триплет диаграммы: исходник Mermaid (.mmd), редактируемый файл Excalidraw (.excalidraw), открывающийся на excalidraw.com, и результаты рендеринга SVG + PNG. Рендеринг полностью офлайн через локальный loopback-сервер — использует браузер Aside, если он запущен, иначе собственный headless-браузер gstack.

Блок-схемы (graph LR/TD) и диаграммы последовательностей создают полностью редактируемые сцены Excalidraw с настоящими блоками, стрелками и текстом. Другие типы диаграмм Mermaid (state, class, gantt) рендерятся в SVG/PNG и экспортируются как единый элемент-изображение в файле Excalidraw — его можно перемещать и аннотировать, но не редактировать по элементам. Исходник Mermaid остаётся единственным источником истины для итераций.

Что он выдаёт

  • Исходный файл Mermaid (.mmd), служащий удобным для LLM форматом обмена и единственным источником истины.
Смотрите пример запроса ↗

Как это работает

  1. 01
    Написание исходника Mermaid

    Напишите Mermaid в соответствии с запросом пользователя. Предпочитайте graph LR для конвейеров/потоков и graph TD для иерархий.

  2. 02
    Разместите Render Bundle один раз за сессию

    Разместите diagram-render.html в директории промежуточного хранения рендеринга gstack под ${TMPDIR:-/tmp}/gstack-render, адресуемой по содержимому через SHA бандла.

  3. 03
    Отрендерите триплет одной командой

    Напишите файл .mmd, затем запустите gstack-render с размещённым бандлом.

  4. 04
    Показать и передать результат

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

02 Определите своё применение

Когда использовать навык diagram

Используйте скилл diagram в Claude Code или Codex, когда задача — диаграммы и графики такого рода. Применимость и ограничения ниже взяты из собственного файла скилла.

Хорошо подходит

  • Пользователь просит сделать диаграмму, нарисовать архитектуру, создать блок-схему, изобразить это в виде диаграммы или визуализировать поток.
  • Создание чётких векторных диаграмм для документации наряду с растровыми версиями для чата, issue или README.
  • Генерация редактируемого файла Excalidraw, который пользователь может открыть на excalidraw.com, перемещать блоки и продолжать работу.

Знайте границы

  • Диаграммы с более чем 15 узлами в одной сцене — разбивайте на несколько диаграмм для удобства восприятия.
  • Диаграммы состояний, классов, gantt и другие типы Mermaid, не относящиеся к flowchart/sequence, создают файл Excalidraw, который можно перемещать, но не редактировать поэлементно.

Что предоставить

  • Описание на английском или исходный код MermaidПользователь предоставляет описание диаграммы для создания или существующий исходный код Mermaid для рендеринга.

03 Внутри скилла

Правила, которые skill diagram задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Никогда не выпускать без рендеринга

    Файл .mmd сам по себе не является диаграммой. Если рендеринг невозможен (отсутствует bundle или нет доступного браузера), сообщите о блокере и остановитесь.

  2. Блок-схемы и диаграммы последовательностей полностью редактируемы

    Блок-схемы (graph LR/TD) и диаграммы последовательностей конвертируются в полностью редактируемые сцены Excalidraw с реальными блоками, стрелками и текстом. Остальные типы Mermaid экспортируются как один элемент-изображение.

  3. Кодировать исходный код в base64 для передачи в браузер

    Передавайте исходный код Mermaid на страницу рендеринга через base64, чтобы избежать интерпретации обратных апострофов, ${ } и обратных слэшей в исходном коде. Никогда не встраивайте содержимое файла в шаблонный литерал JS.

  4. Выходной каталог определяется контекстом Git

    Записывайте в ./diagrams/, когда cwd является git-репозиторием (артефакты, которые пользователь может закоммитить), в противном случае — в /tmp/gstack-diagrams/. Формируйте slug из темы в kebab-case, максимум 40 символов.

  5. Ширина PNG фиксирована на 1950px

    Растеризованный PNG всегда имеет ширину 1950 пикселей, что соответствует 300dpi для размещения 6,5 дюйма.

  6. Рендеринг полностью офлайн

    Bundle diagram-render автономен и обслуживается с loopback. Никакого CDN, никакой сети.

  7. Повторный рендеринг отредактированного Excalidraw без изменения Mermaid

    Когда пользователь редактирует файл .excalidraw и хочет выполнить повторный рендеринг, загрузите файл сцены и экспортируйте SVG/PNG напрямую — не регенерируйте из исходного кода Mermaid.

  8. Предпочитайте встраивание .mmd для целей PDF

    Для диаграмм, попадающих в PDF, напомните пользователю, что make-pdf рендерит блоки Mermaid нативно — встраивание .mmd в markdown лучше, чем встраивание PNG.

04 Применение

Установить diagram в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить diagram в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

Общая форма CLI skills для diagram/SKILL.md; репозиторий может документировать собственный путь.

Дайте навыку первую задачу на диаграммы и графики

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Create a flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Прочитайте вывод PNG в диалоге, чтобы проверить, что диаграмма отрендерилась корректно и соответствует запросу пользователя.
  • Проверьте вывод gstack-render на строки ERROR:, указывающие на ошибки парсинга Mermaid — при их наличии исправьте .mmd и повторите попытку.
  • Проверьте вывод PAGE_ERRORS на 'Error processing Mermaid diagram', чтобы подтвердить, когда конвертер Excalidraw вернулся к одному элементу-изображению.
  • Убедитесь, что во выводе gstack-render присутствуют все три строки OK <path>, подтверждающие запись файлов SVG, PNG и Excalidraw.
  • При повторном рендеринге отредактированных Excalidraw-файлов игнорируйте безвредную WorkerInTheMainChunkError в PAGE_ERRORS — SVG/PNG корректны.

В OpenDesign импортируйте diagram по ссылке из его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
Garry Tan
Repository
github.com/garrytan/gstack Ветка main
Файл skill
diagram/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 71f6048
License
MIT Из LICENSE.
Звёзды репозитория
132 921 Снимок GitHub от 14 сентября 2026 для всего репозитория garrytan/gstack, который содержит 7 навыков в этом каталоге. Не является рейтингом или счётчиком использования для diagram.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. Когда вызывать этот skillИспользуйте для запросов на диаграммы, архитектуру, схемы или визуализации; SVG/PNG используют стиль Mermaid, Excalidraw имеет рисованную эстетику.
  2. Шаг 1 — Составьте диаграммуНапишите исходный код Mermaid; блок-схемы и диаграммы последовательности становятся полностью редактируемыми в Excalidraw; другие типы экспортируются как одно изображение.
  3. Шаг 2 — Подготовьте пакет рендеринга (раз в сессию)Скопируйте diagram-render.html в директорию подготовки рендеринга gstack, адресуемую по контенту через SHA, без конфликтов с параллельными сессиями.
  4. Шаг 3 — Отрендерите тройку файловНапишите .mmd, запустите gstack-render с исходным кодом в base64, выведите SVG/PNG/Excalidraw; проверьте наличие ошибок парсинга и PAGE_ERRORS.
  5. Шаг 4 — Покажите и передайте результатПрочитайте PNG в диалоге, перечислите пути к тройке файлов, отметьте редактируемость Excalidraw; для изменений отредактируйте .mmd и перерендерите.
  6. ПравилаНикогда не поставляйте результат без рендеринга; для целей PDF напомните пользователю, что make-pdf нативно рендерит блоки Mermaid.
  7. Статус завершенияDONE, когда тройка файлов передана; BLOCKED, если пакет отсутствует или браузер недоступен.
Собственное описание skill
«Превратите английское описание (или mermaid-источник) в тройку диаграмм: источник, редактируемый .excalidraw-файл, который можно открыть на excalidraw.com, и отрендеренные SVG + PNG. (gstack)»

Описание из вводной части SKILL.md. Полный файл составляет около 16 276 символов. Прочитать полный файл на GitHub.

06 Перед установкой

Вопросы о skill diagram

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Что происходит, если пакет рендеринга отсутствует или браузер недоступен?

Skill останавливается и сообщает вам собрать пакет, выполнив bun run build:diagram-render в репозитории gstack, или открыть Aside (macOS 15+), если браузер gstack не собран. Skill никогда не устанавливает Aside за вас и не заменяет его CDN или другим рендерером.

Diagram

Запустите diagram на реальной задаче с диаграммами и графиками.

Скачайте OpenDesign, импортируйте diagram из его SKILL.md-ссылки, вставьте промпт выше и прочтите план перед результатом.

Терминал
npx skills add https://github.com/garrytan/gstack --skill diagram

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows