Stats
Actions
Tags
How this skill is triggered — by the user, by Claude, or both
Slash command
/mermaid:mermaid-renderThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
委任メッセージまたはユーザーの指示からMermaid構文を把握し、PNG/SVG画像を生成する。
委任メッセージまたはユーザーの指示からMermaid構文を把握し、PNG/SVG画像を生成する。
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/mermaid.py <subcommand> [options]| コマンド | 引数 | 説明 |
|---|---|---|
render <content> -o <path> | content: Mermaid.js構文（必須）, -o: 出力パス（必須、.png/.svg） | Mermaid構文 → PNG/SVG画像 |
render-file <file_path> -o <path> | file_path: Mermaidファイル（必須）, -o: 出力パス（必須、.png/.svg） | Mermaidファイル → PNG/SVG画像 |
# Mermaid構文からPNG画像を生成
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/mermaid.py render "graph TD; A-->B; B-->C;" -o output.png
# Mermaid構文からSVG画像を生成
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/mermaid.py render "graph TD; A-->B; B-->C;" -o output.svg
# Mermaidファイルから画像を生成
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/mermaid.py render-file diagram.mmd -o output.png
取得した情報を以下の形式で返す:
npx claudepluginhub hidetsugu-miya/claude-plugins --plugin mermaidGenerates Mermaid diagrams—flowcharts, sequence, ERD, class, state, Gantt—from text using mmdc CLI. Outputs SVG, PNG, PDF for Markdown docs and READMEs.
Generates error-free Mermaid diagrams (flowcharts, sequence, class, state, ER, gantt, pie, mindmaps, timelines) with strict syntax rules that prevent HTML tags, style directives, and invalid escapes.
Creates and refines Mermaid diagrams (flowcharts, sequence, class, ER, state, Gantt) with live preview and save tools. Supports iterative workflows with theme and format options.