Claude Skill

mermaid-render

Рендерит mermaid-диаграммы в PNG/SVG/PDF через локальный mermaid-cli (mmdc). Используй когда пользователь просит отрендерить mermaid, сделать PNG из диаграммы, превратить mermaid в картинку, конвертировать .mmd в png/svg/pdf, извлечь mermaid из markdown в картинки, сохранить блок

LLM Mart · 0 points · 14 views 0 listing impressions 0 install-command copies
Virus-scanned Reviewed automatically before listing.

Full trust report

Download Desko77-claude-code-skills-1c-skills_mermaid-render-eb281b4.zip · 4 KB
Part of desko77/claude-code-skills-1c — 48 skills

Install

skills CLI npx skills add https://github.com/Desko77/claude-code-skills-1c/tree/main/skills/mermaid-render
Claude Code claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install desko77-claude-code-skills-1c@llmmart
Git 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

  1. Уточни у пользователя входной файл, если не передан явно. Поддерживаются .mmd, .mermaid, .md.
  2. Если пользователь не указал параметры рендера - используй дефолты (PNG, default-тема, белый фон, scale=2).
  3. Запусти скрипт через 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-документу.
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.

No comments yet.

Reviews (0)

No reviews yet.

Related