mermaid について
beautiful-mermaid で Mermaid 図を描画するスキルです。図を画像またはターミナル表示にしたい場面に向け、5 種類の図と SVG、ASCII の出力に対応します。
主な機能
- 015 種類の Mermaid 図を描画
- 02SVG または ASCII で出力
- 03SVG のテーマ設定
- 04ファイルまたは標準入力から読み込み
活用シーン
- 01フローチャートを SVG で出力
- 02ターミナルで図をテキスト表示
- 03API のやり取りをシーケンス図にする
- 04データベースの関係を表示
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/mermaidを入力して読み込まれたか確認します。
同梱ファイルreferences/syntax.mdscripts/render.ts
詳細
Mermaid ダイアグラムレンダラー
beautiful-mermaid ライブラリを使用して Mermaid ダイアグラムをレンダリングします。2 つの出力モードで 5 種類のダイアグラムタイプをサポートします。
クイックスタート
依存関係（
beautiful-mermaid）は初回実行時に自動インストールされます。
SVG 出力（デフォルト）
# From file
npx tsx scripts/render.ts diagram.mmd --output diagram.svg
# From stdin
echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg
ASCII 出力（ターミナル）
# ASCII art for terminal display
npx tsx scripts/render.ts diagram.mmd --ascii
# Pipe directly
echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii
出力例:
┌───────┐ ┌─────┐
│ Start │────▶│ End │
└───────┘ └─────┘
サポートされているダイアグラム
| Type | Syntax | Best For |
|---|---|---|
| Flowchart | graph TD/LR | Processes, decisions |
| Sequence | sequenceDiagram | API calls, interactions |
| State | stateDiagram-v2 | State machines |
| Class | classDiagram | OOP design |
| ER | erDiagram | Database schemas |
テーマ設定（SVG のみ）
npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg
存在しないテーマ名を指定すると、利用可能なテーマの一覧を確認できます（例: --theme ?）。
リソース
scripts/render.ts- メインのレンダリングスクリプトreferences/syntax.md- Mermaid 構文のクイックリファレンス
コメント
Markdown 対応