diagram-to-image

図から画像へ

mermaid-red API（diagramless.xyz）を使用して、Mermaid の図や Markdown の表を PNG 画像に変換します。カスタムテーマで高品質かつスタイリッシュに出力でき、重いローカル依存関係は不要です。

使用する場面

次のような場合に、このスキルを使用します。

• 画像に変換する必要がある Mermaid の図がある場合
• 画像に変換する必要がある Markdown の表がある場合
• X/Twitter 向けのコンテンツを作成しており、ビジュアル形式での書き出しが必要な場合
• 「画像に変換して」「PNG として書き出して」「これを画像にして」などの依頼があった場合

前提条件

同梱スクリプトでは、Node.js 組み込みの fetch（Node 18+）を使用します。npm install は不要です。

# The render script is bundled with this skill:
SKILL_DIR=~/.claude/skills/diagram-to-image/scripts
ls $SKILL_DIR/diagram-to-image.mjs

出力先を自動判断

重要： 状況に応じて最適な出力先を判断してください。次の判断フローに従います。

1. ユーザーがパスを指定している場合

ユーザーがパスまたはファイル名を明示的に指定している場合は、それを使用します。

2. プロジェクトの状況を確認

現在のプロジェクト内に、一般的な画像／アセット用ディレクトリがあるか確認します。

# Check for existing image directories (in order of preference)
ls -d ./images ./assets ./img ./static ./public/images ./assets/images 2>/dev/null | head -1

最初に見つかった既存のディレクトリを使用します。一般的なパターンは次のとおりです。

• ./images/ — 一般的なプロジェクト
• ./assets/ — Web プロジェクト
• ./assets/images/ — 構造化された Web プロジェクト
• ./public/images/ — Next.js、React プロジェクト
• ./static/ — Hugo などの静的サイトジェネレーター
• ./img/ — 短縮形の慣例

3. 記事／ドキュメントの状況

ユーザーが記事またはドキュメントを作成している場合：

• ドキュメントがあるディレクトリを確認します
• 適切であれば images/ サブディレクトリを作成します
• ドキュメント名と説明を組み合わせて画像に名前を付けます

4. 会話の状況

会話の内容から、次の点を判断します。

• 図が表す内容 → ファイル名に使用します（例：auth-flow.png、user-journey.png）
• 話題に出ている関連ファイル → そのファイルの近くに画像を配置します
• 話題になっているトピック → 命名に使用します

5. 既定のフォールバック

判断材料がない場合：

• 現在の作業ディレクトリを使用します
• 図の内容に基づいて、わかりやすいファイル名を生成します

ファイル名の生成

内容を分析して、意味のあるファイル名を作成します。

内容のパターン	ファイル名の例
認証／ログインを含む flowchart	auth-flow.png
API を含む sequenceDiagram	api-sequence.png
erDiagram	entity-relationship.png
X に関する pie チャート	x-distribution.png
gantt チャート	project-timeline.png
比較用の表	comparison-table.png
データ用の表	data-table.png

ルール：

• kebab-case（小文字とハイフン）を使用します
• 簡潔でありながら説明的な名前にします（2～4 語）
• diagram.png や image.png のような一般的すぎる名前は避けます
• 特定できる場合は、トピックや対象を含めます

変換手順

ステップ 1：状況を分析する

変換する前に、次の情報を確認します。

1. 現在の作業ディレクトリを確認します
2. 既存の画像ディレクトリを探します
3. 図／表の内容を分析して、名前を決めます
4. 会話で言及されたファイルやトピックを考慮します

ステップ 2：出力先のパスを決定する

# Example logic (implement mentally, not as literal script)
if user_specified_path:
    output_path = user_specified_path
elif exists("./images"):
    output_path = "./images/{generated_name}.png"
elif exists("./assets"):
    output_path = "./assets/{generated_name}.png"
elif exists("./public/images"):
    output_path = "./public/images/{generated_name}.png"
else:
    output_path = "./{generated_name}.png"

ステップ 3：一時入力ファイルを作成する

# For Mermaid diagrams
cat > /tmp/diagram.mmd << 'DIAGRAM_EOF'
<mermaid content>
DIAGRAM_EOF

# For Markdown tables
cat > /tmp/table.md << 'TABLE_EOF'
<table content>
TABLE_EOF

ステップ 4：mermaid-red API で変換する

API はコンテンツの種類（Mermaid または表）を自動検出します。どちらも同じコマンドを使用します。

同梱スクリプトを使用する場合：

# Mermaid diagram
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o <output_path>.png

# Markdown table
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o <output_path>.png

# With custom theme
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o <output_path>.png --theme ocean

# Force content type (if auto-detect gets it wrong)
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o <output_path>.png --type table

使用可能なオプション：

• --theme <name> — default、dark、forest、neutral、ocean、emerald、midnight、slate、lavender、blueprint
• --type <type> — auto（既定値）、mermaid、table
• --scale <n> — 1～4（既定値：2、2 倍の DPI）
• --bg <color> — 背景色（既定値：white。背景をなしにするには "transparent" を使用）
• --server <url> — サーバーを上書きします（既定値：https://diagramless.xyz）

標準入力からのパイプにも対応しています：

echo "graph TD; A-->B" | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs -o out.png
cat /tmp/table.md | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs --type table -o table.png

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

変換後、ユーザーに次の内容を伝えます。

1. 画像を保存した完全なパス
2. その場所を選んだ理由（簡潔に）
3. ファイルサイズ（バイト単位。スクリプトが出力します）
4. 必要であれば別の保存先を指定できることを提案します

例

例 1：images/ ディレクトリがあるプロジェクト

コンテキスト： ユーザーは ./images/ ディレクトリがあるプロジェクトで、認証について話しています。

ユーザー：「これを画像に変換して」

flowchart TD
    A[Login] --> B{Valid?}
    B -->|Yes| C[Dashboard]
    B -->|No| D[Error]

アクション：

1. ./images/ が存在することを検出します
2. 内容を分析します → 認証フロー
3. ファイル名を生成します：login-flow.png
4. 内容を /tmp/diagram.mmd に保存します
5. 次を実行します：node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./images/login-flow.png

---

例 2：海をテーマにした AI に関する X の記事の執筆

コンテキスト： ユーザーは X 向けに AI エージェントに関する記事を書くと話しています。

ユーザー：「これを海のテーマで PNG にして」

flowchart LR
    User --> Agent --> Tools --> Response

アクション：

1. 内容を /tmp/diagram.mmd に保存します
2. 次を実行します：node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./ai-agent-flow.png --theme ocean

---

例 3：データ比較表

ユーザー：「この表を画像としてエクスポートして」

| Model | Speed | Accuracy |
|-------|-------|----------|
| GPT-4 | Slow | High |
| Claude | Fast | High |

アクション：

1. 内容を /tmp/table.md に保存します
2. 次を実行します：node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o ./model-comparison.png （表として自動検出されます）

---

例 4：ユーザーが保存先を指定

ユーザー：「この図を ~/Desktop/my-chart.png に保存して」

アクション： 出力先として ~/Desktop/my-chart.png をそのまま使用します。

エラー処理

• API サーバーに接続できない場合、スクリプトは明確なエラーメッセージを表示します
• コンテンツの種類を自動検出できない場合は、--type mermaid または --type table を明示的に指定します
• ローカルでの開発／テストには、--server http://localhost:3000 を使用します