/mermaid-render - Рендер mermaid-диаграмм в изображения
Тонкая обертка над mmdc (mermaid-cli). Внутри Puppeteer + Chrome headless + mermaid.js, как в peng-shawn/mermaid-mcp-server, но без MCP-сервера и без Docker.
Зависимости
mmdc (@mermaid-js/mermaid-cli) - проверь: mmdc --version. Если нет - npm install -g @mermaid-js/mermaid-cli.- Python 3 в PATH (для скрипта-обертки).
Использование
python ~/.claude/skills/mermaid-render/scripts/render.py <вход> [опции]
Сценарии входа
| Расширение |
Поведение |
.mmd / .mermaid |
Один файл с диаграммой -> одна картинка |
.md / .markdown |
Извлекает все блоки ```mermaid -> по картинке на блок (<имя>-1.png, <имя>-2.png, ...) |
Опции
| Флаг |
По умолчанию |
Назначение |
-o, --output |
рядом с входом |
Выходной файл (для .md - префикс перед -N.<ext>) |
-t, --theme |
default |
default / forest / dark / neutral |
-b, --bg |
white |
white, transparent, #F0F0F0 |
-f, --format |
png |
png / svg / pdf |
-w, --width |
mmdc default 800 |
Ширина в пикселях |
-H, --height |
mmdc default 600 |
Высота в пикселях |
-s, --scale |
2 |
Puppeteer scale - 2 для retina |
--verbose |
выкл |
Показать вывод mmdc |
Примеры
# Простой PNG рядом с входом, дефолтная тема, scale=2
python ~/.claude/skills/mermaid-render/scripts/render.py ./diagram.mmd
# Темная тема, прозрачный фон, SVG
python ~/.claude/skills/mermaid-render/scripts/render.py ./diagram.mmd -t dark -b transparent -f svg
# Все блоки mermaid из markdown в PNG-файлы
python ~/.claude/skills/mermaid-render/scripts/render.py ./README.md
# Указать выходной путь
python ~/.claude/skills/mermaid-render/scripts/render.py ./d.mmd -o ./out/result.png
Алгоритм работы для Claude
- Уточни у пользователя входной файл, если не передан явно. Поддерживаются
.mmd, .mermaid, .md.
- Если пользователь не указал параметры рендера - используй дефолты (PNG, default-тема, белый фон, scale=2).
- Запусти скрипт через Bash:
python ~/.claude/skills/mermaid-render/scripts/render.py "<путь>" [-t ...] [-b ...] [-f ...]
- Скрипт печатает список созданных файлов с размерами - покажи пользователю.
- Если пользователь хочет встроить картинки в Markdown/Word - после рендера используй существующие скилы (
md-to-docx для Word, обычные ![] ссылки для Markdown).
Поведение при ошибках
- mmdc не найден - скрипт выйдет с кодом 2 и подскажет команду установки.
- Входной файл не найден или неподдерживаемое расширение - код 2 с понятным сообщением.
- mmdc вернул ошибку (синтаксис mermaid) - код мммдц проброшен, stderr показан.
- В .md нет блоков ```mermaid - код 1, предупреждение пользователю.
Связь с другими скилами
mermaid-diagrams - руководство как СОСТАВЛЯТЬ читаемые mermaid-диаграммы. Этот скилл делает шаг рендера ПОСЛЕ составления.md-to-visio - конвертация mermaid из markdown в нативный Visio (.vsdx). Использовать когда нужен редактируемый чертеж, а не растровая картинка.md-to-docx - подключение результирующих PNG к Word-документу.
1---2name: mermaid-render-23description: Рендерит mermaid-диаграммы в PNG/SVG/PDF через локальный mermaid-cli (mmdc). Используй когда пользователь просит отрендерить mermaid, сделать PNG из диаграммы, превратить mermaid в картинку, конвертировать .mmd в png/svg/pdf, извлечь mermaid из markdown в картинки, сохранить блок mermaid как изображение, нарисовать диаграмму. Принимает .mmd / .mermaid (одна диаграмма) или .md (рендерит каждый блок ```mermaid в отдельную картинку). Поддерживает темы (default/forest/dark/neutral), цвет фона и масштаб для retina. Без Docker и MCP - чистый локальный mmdc.4---56# /mermaid-render - Рендер mermaid-диаграмм в изображения78Тонкая обертка над `mmdc` (mermaid-cli). Внутри Puppeteer + Chrome headless + mermaid.js, как в peng-shawn/mermaid-mcp-server, но без MCP-сервера и без Docker.910## Зависимости1112- `mmdc` (`@mermaid-js/mermaid-cli`) - проверь: `mmdc --version`. Если нет - `npm install -g @mermaid-js/mermaid-cli`.13- Python 3 в PATH (для скрипта-обертки).1415## Использование1617```bash18python ~/.claude/skills/mermaid-render/scripts/render.py <вход> [опции]19```2021### Сценарии входа2223| Расширение | Поведение |24|-----------|-----------|25| `.mmd` / `.mermaid` | Один файл с диаграммой -> одна картинка |26| `.md` / `.markdown` | Извлекает все блоки ` ```mermaid ` -> по картинке на блок (`<имя>-1.png`, `<имя>-2.png`, ...) |2728### Опции2930| Флаг | По умолчанию | Назначение |31|------|--------------|-----------|32| `-o, --output` | рядом с входом | Выходной файл (для .md - префикс перед `-N.<ext>`) |33| `-t, --theme` | `default` | `default` / `forest` / `dark` / `neutral` |34| `-b, --bg` | `white` | `white`, `transparent`, `#F0F0F0` |35| `-f, --format` | `png` | `png` / `svg` / `pdf` |36| `-w, --width` | mmdc default 800 | Ширина в пикселях |37| `-H, --height` | mmdc default 600 | Высота в пикселях |38| `-s, --scale` | `2` | Puppeteer scale - 2 для retina |39| `--verbose` | выкл | Показать вывод mmdc |4041## Примеры4243```bash44# Простой PNG рядом с входом, дефолтная тема, scale=245python ~/.claude/skills/mermaid-render/scripts/render.py ./diagram.mmd4647# Темная тема, прозрачный фон, SVG48python ~/.claude/skills/mermaid-render/scripts/render.py ./diagram.mmd -t dark -b transparent -f svg4950# Все блоки mermaid из markdown в PNG-файлы51python ~/.claude/skills/mermaid-render/scripts/render.py ./README.md5253# Указать выходной путь54python ~/.claude/skills/mermaid-render/scripts/render.py ./d.mmd -o ./out/result.png55```5657## Алгоритм работы для Claude58591. Уточни у пользователя входной файл, если не передан явно. Поддерживаются `.mmd`, `.mermaid`, `.md`.602. Если пользователь не указал параметры рендера - используй дефолты (PNG, default-тема, белый фон, scale=2).613. Запусти скрипт через Bash:62 ```bash63 python ~/.claude/skills/mermaid-render/scripts/render.py "<путь>" [-t ...] [-b ...] [-f ...]64 ```654. Скрипт печатает список созданных файлов с размерами - покажи пользователю.665. Если пользователь хочет встроить картинки в Markdown/Word - после рендера используй существующие скилы (`md-to-docx` для Word, обычные `![]` ссылки для Markdown).6768## Поведение при ошибках6970- mmdc не найден - скрипт выйдет с кодом 2 и подскажет команду установки.71- Входной файл не найден или неподдерживаемое расширение - код 2 с понятным сообщением.72- mmdc вернул ошибку (синтаксис mermaid) - код мммдц проброшен, stderr показан.73- В .md нет блоков ```mermaid - код 1, предупреждение пользователю.7475## Связь с другими скилами7677- `mermaid-diagrams` - руководство как СОСТАВЛЯТЬ читаемые mermaid-диаграммы. Этот скилл делает шаг рендера ПОСЛЕ составления.78- `md-to-visio` - конвертация mermaid из markdown в нативный Visio (.vsdx). Использовать когда нужен редактируемый чертеж, а не растровая картинка.79- `md-to-docx` - подключение результирующих PNG к Word-документу.
Desko77