visualize について
visualize は、OKF バンドルを単体で使える HTML グラフに変換し、概念とリンクを探索するスキルです。概念の詳細と派生した信頼度・古さの指標を表示し、レイアウトや出力も指定できます。
主な機能
- 01単体で使える HTML グラフの生成
- 02概念の詳細とレンダリング内容の確認
- 03概念間リンクの表示
- 04信頼度と古さの指標の算出
- 05グラフレイアウトと出力設定の選択
活用シーン
- 01OKF バンドル内の関係性の探索
- 02概念のソースとステータスの確認
- 03レビュー用に指定バンドルディレクトリを描画
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/visualizeを入力して読み込まれたか確認します。
同梱ファイルscripts/okf_visualize.py
詳細
OKF バンドルを可視化する
対象のバンドルを、自己完結型の HTML グラフとして生成します。バンドルディレクトリは必須のため、パスを指定しない場合は .okf を明示的に渡してください。バックエンドもインストールも不要で、バンドルの内容がページ外に送信されることもありません。ただし、ビューアーにはネットワークアクセスが必要です。cytoscape、marked、dompurify は cdn.jsdelivr.net から読み込まれます。
uv run "${CLAUDE_SKILL_DIR}/scripts/okf_visualize.py" $ARGUMENTS
uv を利用できない場合：
python3 -m pip install --quiet pyyaml && \
python3 "${CLAUDE_SKILL_DIR}/scripts/okf_visualize.py" $ARGUMENTS
詳細パネルには、各コンセプトの type、description、tags、status、generated、verified、stale_after、sources（信頼性を示すシグナル、およびそれを位置付ける usage_window と併記された usage_count を含む）、レンダリング済みの本文が表示されます。バンドル内の別のコンセプトを指す sources エントリは、グラフのエッジにもなります。v0.1 の timestamp は generated.at として読み込まれるため、レガシーバンドルもすべて表示されます。
2 つのバッジは読み取るのではなく、導出されます。§5.3 の信頼ティア（verified[].by の human: プレフィックスを基準にした unverified／machine-confirmed／human-reviewed）と、古さ（now >= stale_after）です。これらは参考情報であり、バンドルについて報告する際は、どれかを判定条件として扱うのではなく、各コンセプトがどのティアに属するかを伝えてください。
| フラグ | 効果 |
|---|---|
-o <path> | 出力ファイル（デフォルトは <bundle>/viz.html）。 |
-t, --title | グラフのタイトル（デフォルトは親ディレクトリ／バンドルのディレクトリ名）。 |
-l, --link | ヘッダーに表示するソース URL。 |
--layout | cose、concentric、breadthfirst、circle、grid。 |
--max-nodes N | コンセプト数が N を超えると終了コード 1 を返します（CI で便利です）。 |
--og-image URL | ソーシャルプレビュー画像の絶対 URL。 |
コンセプト数が 1,000 を超えると、デフォルトのレイアウトは concentric に切り替わります（強制するとページがフリーズするため、--layout cose で上書きできます。ページ内のレイアウト選択では、最初に確認が表示されます）。5,000 を超えると、ページの読み込みが遅くなり、グラフが毛玉のようになる旨の警告が表示され、サブディレクトリのレンダリングが提案されます。
どのブラウザーでも開けます。${CLAUDE_SKILL_DIR} は、okf プラグインの一部として実行する場合でも、単独の skills.sh スキルとして実行する場合でも解決されます。ページにはディープリンクを設定できます。?select=<concept-id> または #<concept-id> を指定するとそのコンセプトが開き、?layout=<name> を指定するとレイアウトがプリセットされます。