Render Mermaid Cmd — Development skill for Claude Code
Mermaidレンダリングエージェント - Mermaid図をPNG/SVG/PDF画像に変換.
How to install Render Mermaid Cmd
Installs to ~/.claude/commands/wfukatsu-refactoring-agent-for-claude-code-render-mermaid-cmd.md
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/wfukatsu/refactoring-agent-for-claude-code/HEAD/.claude/commands/render-mermaid-cmd.md -o ~/.claude/commands/wfukatsu-refactoring-agent-for-claude-code-render-mermaid-cmd.md Restart Claude Code, or start a new session, for it to be picked up.
What Render Mermaid Cmd does
description: Mermaidレンダリングエージェント - Mermaid図をPNG/SVG/PDF画像に変換。 argument-hint: [対象パス]
Mermaidレンダリングエージェント
Markdownファイル内のMermaid図をPNG/SVG/PDF画像に変換します。
使用方法
# ディレクトリ内のすべてのMermaid図を変換
/render-mermaid ./reports
# 特定ファイルのみ
/render-mermaid ./reports/03_design/context-map.md
# フォーマット指定
/render-mermaid ./reports --format=svg
/render-mermaid ./reports --format=pdf
前提条件
- mmdc(Mermaid CLI)がインストール済みであること
npm install -g @mermaid-js/mermaid-cli
出力
- 各Mermaid図に対応するPN
Alternatives in Development
- Marp Slides — MARP presentation skill for Claude Code — 22 curated example decks, SVG charts, dark/light themes, dashboard c 296 ★
- Claude Cmd — Claude Code Commands Manager 294 ★
- Deep Dive Claude Code — 《深入理解 Claude Code 源码》— 系统剖析 Anthropic Claude Code CLI 的架构设计、工程实践与编程哲学 25 chapters, 101 Mermaid diagrams, 467 c 181 ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Fix Mermaid Cmd
Mermaid修正エージェント - Mermaid図のシンタックスエラーを検出・修正。
Multi Chart Draw Skills
支持多种图表类型的绘制工具,包括思维导图、流程图、数据可视化图表、数学函数图等;可根据用户需求生成 Mermaid、ECharts、Mindmap、DrawIO、GeoGebra 等格式的图表,并导出为 PNG、SVG、
Cc Show
把當前主題畫出來取代散文——文字圖(file tree/call tree/diff)、inline widget(SVG/HTML/Mermaid)、或 Artifact 三選一。視覺是取代說明,不是額外附加
Algorithmic Art Skill
A Claude Agent Skill for algorithmic/generative art: deterministic seeded pieces, render-critique loop, print/
Browser Render
Render HTML/SVG to a PNG/PDF image without flashing the screen.
Meme Render
Render an approved meme into an SVG doodle card (RENDER route)
Related Agents
Figure Engineer
Produces every code-rendered figure: diagrams (Mermaid, D2, Graphviz), charts from data (matplotlib, Vega-Lite
Visual Story Designer
Defines visual concept, section rhythm, diagrams (Mermaid or SVG), comparison layouts, timelines, icon metapho
Meme Doodle Renderer
Use this agent for Phase 5 and the RENDER route of the meme-marketing skill. It turns an approved meme concept