Beautiful Mermaid ダイアグラム レンダリング

Beautiful Mermaid ライブラリを使用して Mermaid ダイアグラムを SVG および PNG 画像としてレンダリングします。

依存関係

このスキルは PNG レンダリングに agent-browser スキルが必要です。PNG キャプチャを実行する前に読み込んでください。

サポートされているダイアグラムタイプ

• Flowchart - プロセスフロー、決定木、CI/CD パイプライン
• Sequence - API 呼び出し、OAuth フロー、データベーストランザクション
• State - ステートマシン、接続ライフサイクル
• Class - UML クラス図、デザインパターン
• Entity-Relationship - データベーススキーマ、データモデル

利用可能なテーマ

Default、Dracula、Solarized、Zinc Dark、Tokyo Night、Tokyo Night Storm、Tokyo Night Light、Catppuccin Latte、Nord、Nord Light、GitHub Dark、GitHub Light、One Dark。

テーマが指定されない場合は、default を使用してください。

一般的な構文パターン

Flowchart エッジラベル

エッジラベルにはパイプ構文を使用してください:

A -->|label| B
A ---|label| B

スペースダッシュ構文は不完全なレンダリングを引き起こす可能性があるため、避けてください:

A -- label --> B   # 問題が発生する可能性があります

特殊文字を含むノードラベル

特殊文字を含むラベルは引用符で囲んでください:

A["Label with (parens)"]
B["Label with / slash"]

ワークフロー

ステップ 1: Mermaid コードの生成または検証

ユーザーがコードではなく説明を提供する場合は、有効な Mermaid 構文を生成してください。詳細な構文については references/mermaid-syntax.md を参照してください。

ステップ 2: SVG をレンダリング

レンダリングスクリプトを実行して SVG ファイルを生成します:

bun run scripts/render.ts --code "graph TD; A-->B" --output diagram --theme default

またはファイルから:

bun run scripts/render.ts --input diagram.mmd --output diagram --theme tokyo-night

代替ランタイム:

npx tsx scripts/render.ts --code "..." --output diagram
deno run --allow-read --allow-write --allow-net scripts/render.ts --code "..." --output diagram

これにより現在のディレクトリに <output>.svg が生成されます。

ステップ 3: HTML ラッパーの作成

スクリーンショット用に準備するために HTML ラッパースクリプトを実行してください:

bun run scripts/create-html.ts --svg diagram.svg --output diagram.html

これにより、適切なパディングと背景で SVG を表示する最小限の HTML ファイルが作成されます。

ステップ 4: agent-browser を使用して高解像度 PNG をキャプチャ

agent-browser CLI を使用して高品質のスクリーンショットをキャプチャします。詳細な CLI ドキュメントは agent-browser スキルを参照してください。

# 高解像度キャプチャ用に 4K ビューポートを設定
agent-browser set viewport 3840 2160

# HTML ラッパーを開く
agent-browser open "file://$(pwd)/diagram.html"

# レンダリング完了まで待機
agent-browser wait 1000

# フルページスクリーンショットをキャプチャ
agent-browser screenshot --full diagram.png

# ブラウザを閉じる
agent-browser close

複雑なダイアグラムではさらに高解像度が必要な場合、ビューポートをさらに増やすか、HTML ラッパー作成時に --padding オプションを使用してダイアグラムにより多くのスペースを確保してください。

ステップ 5: 中間ファイルのクリーンアップ

レンダリング後、すべての中間ファイルを削除します。最終的な .svg と .png だけが残るようにしてください。

削除するファイル:

• HTML ラッパーファイル (例: diagram.html)
• ダイアグラムコードを保持するために作成された一時的な .mmd ファイル
• レンダリングプロセス中に作成されたその他のファイル

rm diagram.html

一時的な .mmd ファイルが作成された場合も、それを削除してください。

出力

常に両方の出力が生成されます:

• SVG: ベクター形式、無限にスケーラブル、小さいファイルサイズ
• PNG: 高解像度ラスター、4K (3840×2160) ビューポートで最小 1200px ダイアグラム幅でキャプチャ

ファイルは現在のディレクトリに保存されます。ユーザーが別のパスを明示的に指定した場合を除きます。

テーマ選択ガイド

テーマ	背景	最適な用途
default	薄いグレー	一般的な使用
dracula	ダークパープル	ダークモード選好
tokyo-night	ダークブルー	モダンなダーク美学
tokyo-night-storm	より濃いブルー	より高いコントラスト
nord	ダークアークティック	落ち着いた静かなビジュアル
nord-light	ライトアークティック	ソフトなトーンのライトモード
github-dark	GitHub ダーク	GitHub UI に合わせる
github-light	GitHub ライト	GitHub UI に合わせる
catppuccin-latte	ウォームライト	ソフトなパステル美学
solarized	タン/クリーム	Solarized カラースキーム
one-dark	Atom ダーク	Atom エディタ美学
zinc-dark	ニュートラルダーク	ミニマル、色バイアスなし

トラブルシューティング

テーマが適用されない

レンダリングスクリプト出力で bg と fg の値を確認するか、SVG の開始タグの --bg と --fg CSS カスタムプロパティを検査してください。

ダイアグラムが切れているか不完全に見える

• エッジラベル構文を確認してください — -- label --> ではなく -->|label| パイプ記法を使用してください
• すべてのノード ID が一意であることを確認してください
• ノードラベル内の閉じられていない括弧がないか確認してください

レンダリングが空またはデータが不正な SVG を生成する

• Mermaid 構文を https://mermaid.live で レンダリング前に検証してください
• エスケープが必要な特殊文字がないか確認してください (引用符で囲んでください)
• フローチャートの方向が指定されていることを確認してください (graph TD、graph LR など)