From mermaid-to-webp
Mermaid記法のダイアグラムをWebP/PNG画像に変換。フローチャート、シーケンス図、ER図、ガントチャート等に対応。「Mermaidで図を作って画像にして」「フローチャートを画像化」「ダイアグラムをWebPに」で発動。
How this skill is triggered — by the user, by Claude, or both
Slash command
/mermaid-to-webp:mermaid-to-webpThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Mermaid記法のダイアグラムをWebPまたはPNG画像に変換するプラグイン。
Mermaid記法のダイアグラムをWebPまたはPNG画像に変換するプラグイン。
変換フロー:
[Mermaid Text] -> [mermaid-cli] -> [PNG] -> [sharp] -> [WebP/PNG]
# ファイルから変換
node ${CLAUDE_PLUGIN_ROOT}/scripts/convert.js \
--input diagram.mmd --output output.webp
# 標準入力から変換
echo "graph TD; A-->B;" | node ${CLAUDE_PLUGIN_ROOT}/scripts/convert.js \
--stdin --output output.webp
# オプション付き
node ${CLAUDE_PLUGIN_ROOT}/scripts/convert.js \
--input diagram.mmd --output output.webp \
--theme dark --quality 90 --width 2560 --height 1440
| オプション | 短縮 | 説明 | デフォルト |
|---|---|---|---|
--input | -i | 入力Mermaidファイル (.mmd) | - |
--output | -o | 出力ファイルパス | - |
--stdin | - | 標準入力から読み込み | false |
--width | -w | 出力幅 | 1920 |
--height | -h | 出力高さ | 1080 |
--quality | -q | 品質 1-100 | 85 |
--format | -f | 出力形式: webp, png | webp |
--fit | - | リサイズ方式: contain, cover, fill, inside, outside | contain |
--background | -b | 背景色 | white |
--theme | -t | Mermaidテーマ: default, dark, forest, neutral | default |
npx claudepluginhub haboshi/claude-code-skills --plugin mermaid-to-webpGenerates Mermaid diagrams—flowcharts, sequence, ERD, class, state, Gantt—from text using mmdc CLI. Outputs SVG, PNG, PDF for Markdown docs and READMEs.
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.
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.