mirror of https://github.com/imxv/Pretty-mermaid-skills.git synced 2026-09-14 20:26:57 +08:00

Files

T

imxv e234ab73c2 feat: add native PNG output (#9 )

Add native PNG rendering with validated sizing, CSS-variable preparation for beautiful-mermaid output, batch support, documentation, and cross-version regression coverage. Includes fixes from all CodeRabbit review rounds.

2026-08-23 00:40:04 +08:00

5.6 KiB

Raw Permalink Blame History

Pretty Mermaid

AI エージェントのための美しい Mermaid ダイアグラム

Mermaid ソースを洗練された SVG、共有しやすい PNG、ターミナル向け ASCII に変換します。ローカルで動作し、ブラウザーは不要です。

日本語 ｜ English ｜中文

🚀 インストール

npx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -y

skills.sh でインストール数とセキュリティ監査を確認 →

Pretty Mermaid を選ぶ理由

AI エージェント向け：Claude Code、Cursor、Codex、Gemini CLI などに対応
1 つのソースから 3 形式：ドキュメント向け SVG、共有向け PNG、ターミナル向け ASCII/Unicode
ブラウザー不要：Chromium、Puppeteer、DOM に依存せずローカルでレンダリング
柔軟な設定：15 テーマ、カスタムカラー、6 種類のダイアグラム、バッチ処理

✨ 主な機能

📊 複数形式：SVG、PNG、ASCII/Unicode を出力
🎨 豊富なテーマ：用途に合わせた 15 の組み込みテーマ
📈 6 種類のダイアグラム：Flowchart、Sequence、State、Class、ER、XY Chart
⚡ 高速処理：複数ファイルを並列でバッチレンダリング
📚 すぐに使える：テンプレートと詳細なリファレンスを同梱

対応テーマ

Light Themes	Dark Themes	Other
zinc-light	zinc-dark	nord
tokyo-night-light	tokyo-night	nord-light
catppuccin-latte	tokyo-night-storm	dracula
github-light	catppuccin-mocha	one-dark
solarized-light	github-dark
	solarized-dark

🎨 テーマギャラリー

15 テーマの完全なギャラリーで、同じフローチャートの見た目を比較できます。

🤖 AI アシスタント連携

次の AI コーディング環境から自然言語で利用できます。

Claude Code
Cursor
Gemini CLI
Antigravity
OpenCode
Codex
qoder

インストールの確認

npx skills list -g

グローバル Skill 一覧に pretty-mermaid が表示されることを確認してください。Node.js 16 以上が必要です。

📖 クイックスタート

テーマ一覧

node scripts/themes.mjs

1 つのダイアグラムをレンダリング

node scripts/render.mjs \
  --input diagram.mmd \
  --output output.svg \
  --theme tokyo-night

PNG をレンダリング

node scripts/render.mjs \
  --input diagram.mmd \
  --output output.png \
  --format png \
  --width 1200 \
  --theme tokyo-night

ディレクトリをバッチレンダリング

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./output \
  --theme dracula

📂 サンプル

assets/example_diagrams/ に 6 種類のテンプレートがあります。

flowchart.mmd - フローチャート
sequence.mmd - シーケンス図
state.mmd - 状態遷移図
class.mmd - クラス図
er.mmd - ER 図
xychart.mmd - XY チャート（棒グラフと折れ線グラフ）

PNG は外部コンバーターを使わず Node.js 内で直接生成します。CJK の状態名、複数行ラベル、linkStyle、ELK レイアウト間隔、XY チャートのツールチップ、ANSI カラーのターミナル出力にも対応します。

📚 ドキュメント

🤝 コミュニティ

参加する前にコントリビューションガイドを確認してください。機密性のある問題を共有する前にセキュリティポリシーをお読みください。リリース履歴は変更履歴にあります。

⚙️ 動作要件

Node.js 16 以上

📄 ライセンス

MIT License

Star History

🙏 謝辞

beautiful-mermaid を利用しています。

5.6 KiB Raw Permalink Blame History Unescape Escape