ワークフロー&基本ツール · daymade/claude-code-skills

mermaid-tools

MarkdownファイルからMermaidダイアグラムを抽出し、同梱のスクリプトを使用して高品質なPNG画像を生成します。Mermaidダイアグラムの操作、ダイアグラムのPNG変換、Markdownからのダイアグラム抽出、またはMermaidコードが埋め込まれたMarkdownファイルを処理する際に起動します。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author daymadeGitHub daymade/claude-code-skills ↗Stars 1385License MIT(仓库根 LICENSE;Copyright (c) 2025 daymade;GitHub API spdx MIT)Commit d5c4678cb5
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

2つの同梱スクリプトが連携:extract_diagrams.py が正規表現で Markdown から ```mermaid コードブロックを抽出して番号・名前を付与し、extract-and-generate.sh がファイルごとに mermaid-cli (mmdc) を呼び出して PNG をレンダリングします。

daymade-docs/mermaid-tools/scripts/extract_diagrams.py
mermaid_pattern = r'```mermaid\n(.*?)\n```'
extract_diagrams.py は前後の文脈を参照して直近のセクション見出しから図に名前を付けます(例: 01-diagram-name.mmd)。SKILL.md では可搬性を確保するためスクリプトが scripts/ ディレクトリに同梱されていることを明記しています。

レンダリングエンジンは mermaid-cli + ローカル Chrome:スクリプトは PUPPETEER_EXECUTABLE_PATH で /usr/bin/google-chrome-stable を指定し、puppeteer-config.json と -w/-H/-s のサイズ・拡大縮小パラメータを渡します。

daymade-docs/mermaid-tools/scripts/extract-and-generate.sh
PUPPETEER_EXECUTABLE_PATH="$CHROME_PATH" mmdc \ -i "$mmd_file" \ -o "$diagram.png" \ --puppeteerConfigFile "$CONFIG_FILE" \ -w "$width" \ -H "$height" \ -s "$SCALE_FACTOR"
オンラインの Mermaid サービスに依存しない完全なローカルレンダリングです。puppeteer-config.json には --no-sandbox や --disable-gpu など、コンテナ環境(WSL2 想定)で標準的なパラメータが含まれています。

環境変数の上書きによる高解像度出力:MERMAID_WIDTH/HEIGHT/SCALE のデフォルトは 1200×800×2 であり、スライドや印刷用途では 2400×1800×4 や SCALE=5 に拡大可能です。

daymade-docs/mermaid-tools/SKILL.md
MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
SKILL.md の「High-Resolution Output for Presentations」セクションに明確な例が記載されています。

スマートサイジングによる図名タイプからのサイズ推定:timeline/gantt は幅広かつ扁平に、architecture/system/caching は拡大、workflow/sequence/api は横幅を広げ、デフォルトは 1200×800 です。

daymade-docs/mermaid-tools/SKILL.md
- **Timeline/Gantt**: 2400×400 (wide and short) - **Architecture/System/Caching**: 2400×1600 (large and detailed)
スクリプトは bash の正規表現 [[ "$diagram" =~ timeline|gantt ]] で同ロジックを実装しています。名前は extract_diagrams.py の文脈命名から引き継がれ、両者が連携します。

プロセスの事前依存関係チェック:mmdc、google-chrome-stable、python3 のいずれかが不足している場合、references/setup_and_troubleshooting.md(WSL2 用の Chrome インストール手順と依存リストを含む)を参照するよう促します。

daymade-docs/mermaid-tools/SKILL.md
1. **mermaid-cli**: `mmdc --version` 2. **Google Chrome**: `google-chrome-stable --version` 3. **Python 3**: `python3 --version`
該当リファレンスには Google の apt リポジトリ(dl.google.com)を追加して Chrome をインストールする手順も記載されています(これはインストール時のネットワーク動作です。セキュリティ項目参照)。

実行規則は「scripts/ ディレクトリから実行すること」:スクリプトは ${CLAUDE_SKILL_DIR} で位置を特定し、同ディレクトリ内の extract_diagrams.py や puppeteer-config.json の相対パスに依存します。

daymade-docs/mermaid-tools/SKILL.md
cd "${CLAUDE_SKILL_DIR}/scripts" ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
SKILL.md で繰り返し強調されており('CRITICAL: Use the bundled extract-and-generate.sh')、cd せずに実行すると依存ファイルが見つからず失敗します。

2コア機能

01Markdown からすべての Mermaid コードブロックを抽出し、出現順に番号付け(01, 02, …)
02.mmd ソースファイルと高解像度 .png の生成(幅、高さ、スケール調整可能)
03スマートサイジング:図の種類(timeline/architecture/workflow/など)に応じたキャンバスサイズの自動選択
04出力 PNG の検証(空ファイルチェック、file コマンドによるタイプ確認、identify によるサイズ検証)
05環境変数(MERMAID_WIDTH/HEIGHT/SCALE)によるキャンバス上書き(スライドや印刷向け)
06プライバシーに配慮したローカルレンダリング:図の内容をオンラインサービスに送信しない

3外部依存関係

KindDependency / Endpoint
climermaid-cli (mmdc)
cliGoogle Chrome(/usr/bin/google-chrome-stable,headless 渲染)
clipython3(extract_diagrams.py)
networkdl.google.com(setup 参考文档:加 Chrome apt 源并 sudo apt install,一次性安装)
clifile / sort -V / stat / identify(可选)(bash 工具链)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: bash scripts/extract-and-generate.sh(set -e、ローカル)
  • 网络端点: 外部ネットワークアクセスの宣言: 実行時はなし。セットアップのリファレンスドキュメントに一度限りのインストール操作を含む(wget dl.google.com の公開鍵 + sudo apt install google-chrome-stable)
  • 本地工作目录: ファイルの読み書きと成果物の出力: 出力ディレクトリに .mmd/.png を書き込み(デフォルト: <markdown_file ディレクトリ>/diagrams)、mkdir -p 出力ディレクトリ
監査ノート: 同梱のローカル bash/Python スクリプト + mmdc によるローカルレンダリングを使用し、実行時の外部ネットワーク通信、認証情報の読み取り、ファイル削除は一切行いません。指定されたディレクトリに .mmd/.png を出力するのみです。留意点:① Chrome レンダリング時に --no-sandbox が付与される点(コンテナや WSL の慣例ですが、セキュリティ上の緩和事項です);② Chrome インストールの sudo/apt 手順はリファレンス文書内の環境前提条件であり、実行パスには含まれません。

5二重目の独立検証

  • [ok] 脚本三件套自包含 — extract-and-generate.sh / extract_diagrams.py / puppeteer-config.json 均在 scripts/ 且被 SKILL 逐一引用。
  • [ok] mmdc 本地渲染 + PUPPETEER_EXECUTABLE_PATH — 脚本内逐字存在 'PUPPETEER_EXECUTABLE_PATH="$CHROME_PATH" mmdc -i ... --puppeteerConfigFile' 调用。
  • [ok] smart sizing 逻辑一致 — SKILL.md 尺寸表与脚本 [[ "$diagram" =~ timeline|gantt ]] 等分支对应。
  • [ok] PNG 校验存在 — 脚本 'test -s ... && file ... | grep -q "PNG image"' + identify 尺寸回退分支属实。
  • [ok] 运行期无网络 — 三个脚本全文无 curl/wget/requests/http 调用;唯一网络在 setup 参考文档的 dl.google.com apt 安装(sudo,用户主动执行)。
  • [ok] 无凭证读取 — 仅读 MERMAID_WIDTH/HEIGHT/SCALE/CLAUDE_SKILL_DIR 等路径/尺寸变量,无 token/secret/key 环境读取。
  • [ok] --no-sandbox 浏览器参数 — puppeteer-config.json args 含 --no-sandbox/--disable-setuid-sandbox 等;渲染目标为本地生成的图表 HTML,输入为工作区 markdown。
  • [ok] 元数据 — GitHub API:MIT / 1385 stars / pushed 2026-09-09T12:33:29Z;本地 HEAD==pin d5c4678。

6結論

  • 完全ローカルレンダリング:図のデータがマシン外部に出ないため、機密文書や社内ネットワーク向け文書に最適。
  • 自己完結型スクリプト+文脈に応じた自動命名により、Markdown から PNG への一括変換が単一コマンドで完結。
  • 高解像度・キャンバス制御が柔軟かつシンプル(3つの環境変数ノブ)で、スライドや印刷用途に適合。
  • 事前の依存関係チェックと詳細な WSL2 向けトラブルシューティングリファレンスにより、環境トラブル時もドキュメントで手厚くサポート。
  • 最適な用途: Mermaid 図を含む Markdown から PNG を一括出力したい WSL2/Linux ユーザー(ドキュメント、プレゼン資料、ブログ記事用)に最適(mmdc + Chrome の導入が前提)。また、機密保持のためにローカルレンダリングが必要なユースケースにも適しています。
    不向きな用途: Chrome がない環境や sudo によるインストールができない環境には不向き。図の命名やレイアウトに対してピクセル単位の細かなカスタマイズを求めるユーザーには不向き(調整可能なノブが限定的)。Mermaid 形式以外の図(PlantUML など)は対象外。
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload mermaid-tools.tar.gz
    sha256: 3b3522624bae3e65…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d5c4678cb5.