mcpField
H
highlight-graph

highlight-graph

github.com/readwiseio生産性326444 回インストール19 週間前に更新
リポジトリ

highlight-graph について

Readwiseのハイライトをインタラクティブな2Dフォースグラフにし、異なる資料にまたがる関連アイデアを結び付けるスキルです。概念のつながりを視覚的に探りたい読者向けです。

主な機能

  1. 01インタラクティブな2Dフォースグラフの生成
  2. 02資料ごとのハイライト整理
  3. 03資料間の意味的な関連の検出
  4. 04資料単位でのグラフの絞り込み
  5. 05単体で開けるHTMLページの出力

活用シーン

  1. 01書籍のハイライト間の関係の探索
  2. 02記事や書籍にまたがるテーマの可視化
  3. 03特定の資料に絞ったグラフの確認

MCP 対応

利用可能な場合はReadwise MCPでハイライトを取得し、利用できない場合はReadwise CLIを使います。取得したデータからグラフを作成します。

インストール

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

$npx skills add https://github.com/readwiseio/readwise-skills --skill highlight-graph

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

同梱ファイルbuild_graph.py

詳細

ユーザーの Readwise ハイライトのインタラクティブな 2D 力学グラフを作成し、書籍、記事、その他のソースにまたがるアイデアのつながりを表示します。Obsidian のグラフビューを、ハイライト向けにしたものをイメージしてください。

Readwise へのアクセス

Readwise MCP ツール（例：mcp__readwise__readwise_list_highlights）が利用可能か確認してください。利用できる場合は、すべての手順でそれらを使用してください。利用できない場合は、代わりに同等の readwise CLI コマンドを使用してください。

手順

Step 1: ハイライトを取得する

次のメッセージから始めます。

ハイライトグラフ · Readwise

最近のハイライトを取得して、ハイライト間のつながりを見つけ、探索できるグラフを作成します。少々お待ちください。

page_size=100 を指定して readwise_list_highlights を使用し、ユーザーの最新のハイライトを取得します。グラフの出発点として適切な数になるよう、2 ページ（200 件のハイライト）を取得します。各ページには最新から古い順にハイライトが返されるため、page=1、次に page=2 を使用してください。

Step 2: ハイライトデータを準備する

API のレスポンスを解析し、ハイライトの JSON 配列を作成します。各ハイライトには次の項目が必要です。

{
  "id": "12345",
  "text": "The actual highlight text...",
  "note": "User's note if any",
  "book_id": 58741401,
  "source_title": "The Goal",
  "source_author": "Eliyahu Goldratt",
  "url": "https://..."
}

重要： Readwise API は book_id を返しますが、ハイライトごとの書籍／記事のタイトルや著者は返しません。ハイライトのテキストと、利用可能なメタデータ（URL、内容のパターン）を読み、ソースのタイトルと著者を自分で特定する必要があります。ハイライトを book_id ごとにグループ化し、文脈からソースを推定してください。著者が不確かな場合は「不明」としてかまいませんが、タイトルはできる限り特定してください。

この配列を一時ファイル /tmp/highlights.json に書き込みます。

Step 3: 初回の描画（つながりなし）

空のつながりファイルを書き込み、ビルドスクリプトを実行して、ユーザーがすぐに確認できる状態にします。

echo '[]' > /tmp/connections.json
python3 SKILL_DIR/build_graph.py --highlights /tmp/highlights.json --connections /tmp/connections.json --output highlight-graph.html
open highlight-graph.html

ユーザーに次のように伝えます。

グラフを開きました。{N} 件のハイライトが**{N} 個のソース**にわたって表示されています。アイデア間のつながりを見つけています……

Step 4: ソースをまたぐつながりを見つける

ハイライトを異なるソース間で意味的につなぐ並列サブエージェント（3～5 個）を起動します。各エージェントはハイライトの一群を分析し、つながりを返します。

バッチ分割の方法：

  1. ハイライトをソース（book_id）ごとにグループ化します。
  2. ソースを約 8 個ずつのバッチに分割します。
  3. 各バッチのペア（同一バッチ内も含む）について、そのソースのハイライトテキストをエージェントに渡します。
  4. 各エージェントは、異なるソース間で共通するテーマ、アイデア、表現など、真の概念的なつながりを 5～10 個見つけます。

各エージェントは、次の形式のつながりの JSON 配列を返します。

[
  {
    "a_id": "12345",
    "b_id": "67890",
    "label": "Feedback loops",
    "why": "Both highlights discuss how tight feedback loops improve quality"
  }
]

量より質を重視してください。 つながりが実在し、興味深い場合にのみ作成してください。200 件のハイライトに対して、ソースをまたぐつながりが合計 15～30 個あるのが理想です。

Step 5: つながりを追加して再構築する

エージェントの結果をすべて 1 つのつながりの JSON 配列にまとめ、/tmp/connections.json に書き込んでから、ビルドスクリプトを再実行します。

python3 SKILL_DIR/build_graph.py --highlights /tmp/highlights.json --connections /tmp/connections.json --output highlight-graph.html
open highlight-graph.html

次のように概要を提示します。

{N} 件のハイライトが**{N} 個のソースにわたるグラフを作成し、アイデア間に{N} 個のつながり**を見つけました。

見つかった興味深いつながりをいくつか紹介します。

  • "{ハイライト A の抜粋}" ↔ "{ハイライト B の抜粋}" — {つながりのラベル}
  • ...

グラフをブラウザーで開きました。ハイライトを追加しますか？

Step 6: 繰り返す
  • ハイライトを追加する： 追加のページ（page=3、page=4 など）を取得し、ソースを再特定して、新しいつながりを見つけ、再構築します。
  • トピックで絞り込む： readwise_search_highlights を使用して、特定のトピックまたは特定の書籍のハイライトを取得し、それらだけで再構築します。

ビルドスクリプト

このスキルのディレクトリにある build_graph.py が、すべての可視化処理を担います。2 つの JSON ファイルを受け取り、自己完結型の HTML ファイルを出力します。

python3 build_graph.py --highlights highlights.json --connections connections.json --output output.html

highlights.json： {id, text, note, book_id, source_title, source_author, url} の配列 connections.json： {a_id, b_id, label, why} の配列

このスクリプトは次の処理を行います。

  • ハイライトの重複排除とフィルタリング
  • ソースごとの色割り当て（rose-pine パレット）
  • 同一ソース内の全ペアの接続（同じ本のハイライトをすべてリンク）
  • ソース間のセマンティックな接続（パーティクル付きの紫色の破線エッジ）
  • 関連するアイデアと同じ本のハイライトを表示するインタラクティブなサイドバーパネル
  • ラベルの重なりの防止
  • 画面サイズに応じたテキストの拡大縮小（ズームレベルにかかわらずサイズを一定に保持）
  • クリックでフィルタリングできるソースの凡例
  • ホバー時の分離表示と選択状態の維持

出力は、CDN から force-graph を利用する単一の HTML ファイルです。サーバーは不要です。ブラウザーで開くだけで使用できます。

SKILL_DIR

上記のコマンドで SKILL_DIR を、このスキルのディレクトリ（build_graph.py がある場所）の実際のパスに置き換えてください。

コメント

Markdown 対応