mermaid-render
Рендерит mermaid-диаграммы в PNG/SVG/PDF через локальный mermaid-cli (mmdc). Используй когда пользователь просит отрендерить mermaid, сделать PNG из диаграммы, превратить mermaid в картинку, конвертировать .mmd в png/svg/pdf, извлечь mermaid из markdown в картинки, сохранить блок
Install
npx skills add https://github.com/Desko77/claude-code-skills-1c/tree/main/skills/mermaid-render
claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install desko77-claude-code-skills-1c@llmmart
git clone https://github.com/Desko77/claude-code-skills-1c.git
The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole desko77/claude-code-skills-1c collection as a plugin from our marketplace. Git is the plain clone.
Skill manifest
/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-документу.
Files (claude-code-skills-1c)
-
scripts
-
render.py 5.9 KB
"""Рендер mermaid-диаграмм в PNG/SVG/PDF через локальный mmdc (mermaid-cli). Поддержка: - .mmd / .mermaid - один входной файл с диаграммой - .md - извлекает все блоки ```mermaid и рендерит каждый отдельным файлом Под капотом - mermaid-cli (npm i -g @mermaid-js/mermaid-cli), без MCP и Docker. """ from __future__ import annotations import argparse import os import shutil import subprocess import sys from glob import glob from pathlib import Path # Вывод содержит кириллицу. Без явного переключения печать падает с UnicodeEncodeError # везде, где консоль не в UTF-8: сборочный агент, чужая локаль. sys.stdout.reconfigure(encoding='utf-8') sys.stderr.reconfigure(encoding='utf-8') VALID_THEMES = {"default", "forest", "dark", "neutral"} VALID_FORMATS = {"png", "svg", "pdf"} MD_EXTS = {".md", ".markdown"} MMD_EXTS = {".mmd", ".mermaid"} def resolve_mmdc() -> str: """Найти исполняемый mmdc (.cmd на Windows, .js обертку на Unix).""" for cand in ("mmdc.cmd", "mmdc"): path = shutil.which(cand) if path: return path sys.stderr.write( "ERROR: mmdc не найден в PATH.\n" "Установите: npm install -g @mermaid-js/mermaid-cli\n" ) sys.exit(2) def parse_args() -> argparse.Namespace: p = argparse.ArgumentParser( description="Рендер mermaid-диаграмм в PNG/SVG/PDF через mmdc.", ) p.add_argument("input", help="Путь к .mmd / .mermaid / .md файлу") p.add_argument("-o", "--output", help="Путь к выходному файлу. Если не указан - рядом с входом.") p.add_argument("-t", "--theme", default="default", choices=sorted(VALID_THEMES), help="Тема диаграммы (default)") p.add_argument("-b", "--bg", default="white", help="Цвет фона: white, transparent, '#F0F0F0' (default: white)") p.add_argument("-f", "--format", default="png", choices=sorted(VALID_FORMATS), help="Формат вывода (default: png)") p.add_argument("-w", "--width", type=int, default=None, help="Ширина в пикселях (mmdc default: 800)") p.add_argument("-H", "--height", type=int, default=None, help="Высота в пикселях (mmdc default: 600)") p.add_argument("-s", "--scale", type=int, default=2, help="Puppeteer scale factor (default: 2 для retina)") p.add_argument("--quiet", action="store_true", default=True, help="Подавить логи mmdc (default: вкл)") p.add_argument("--verbose", action="store_true", help="Показать вывод mmdc (отменяет --quiet)") return p.parse_args() def determine_output(input_path: Path, output: str | None, fmt: str) -> Path: if output: return Path(output).expanduser().resolve() return input_path.with_suffix(f".{fmt}") def list_outputs(output: Path, is_markdown: bool) -> list[Path]: """mmdc для .md создает <stem>-1.<ext>, <stem>-2.<ext> и т.д.""" if not is_markdown: return [output] if output.exists() else [] pattern = f"{output.with_suffix('').name}-*{output.suffix}" matches = sorted(output.parent.glob(pattern)) return matches if matches else ([output] if output.exists() else []) def main() -> int: args = parse_args() input_path = Path(args.input).expanduser().resolve() if not input_path.is_file(): sys.stderr.write(f"ERROR: входной файл не найден - {input_path}\n") return 2 ext = input_path.suffix.lower() is_markdown = ext in MD_EXTS is_mermaid = ext in MMD_EXTS if not (is_markdown or is_mermaid): sys.stderr.write( f"ERROR: неподдерживаемое расширение '{ext}'. " f"Ожидается .mmd, .mermaid, .md\n" ) return 2 output_path = determine_output(input_path, args.output, args.format) output_path.parent.mkdir(parents=True, exist_ok=True) mmdc = resolve_mmdc() cmd = [ mmdc, "-i", str(input_path), "-o", str(output_path), "-t", args.theme, "-b", args.bg, "-e", args.format, "-s", str(args.scale), ] if args.width: cmd += ["-w", str(args.width)] if args.height: cmd += ["-H", str(args.height)] if args.quiet and not args.verbose: cmd.append("--quiet") try: result = subprocess.run(cmd, capture_output=True, text=True, encoding="utf-8", errors="replace") except FileNotFoundError as e: sys.stderr.write(f"ERROR: не удалось запустить mmdc - {e}\n") return 2 if result.returncode != 0: sys.stderr.write("ERROR: mmdc вернул ненулевой код\n") if result.stdout: sys.stderr.write(result.stdout) if result.stderr: sys.stderr.write(result.stderr) return result.returncode if args.verbose and result.stdout: sys.stdout.write(result.stdout) outputs = list_outputs(output_path, is_markdown) if not outputs: sys.stderr.write( "WARN: mmdc отработал успешно, но выходных файлов не обнаружено. " "Возможно в .md нет блоков ```mermaid.\n" ) return 1 print(f"Готово: создано файлов - {len(outputs)}") for p in outputs: size_kb = p.stat().st_size / 1024 print(f" {p} ({size_kb:.1f} KB)") return 0 if __name__ == "__main__": sys.exit(main())
-
-
SKILL.md 5.3 KB
--- name: mermaid-render description: "Рендерит 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." argument-hint: "<входной_файл> [-o OUTPUT] [-t THEME] [-b BG] [-f png|svg|pdf] [-s SCALE]" allowed-tools: - Bash - Read - Glob --- # /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 (для скрипта-обертки). ## Использование ```bash 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 | ## Примеры ```bash # Простой 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 1. Уточни у пользователя входной файл, если не передан явно. Поддерживаются `.mmd`, `.mermaid`, `.md`. 2. Если пользователь не указал параметры рендера - используй дефолты (PNG, default-тема, белый фон, scale=2). 3. Запусти скрипт через Bash: ```bash python ~/.claude/skills/mermaid-render/scripts/render.py "<путь>" [-t ...] [-b ...] [-f ...] ``` 4. Скрипт печатает список созданных файлов с размерами - покажи пользователю. 5. Если пользователь хочет встроить картинки в 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-документу.
Comments (0)
Sign in to join the conversation.
Reviews (0)
No reviews yet.
No comments yet.