mcpField
V
visualize

visualize

github.com/camacho生産性296 回インストール
リポジトリ

visualize について

コンテンツの形に応じて、Mermaid 図、表、ASCII など適切な形式で可視化するスキルです。概念、フロー、比較、構造を出力先に合った形で示せます。

主な機能

  1. 01引数や会話から内容を特定
  2. 02内容の形に応じた形式選択
  3. 03Mermaid、表、ASCII に対応
  4. 04出力先に応じた描画ルール
  5. 05形式の明示的な指定

活用シーン

  1. 01アーキテクチャやリクエストフローの図示
  2. 02状態遷移やデータ関係の表示
  3. 03選択肢の比較や階層構造の提示

インストール

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

$npx skills add https://github.com/camacho/ai-skills --skill visualize

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

同梱ファイルscripts/render-mermaid.ts

詳細

/visualize

コンテンツの形状を自動検出し、適切なビジュアライゼーションを描画します。ai-workspace/rules/visualizations.md のアクティブ選択ルールに従います。

使用方法

/visualize                              # visualize the last discussed concept
/visualize <topic or file>              # visualize specific content
/visualize --format mermaid <topic>     # force a specific format

手順

  1. コンテンツを特定します。 引数、直近の会話のコンテキスト、またはファイルパスから特定します。何をビジュアライゼーションする必要があるか判断します。

  2. コンテンツの形状を分類します。 次の判断表を使用します。

    コンテンツの形状判断材料形式
    ノードとエッジを持つグラフアーキテクチャ、依存関係、コンポーネント間のフローMermaid graph または flowchart
    シーケンス／インタラクションリクエストフロー、API 呼び出し、複数ステップのプロトコルMermaid sequenceDiagram
    状態遷移モード、ライフサイクル、ステータスの変化Mermaid stateDiagram-v2
    比較（3 項目以上）オプション、トレードオフ、機能マトリックスMarkdown テーブル
    階層／ツリーファイル構造、組織図、単純な入れ子構造ASCII アート
    対比（2 項目）前後、良い／悪い、する／しないインラインのペア
    エンティティの関係データモデル、スキーマMermaid erDiagram

  3. 描画先を確認します。 コミットされた .md ファイル内の Mermaid は、iOS／ウェブ／GitHub／VS Code で描画されます。ターミナルのチャンクでは Mermaid はそのままのテキストになるため、代わりに ASCII を使用します。描画先が不明な場合は、ASCII を既定で使用します。

  4. 描画します。

    • ASCII／テーブル／インラインのペア：応答に直接出力します。
    • Mermaid：応答内にフェンス付きの mermaid コードブロックとして出力します。高解像度の PNG が必要な場合： 
      node --import tsx "${SKILL_DIR}/scripts/render-mermaid.ts" --input <mermaid-file> --output <png-path> --width 2400 --height 1800
    • 形式の上書き：ユーザーが --format を渡した場合は、自動検出に関係なくその形式を使用します。

  5. 提示します。 ビジュアライゼーションを表示します。Mermaid の PNG を描画した場合は、パスを表示します。

失敗時の動作

条件動作
コンテンツの形状が曖昧「これは [X] または [Y] と考えられます。どちらが適切ですか？」と尋ねます
Mermaid の構文エラーエラーを表示し、修正を提案します
mmdc が利用できないフェンス付きの Mermaid ブロックにフォールバックします（GitHub／ウェブで描画されます）

ツール間の注意事項

  • Codex／Cursor：PNG の描画には scripts/render-mermaid.ts を直接実行します。コンテンツ形状の検出はエージェントの推論であり、スクリプトのロジックではありません。

コメント

Markdown 対応