mcpField
M
mermaid-to-image

mermaid-to-image

github.com/zc277584121ドキュメント04.0k 回インストール9 週間前に更新
リポジトリ

mermaid-to-image について

Mermaid to Imageは、テキストファイル内のMermaidコードブロックをPNGに変換し、画像参照に置き換えるスキルです。Mermaid図をそのまま表示できないプラットフォームへのコンテンツ公開に使えます。

主な機能

  1. 01ファイル内のMermaidコードブロックを検出
  2. 02図をPNG画像としてレンダリング
  3. 03画像の出力先ディレクトリを選択
  4. 04コードブロックを画像参照に置換
  5. 05変換したファイルと結果を報告

活用シーン

  1. 01Mermaid非対応プラットフォーム向けにMarkdownを準備
  2. 02公開用の静的な図画像を作成
  3. 03テキストファイル内のMermaidブロックを変換

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/zc277584121/marketing-skills --skill mermaid-to-image

インストール後、Claude Code で/mermaid-to-imageを入力して読み込まれたか確認します。

詳細

スキル：Mermaid から画像への変換

Markdown（またはその他のテキスト）ファイル内の ```mermaid コードブロックを PNG 画像に変換し、コードブロックを画像参照に置き換えます。Mermaid を標準でレンダリングしないプラットフォーム（GitHub Pages/Jekyll、Dev.to など）で役立ちます。

使用する場面

  • ファイル内の Mermaid 図を画像に変換するよう依頼された場合
  • 特定の Mermaid コードブロックを PNG としてレンダリングしたい場合
  • 公開ワークフローで、Mermaid コードブロックの代わりに静的画像が必要な場合

ワークフロー

ステップ 1：対象ファイルを特定する

ユーザーが指定する対象は次のとおりです：

  • 単一ファイル：convert mermaid blocks in docs/architecture.md
  • 複数ファイル：convert mermaid in all files under docs/
  • 特定のコードブロック：convert the second mermaid block in README.md

対象ファイル内の ```mermaid コードブロックを検索します。処理を進める前に、見つかったブロック数とファイルを報告します。

ステップ 2：画像の出力ディレクトリを決定する

プロジェクトの構成を確認し、通常画像が保存されている場所を特定します：

# Look for common image directories
ls -d images/ img/ assets/ assets/images/ static/images/ docs/images/ 2>/dev/null

明確な画像ディレクトリがある場合（例：images/、assets/images/）、そこを使用します。適切であれば、トピック別のサブディレクトリを作成します（例：images/<topic>/）。

画像ディレクトリが見当たらない場合、または候補が複数ある場合は、ユーザーに尋ねます：

Where should I save the rendered Mermaid images?

1. images/ (create new)
2. assets/images/
3. docs/figures/
4. Custom — enter a path
ステップ 3：各図を PNG にレンダリングする

mermaid.ink API を使用して図をレンダリングします。各ブロックについて、次の Python スニペットを実行します：

import base64, urllib.request

def render_mermaid(code: str, output_path: str):
    """Render a Mermaid diagram to PNG via mermaid.ink API."""
    encoded = base64.urlsafe_b64encode(code.encode()).decode()
    url = f"https://mermaid.ink/img/{encoded}?bgColor=white"
    req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0"})
    resp = urllib.request.urlopen(req, timeout=30)
    with open(output_path, "wb") as f:
        f.write(resp.read())

重要： User-Agent ヘッダーは必須です。指定しないと、mermaid.ink は 403 を返します。

命名規則

一般的な名前ではなく、図の内容に基づいた説明的なファイル名を使用します：

  • 良い例：architecture-overview.png、data-flow.png、heartbeat-sequence.png
  • 悪い例：mermaid-1.png、diagram.png、image1.png
ステップ 4：コードブロックを画像参照に置き換える

各 ```mermaid ... ``` ブロックを、ファイルから画像への相対パスを使用した Markdown 画像参照に置き換えます：

![Architecture overview](images/topic/architecture-overview.png)

プロジェクトで絶対 URL（例：GitHub Pages）を使用している場合は、代わりにそれを使用します：

![Architecture overview](https://example.github.io/images/topic/architecture-overview.png)

プロジェクトの既存の画像参照に合ったリンク形式を選びます。不明な場合は、相対パスを使用します。

ステップ 5：結果を報告する

処理後、次の内容を要約します：

  • 変換した図の数
  • 画像の保存先
  • 変更したファイル

例外的なケース

  • 大きな図： 非常に複雑な図では、mermaid.ink がタイムアウトすることがあります。レンダリングに失敗した場合は、エラーを報告し、図を簡略化するか別のレンダラーを試すようユーザーに提案します。
  • 1 つのファイルに複数のブロックがある場合： すべてのブロックを順番に処理し、それぞれに重複しない説明的なファイル名を付けます。
  • すでにレンダリング済みのブロック： Mermaid ブロックに対応する画像がすでにある場合（コメントアウトされているか、隣接している場合）は、処理をスキップするかユーザーに尋ねます。
  • Markdown 以外のファイル： 同じ方法は、Mermaid コードブロックを含む任意のテキストファイル（例：.rst、.txt）でも使えます。

コメント

Markdown 対応