mcpField
K
kb-visualize

kb-visualize

github.com/stjbrown生産性4141 回インストール13 週間前に更新
リポジトリ

kb-visualize について

kb-visualizeは、ナレッジバンドルの概念をインタラクティブな力指向グラフで表示するスキルです。全体図や特定概念周辺の部分グラフを描画でき、バンドル自体は変更しません。

主な機能

  1. 01タイプ別に色分けした概念グラフ
  2. 02全体図と部分グラフの表示
  3. 03概念詳細と被リンクの確認
  4. 04タイトル、ID、タグの検索
  5. 05タイプによる概念の絞り込み

活用シーン

  1. 01ナレッジバンドルの構造把握
  2. 02概念のクラスターや孤立ノードの発見
  3. 03特定概念のリンクと引用元の確認

インストール

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

$npx skills add https://github.com/stjbrown/agent-knowledge --skill kb-visualize

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

同梱ファイルscripts/graph.mjs

詳細

kb-visualize — バンドルをグラフで表示

バンドルを、その概念を示すインタラクティブなフォースディレクテッドグラフとして描画します。人がその全体像（ハブ、クラスター、孤立したノード、概念間のつながり）を確認できます。決定論的なグラフモデルをもとにビューを作成するため、リクエストに合わせて（バンドル全体のマップや、ある概念を中心とするサブグラフなど）表示を調整できます。固定テンプレートではありません。

1. グラフモデルを抽出する

同梱の抽出ツールを対象のバンドルに対して実行します（デフォルトは knowledge/）。依存関係のない Node スクリプトです（node >=18）。<skill-dir> はこのスキルのディレクトリです。Claude Code では ${CLAUDE_SKILL_DIR}、それ以外ではホストがスキル用に公開するパスを指定します。

node "<skill-dir>/scripts/graph.mjs" <bundle-dir>

JSON が出力されます。nodes（id、表示用メタデータ、status、generated、verified、派生値の trust_tier、stale_after、派生値の is_stale、構造化された sources、証明メタデータ、body、links、cited_by を含む）、固有の types、および edges が含まれます。バックリンク（cited_by）とエッジは、概念の本文にある相互リンクからすでに計算されています。ユーザーがリクエストの範囲を1つの概念または領域に指定した場合は、そのノードと隣接ノードにモデルを絞り込みます。

レンダラーは、今回の抽出ツールの実行で生成されたモデルを必ず使用しなければなりません。以前の実行でキャッシュされたグラフ JSON や、別のキャッシュファイル名をハードコードしたジェネレーターを再利用しないでください。ホストが一時ファイルを必要とする場合は、明示した1つのモデルパスを上書きし、同じパスをレンダラーに渡し、検証後に削除してください。

**完了基準：**グラフモデルを取得し、範囲が指定されている場合は、リクエストされたサブグラフに絞り込んでいること。

2. ホストの機能に応じて出力形式を選ぶ

  • ホストがインタラクティブ UI を描画できる場合（例：Claude Desktop、Codex Desktop、MCP-Apps ホスト）：グラフをネイティブ UI として描画し、会話内で操作できるようにします。
  • ホストがテキスト／アーティファクトのみの場合（例：Claude Code、ターミナル）：自己完結型 HTML ファイル（単一ファイル、バックエンドなし、CDN ライブラリのみ）をバンドルの隣またはアーティファクトとして書き込み、ユーザーにパスを伝えます。

ホストが UI を描画できるか不明な場合は、HTML ファイルをデフォルトにしてください。どの環境でも動作します。

**完了基準：**出力形式がホストの機能に合っていること。

3. ビューを描画する

どちらの形式でも、ビューには以下を表示しなければなりません（準拠した OKF ビューアーに準じます）。

  • フォースディレクテッドグラフ：概念ごとに1つのノードを配置し、type で色分けし、相互リンクごとに有向エッジを表示します。ユーザーがレイアウトを切り替えられる機能（例：cose／同心円／幅優先／グリッド）があると便利です。
  • 選択したノードの詳細パネル：そのフロントマター（description、リンクとしての resource、tags、ライフサイクル／鮮度、来歴、信頼ティア、存在する場合は Attested Computation コントラクト）と、レンダリングされた Markdown の body を表示します。内部の概念リンクはファイルパスをたどるのではなく、ビュー内を移動する（そのノードを選択する）ように付け替えます。
  • 各ノードの cited_by に基づく**「引用元」**リスト（逆リンクグラフ）。
  • 検索ボックス（タイトル、ID、タグに一致）とタイプフィルター。

HTML 形式では、CDN から Cytoscape.js（グラフ）と marked（Markdown）を読み込む構成が実績のある方法です。グラフモデルを JSON リテラルとしてインライン化することで、ファイルを自己完結させ、ページ外にデータが出ないようにします。ノードデータはすべてステップ1のモデルに含まれているため、バンドルを再読み込みしないでください。

新しく抽出したモデルと照合して出力を検証します。ノード数とエッジ数が一致し、今回の実行で追加または置き換えられたすべての概念が ID で表示されていることを確認します。レンダリングされたファイルが存在するだけでは不十分です。

**完了基準：**レンダリングされたビューに、グラフ（タイプ別に色分け）、ビュー内リンク移動に対応する詳細パネル、バックリンク、検索、タイプフィルターが表示され、ノード数とエッジ数、および変更された概念 ID が新しく抽出したモデルと一致していること。

4. 提供

成果物を引き渡します。UI の場合はライブビュー、HTML の場合はファイルパスを渡します（バンドルの隣にコミットする、成果物として共有する、または任意の静的ファイルサーバーでホストできることも伝えてください）。これは読み取り専用のコンシューマーであり、バンドルを変更しないため、ログエントリーは記録されません。

完了条件： ユーザーがビューまたはそのパスを取得していること。

コメント

Markdown 対応