mcpField
B
beautiful-mermaid-ascii

beautiful-mermaid-ascii

github.com/ratacatドキュメント5846 回インストール37 週間前に更新
リポジトリ

beautiful-mermaid-ascii について

Mermaid 図をターミナル向けの ASCII・Unicode アートに変換するスキルです。ファイルや標準入力、Markdown から図を読み込み、グラフィカルな表示環境がない場合にも確認できます。

主な機能

  1. 01Mermaid 図を ASCII・Unicode に変換
  2. 02ファイルと標準入力に対応
  3. 03Markdown から図を抽出
  4. 04コードブロックの一覧表示と選択
  5. 05必要に応じて依存関係を導入

活用シーン

  1. 01ターミナルで Mermaid 図を確認
  2. 02README から図を抽出して表示
  3. 03テキスト環境でフローチャートを確認

インストール

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

$npx skills add https://github.com/ratacat/claude-skills --skill beautiful-mermaid-ascii

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

同梱ファイル

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

package.json
references/
mermaid-cheatsheet.md
mermaid-syntax-reference.md
notes.md
scripts/
install-mermaid-ascii
mermaid-ascii
mermaid-ascii.mjs

詳細

美しい Mermaid ASCII レンダリング

Mermaid 図をターミナルで見やすい ASCII／Unicode アートに変換するには、lukilabs/beautiful-mermaid（CLI ではなく、JavaScript ライブラリ）を使用します。

クイックスタート

Mermaid ファイルをレンダリングします。

skills/beautiful-mermaid-ascii/scripts/mermaid-ascii path/to/diagram.mmd

PATH 上に mermaid-ascii コマンドをインストールします（デフォルトでは ~/.local/bin にシンボリックリンクを作成します）。

skills/beautiful-mermaid-ascii/scripts/install-mermaid-ascii

標準入力からレンダリングします。

cat path/to/diagram.mmd | skills/beautiful-mermaid-ascii/scripts/mermaid-ascii

Markdown から最初の Mermaid コードフェンスブロックをレンダリングします。

skills/beautiful-mermaid-ascii/scripts/mermaid-ascii --md README.md

別のコードフェンスブロックを選択します（1 始まり）。

skills/beautiful-mermaid-ascii/scripts/mermaid-ascii --md README.md --block 2

インストール方法（このスキルでの「インストールへの対応方法」）

scripts/mermaid-ascii は、必要に応じて書き込み可能なキャッシュディレクトリ（デフォルトは $XDG_CACHE_HOME/beautiful-mermaid-ascii、または /tmp/beautiful-mermaid-ascii）に beautiful-mermaid を自動インストールし、その後レンダラーを実行します。

PATH 上で「実際の」コマンドとして使いたい場合は、シンボリックリンクインストーラーをおすすめします。

skills/beautiful-mermaid-ascii/scripts/install-mermaid-ascii

このフォルダーをローカル／グローバル npm パッケージとしてインストールすることもできます（~/.npm に書き込めない場合は、書き込み可能な npm キャッシュを使用してください）。

# from the repo root
NPM_CONFIG_CACHE=/tmp/npm-cache npm install -g --prefix ~/.local ./skills/beautiful-mermaid-ascii

現在のプロジェクトに beautiful-mermaid がすでにインストールされている場合は、次のように実行します。

skills/beautiful-mermaid-ascii/scripts/mermaid-ascii --pkg-dir . path/to/diagram.mmd

トラブルシューティング

  • ~/.npm または ~/Library/Caches の権限エラーでインストールに失敗する場合は、書き込み可能なキャッシュディレクトリを指定して実行してください。
    • skills/beautiful-mermaid-ascii/scripts/mermaid-ascii --cache-dir /tmp/bm-cache ...
  • 出力が空の場合は、Mermaid テキストが有効で、図の種類（flowchart、sequenceDiagram など）から始まっていることを確認してください。
  • Markdown に複数の図がある場合は、--list でコードフェンスブロックを一覧表示し、--block で選択してください。

同梱リソース

  • skills/beautiful-mermaid-ascii/scripts/mermaid-ascii：依存関係が利用可能であることを確認してからレンダリングするシェルラッパーです。
  • skills/beautiful-mermaid-ascii/scripts/mermaid-ascii.mjs：Mermaid（生テキストまたは Markdown のコードフェンス）を抽出し、renderMermaidAscii を呼び出す Node CLI です。
  • skills/beautiful-mermaid-ascii/references/notes.md：Mermaid の入力と一般的なパターンについての短いメモです。

コメント

Markdown 対応