beautiful-mermaid

Beautiful Mermaid

Mermaid の図を ASCII／Unicode アート（ターミナル向け）または SVG（ファイル向け）としてレンダリングします。

クイックスタート

# Render ASCII diagram to terminal
node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs "graph LR; A-->B-->C"

# Output:
# ┌───┐     ┌───┐     ┌───┐
# │ A │────►│ B │────►│ C │
# └───┘     └───┘     └───┘

使い方

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs [options] [input]

オプション

オプション	説明
-f, --format TYPE	出力形式：ascii（デフォルト）または svg
-t, --theme NAME	SVG 出力のテーマ（デフォルト：zinc-dark）
--colors JSON	JSON 形式のカスタムカラー：{"bg":"#hex","fg":"#hex","accent":"#hex","line":"#hex","muted":"#hex"}。--theme とは併用できません。
--transparent	SVG の背景を透明にします（テーマ付きページへのインライン表示向け）
-o, --output FILE	標準出力の代わりにファイルへ書き込みます
--ascii	Unicode の罫線文字の代わりに純粋な ASCII を使用します
--themes	利用可能なテーマを一覧表示します
-h, --help	ヘルプを表示します

入力ソース

• インライン：mermaid.mjs "graph TD; A-->B"
• ファイル：mermaid.mjs diagram.mmd
• 標準入力：echo "graph LR; A-->B" | mermaid.mjs -

使用例

ASCII 出力（ターミナル）

# Flowchart with Unicode box-drawing (default)
node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs "graph TD; Start-->Process-->End"

# Pure ASCII for maximum compatibility
node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs --ascii "graph LR; A-->B"

SVG 出力（ファイル）

# Create SVG with tokyo-night theme
node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -f svg -t tokyo-night "graph TD; A-->B" -o diagram.svg

# Sequence diagram
node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -f svg -t catppuccin-mocha "sequenceDiagram
Alice->>Bob: Hello
Bob-->>Alice: Hi!" -o sequence.svg

サポートされている図の種類

種類	構文
フローチャート	graph TD/LR/BT/RL または flowchart TD/LR/BT/RL
状態図	stateDiagram-v2
シーケンス図	sequenceDiagram
クラス図	classDiagram
ER 図	erDiagram

利用可能なテーマ（17 種類）

ダークテーマ： zinc-dark、tokyo-night、tokyo-night-storm、catppuccin-mocha、nord、dracula、github-dark、solarized-dark、one-dark、blueprint-dark*

ライトテーマ： zinc-light、tokyo-night-light、catppuccin-latte、nord-light、github-light、solarized-light、vellum*

* = ローカルのテーマ拡張（上流パッケージではなく、CLI ラッパーで定義）

テーマの一覧表示：node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs --themes

使用場面

• アーキテクチャ図 — システムコンポーネントを会話内で直接可視化します
• データフロー — システム内でのデータの流れを示します
• 状態機械 — アプリケーションの状態と遷移を記録します
• シーケンス図 — API のやり取りやメッセージの流れを図示します
• クラス図 — オブジェクト間の関係を記録します
• ER 図 — データベーススキーマを可視化します
• ドキュメント — README ファイルやドキュメント向けに SVG をエクスポートします

スキル間の連携

ほかのスキルは beautiful-mermaid を呼び出し、それぞれのビジュアルアイデンティティに合ったテーマの図を生成します。標準的なパターンは次のとおりです。

# Named theme
node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs \
  -f svg -t vellum --transparent -o diagram.svg "graph TD; A-->B-->C"

# Custom colors (for project-specific palettes)
node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs \
  -f svg --colors '{"bg":"#1a1b26","fg":"#a9b1d6","accent":"#7aa2f7"}' \
  -o diagram.svg "graph TD; A-->B-->C"

# ASCII for markdown output (planning, design briefs)
printf 'graph TD\n  A --> B --> C' | \
  node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -

利用側スキルのテーマ対応表：

スキル	テーマ	備考
vellum-editorial	vellum	クリーム／インク／銅。SVG をインライン表示する場合は --transparent を使用します
ダークなスライドデッキ	blueprint-dark	技術プレゼンテーション向けの、ネイビーにシアンの配色
minoan-frontend-design	--colors	プロジェクトの DESIGN.md トークンから 16 進カラーコードを抽出します
design-md	github-light	トークンのドキュメント向けのニュートラルなライトテーマ
shape	ASCII モード	意思決定フローを .design-context.md に追記します