mcpField
B
beautiful-mermaid

beautiful-mermaid

github.com/intellectronicaデザイン・UI2981.8k 回インストール27 週間前に更新
リポジトリ

beautiful-mermaid について

beautiful-mermaidは、Mermaid図を生成し、SVGやPNGとして描画するスキルです。複数の図種とテーマに対応し、ブラウザーでPNGをキャプチャする手順も備えています。

主な機能

  1. 01Mermaid構文の生成
  2. 02図のSVG描画
  3. 03高解像度PNGのキャプチャ
  4. 045種類の図に対応
  5. 05複数テーマの選択

活用シーン

  1. 01プロセスや判断経路の説明
  2. 02API呼び出しやトランザクションの記録
  3. 03ステートマシンの可視化
  4. 04UMLやデータベース図の作成

インストール

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

$npx skills add https://github.com/intellectronica/agent-skills --skill beautiful-mermaid

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
mermaid-syntax.md
scripts/
create-html.ts
render.ts

詳細

Beautiful Mermaid による図の美しいレンダリング

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

依存関係

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

対応する図の種類

  • フローチャート - プロセスフロー、判断ツリー、CI/CD パイプライン
  • シーケンス図 - API 呼び出し、OAuth フロー、データベーストランザクション
  • 状態図 - ステートマシン、接続ライフサイクル
  • クラス図 - UML クラス図、デザインパターン
  • ER 図 - データベーススキーマ、データモデル

利用可能なテーマ

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 を使用します。

よく使われる構文パターン

フローチャートのエッジラベル

エッジラベルにはパイプ構文を使用します。

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

レンダリングが不完全になることがあるため、スペースとハイフンを使う構文は避けてください。

A -- label --> B   # May cause issues
特殊文字を含むノードラベル

特殊文字を含むラベルは引用符で囲みます。

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 スキルを参照してください。

# Set 4K viewport for high-resolution capture
agent-browser set viewport 3840 2160

# Open the HTML wrapper
agent-browser open "file://$(pwd)/diagram.html"

# Wait for render to complete
agent-browser wait 1000

# Capture full-page screenshot
agent-browser screenshot --full diagram.png

# Close browser
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-darkGitHub ダークGitHub UI に合わせる場合
github-lightGitHub ライトGitHub UI に合わせる場合
catppuccin-latte暖かみのある明るい色柔らかなパステル調
solarized黄褐色／クリーム色Solarized カラースキーム
one-darkAtom ダークAtom エディターのスタイル
zinc-darkニュートラルなダーク色味を抑えたミニマルなスタイル

トラブルシューティング

テーマが適用されない

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

図が切れている、または不完全に表示される
  • エッジラベルの構文を確認してください。-- label --> ではなく、-->|label| のパイプ表記を使用してください。
  • すべてのノード ID が一意であることを確認してください。
  • ノードラベルの括弧が閉じていることを確認してください。
Render すると空または不正な SVG が生成される
  • レンダリングする前に、https://mermaid.live で Mermaid の構文を検証してください
  • エスケープが必要な特殊文字がないか確認してください（引用符で囲みます）
  • フローチャートの方向が指定されていることを確認してください（graph TD、graph LR など）

コメント

Markdown 対応