Mermaid Tools

概要

このスキルは、Markdownファイルから Mermaid ダイアグラムを抽出し、高品質の PNG 画像を生成する機能を提供します。このスキルは、携帯性と信頼性のため、scripts/ ディレクトリにすべての必要なスクリプト (extract-and-generate.sh、extract_diagrams.py、puppeteer-config.json) をバンドルしています。

コアワークフロー

標準的なダイアグラム抽出と生成

Markdownファイルから Mermaid ダイアグラムを抽出し、バンドルされた extract-and-generate.sh スクリプトを使用して 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>"

スマートサイジング機能

スクリプトは、ダイアグラムタイプ（ファイル名から検出）に基づいて寸法を自動的に調整します：

• Timeline/Gantt: 2400×400 （幅広で短い）
• Architecture/System/Caching: 2400×1600 （大きく詳細）
• Monitoring/Workflow/Sequence/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>"

最初にスクリプトディレクトリに移動せずにスクリプトを実行すると、依存関係の欠落により失敗する可能性があります。

前提条件の確認

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

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 抽出の失敗
• 出力品質の問題
• ダイアグラム固有のサイジングの問題

一般的な問題の簡単な修正：

Permission denied:

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 依存関係セットアップ
• 検証手順

セットアップの問題、インストール問題、または高度なカスタマイズが必要な場合は、このリファレンスを参照してください。