How do I install the Mermaid To Webp skill?

Run npx skillmds@latest add haboshi/mermaid-to-webp in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mermaid To Webp safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mermaid To Webp?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mermaid To Webp free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mermaid To Webp?

haboshi (@haboshi) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mermaid To Webp by haboshi — Agent Skill

Name: Mermaid To Webp
Rating: 4.2 (5 reviews)
Author: haboshi

Mermaid To Webp

Mermaid記法のダイアグラムをWebP/PNG画像に変換。フローチャート、シーケンス図、ER図、ガントチャート等に対応。「Mermaidで図を作って画像にして」「フローチャートを画像化」「ダイアグラムをWebPに」で発動。

haboshi Updated Sep 10, 2026

File contents

Mermaid to WebP/PNG Converter

Mermaid記法のダイアグラムをWebPまたはPNG画像に変換するプラグイン。

変換フロー:

[Mermaid Text] -> [mermaid-cli] -> [PNG] -> [sharp] -> [WebP/PNG]

使用タイミング

Mermaidで図を作って画像にしたいとき
フローチャート・シーケンス図を画像として出力したいとき
ドキュメント用のダイアグラム画像が必要なとき

対応ダイアグラム

フローチャート (flowchart/graph)
シーケンス図 (sequenceDiagram)
クラス図 (classDiagram)
状態図 (stateDiagram)
ER図 (erDiagram)
ガントチャート (gantt)
パイチャート (pie)
マインドマップ (mindmap)

クイックスタート

# ファイルから変換
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

注意

mermaid-cliはPuppeteerを使用するため、初回実行時にChromiumのダウンロードが発生する可能性がある
一時ファイルは処理完了後に自動クリーンアップされる

前提条件

Node.js 18+
@mermaid-js/mermaid-cli
sharp

---name: mermaid-to-webpdescription: Mermaid記法のダイアグラムをWebP/PNG画像に変換。フローチャート、シーケンス図、ER図、ガントチャート等に対応。「Mermaidで図を作って画像にして」「フローチャートを画像化」「ダイアグラムをWebPに」で発動。---# Mermaid to WebP/PNG ConverterMermaid記法のダイアグラムをWebPまたはPNG画像に変換するプラグイン。**変換フロー:**```[Mermaid Text] -> [mermaid-cli] -> [PNG] -> [sharp] -> [WebP/PNG]```## 使用タイミング- Mermaidで図を作って画像にしたいとき- フローチャート・シーケンス図を画像として出力したいとき- ドキュメント用のダイアグラム画像が必要なとき## 対応ダイアグラム- フローチャート (flowchart/graph)- シーケンス図 (sequenceDiagram)- クラス図 (classDiagram)- 状態図 (stateDiagram)- ER図 (erDiagram)- ガントチャート (gantt)- パイチャート (pie)- マインドマップ (mindmap)## クイックスタート```bash# ファイルから変換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 |## 注意- mermaid-cliはPuppeteerを使用するため、初回実行時にChromiumのダウンロードが発生する可能性がある- 一時ファイルは処理完了後に自動クリーンアップされる## 前提条件- Node.js 18+- @mermaid-js/mermaid-cli- sharp

Frequently asked questions