mermaid-tools

Mermaid ツール

概要

このスキルを使用すると、Markdown ファイルから Mermaid 図を抽出し、高品質な PNG 画像を生成できます。移植性と信頼性を確保するために、必要なスクリプト（extract-and-generate.sh、extract_diagrams.py、puppeteer-config.json）がすべて scripts/ ディレクトリにバンドルされています。

基本的なワークフロー

標準的な図の抽出と生成

バンドルされている extract-and-generate.sh スクリプトを使用して、Markdown ファイルから Mermaid 図を抽出し、PNG 画像を生成します。

cd "${CLAUDE_SKILL_DIR}/scripts"
./extract-and-generate.sh "<markdown_file>" "<output_directory>"

パラメーター：

• <markdown_file>：Mermaid 図を含む Markdown ファイルへのパス
• <output_directory>：（任意）出力ファイルの保存先ディレクトリ。既定では <markdown_file_directory>/diagrams です。

例：

cd "${CLAUDE_SKILL_DIR}/scripts"
./extract-and-generate.sh "<markdown_file>" "<output_directory>"

スクリプトの処理内容

1. Markdown ファイルからすべての Mermaid コードブロックを抽出します
2. 登場順に連番（01、02、03 など）を付けます
3. 各図の .mmd ファイルを生成します
4. サイズを自動調整して高解像度の PNG 画像を作成します
5. 生成したすべての PNG ファイルを検証します

出力ファイル

各図について、スクリプトは以下を生成します。

• 01-diagram-name.mmd - 抽出した Mermaid コード
• 01-diagram-name.png - 高解像度の PNG 画像

連番を付けることで、図の順序を元のドキュメントと同じに保てます。

高度な使い方

カスタムサイズとスケーリング

環境変数を使用して既定のサイズを変更します。

cd "${CLAUDE_SKILL_DIR}/scripts"
MERMAID_WIDTH=1600 MERMAID_HEIGHT=1200 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

使用可能な変数：

• MERMAID_WIDTH（既定値：1200）- 基本の幅（ピクセル単位）
• MERMAID_HEIGHT（既定値：800）- 基本の高さ（ピクセル単位）
• MERMAID_SCALE（既定値：2）- 高解像度出力の倍率

プレゼンテーション向けの高解像度出力

cd "${CLAUDE_SKILL_DIR}/scripts"
MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

印刷品質の出力

cd "${CLAUDE_SKILL_DIR}/scripts"
MERMAID_SCALE=5 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

サイズの自動調整機能

スクリプトは、図の種類（ファイル名から判定）に応じてサイズを自動調整します。

• タイムライン／ガント：2400×400（幅広で高さは低め）
• アーキテクチャ／システム／キャッシュ：2400×1600（大きく詳細）
• 監視／ワークフロー／シーケンス／API：2400×800（プロセスフロー向けの幅広サイズ）
• 既定：1200×800（標準サイズ）

抽出処理でコンテキストに応じた名前を付けると、適切なサイズの自動調整が行われやすくなります。

重要な原則

バンドルされたスクリプトを使用する

重要：このスキルの scripts/ ディレクトリにある、バンドル済みの extract-and-generate.sh スクリプトを使用してください。必要な依存関係はすべて一緒にバンドルされています。

スクリプトのディレクトリに移動する

依存関係（extract_diagrams.py と puppeteer-config.json）を正しく見つけられるよう、スクリプトを自身のディレクトリから実行してください。

cd "${CLAUDE_SKILL_DIR}/scripts"
./extract-and-generate.sh "<markdown_file>" "<output_directory>"

先に scripts/ ディレクトリへ移動せずにスクリプトを実行すると、依存関係が見つからず失敗する場合があります。

前提条件の確認

スクリプトを実行する前に、依存関係がインストールされていることを確認してください。

1. mermaid-cli：mmdc --version
2. Google Chrome：google-chrome-stable --version
3. Python 3：python3 --version

不足しているものがある場合は、インストール方法について references/setup_and_troubleshooting.md を参照してください。

トラブルシューティング

詳しいトラブルシューティングについては、以下の項目を扱っている references/setup_and_troubleshooting.md を参照してください。

• ブラウザーの起動失敗
• 権限の問題
• 図が見つからない
• Python による抽出の失敗
• 出力品質の問題
• 図の種類に応じたサイズ設定の問題

よくある問題の簡単な解決方法：

アクセス許可がありません：

chmod +x "${CLAUDE_SKILL_DIR}/scripts/extract-and-generate.sh"

出力品質が低い：

MERMAID_SCALE=3 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

Chrome／Puppeteer のエラー： WSL2 の依存関係がすべてインストールされていることを確認してください（一覧はリファレンスを参照してください）。

バンドルされたリソース

scripts/

このスキルには、Mermaid 図の生成に必要なスクリプトがすべてバンドルされています。

• extract-and-generate.sh - 抽出と PNG 生成を統括するメインスクリプト
• extract_diagrams.py - Markdown から Mermaid コードブロックを抽出する Python スクリプト
• puppeteer-config.json - WSL2 環境向けの Chrome／Puppeteer 設定

依存関係を正しく見つけられるよう、すべてのスクリプトを scripts/ ディレクトリから実行してください。

references/setup_and_troubleshooting.md

以下を含む包括的なリファレンスドキュメントです。

• 前提条件の完全なインストール手順
• 環境変数の詳細なリファレンス
• 詳細なトラブルシューティングガイド
• WSL2 固有の Chrome 依存関係のセットアップ
• 検証手順

セットアップの問題、インストールの問題、または高度なカスタマイズのニーズに対応する際は、このリファレンスを読み込んでください。