1仕組みと動作原理
2つの同梱スクリプトが連携:extract_diagrams.py が正規表現で Markdown から ```mermaid コードブロックを抽出して番号・名前を付与し、extract-and-generate.sh がファイルごとに mermaid-cli (mmdc) を呼び出して PNG をレンダリングします。
mermaid_pattern = r'```mermaid\n(.*?)\n```'
レンダリングエンジンは mermaid-cli + ローカル Chrome:スクリプトは PUPPETEER_EXECUTABLE_PATH で /usr/bin/google-chrome-stable を指定し、puppeteer-config.json と -w/-H/-s のサイズ・拡大縮小パラメータを渡します。
PUPPETEER_EXECUTABLE_PATH="$CHROME_PATH" mmdc \ -i "$mmd_file" \ -o "$diagram.png" \ --puppeteerConfigFile "$CONFIG_FILE" \ -w "$width" \ -H "$height" \ -s "$SCALE_FACTOR"
環境変数の上書きによる高解像度出力:MERMAID_WIDTH/HEIGHT/SCALE のデフォルトは 1200×800×2 であり、スライドや印刷用途では 2400×1800×4 や SCALE=5 に拡大可能です。
MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
スマートサイジングによる図名タイプからのサイズ推定:timeline/gantt は幅広かつ扁平に、architecture/system/caching は拡大、workflow/sequence/api は横幅を広げ、デフォルトは 1200×800 です。
- **Timeline/Gantt**: 2400×400 (wide and short) - **Architecture/System/Caching**: 2400×1600 (large and detailed)
プロセスの事前依存関係チェック:mmdc、google-chrome-stable、python3 のいずれかが不足している場合、references/setup_and_troubleshooting.md(WSL2 用の Chrome インストール手順と依存リストを含む)を参照するよう促します。
1. **mermaid-cli**: `mmdc --version` 2. **Google Chrome**: `google-chrome-stable --version` 3. **Python 3**: `python3 --version`
実行規則は「scripts/ ディレクトリから実行すること」:スクリプトは ${CLAUDE_SKILL_DIR} で位置を特定し、同ディレクトリ内の extract_diagrams.py や puppeteer-config.json の相対パスに依存します。
cd "${CLAUDE_SKILL_DIR}/scripts" ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | mermaid-cli (mmdc) |
| cli | Google Chrome(/usr/bin/google-chrome-stable,headless 渲染) |
| cli | python3(extract_diagrams.py) |
| network | dl.google.com(setup 参考文档:加 Chrome apt 源并 sudo apt install,一次性安装) |
| cli | file / sort -V / stat / identify(可选)(bash 工具链) |
4推奨統制措置と判定根拠
- 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 出力ディレクトリ
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結論
3b3522624bae3e65…