Scrapbox プロジェクトのグラフ構造を Visualize してみる

Scrapbox で他のページへのリンクを作成した途端、ページの下にアイキャッチ付きのリンクがリアルタイムでできていくので書いててテンション上がりますよね。

Scrapbox API を使うと各ページの情報とページ間のリンクを JSON で取得できます。

scrapbox.io

Go の場合 struct を次のように定義し、取得したページデータを json.Unmarshal すると当該ページからの 1hop link のリストとページを作成した User (Author) が取れます*1

type Page struct {
    ID            string  `json:"id"`
    Title         string  `json:"title"`
    Author        User    `json:"user"`
    Collaborators []User  `json:"collaborators"`
    Related struct {
        Links []struct {
            ID    string `json:"id"`
            Title string `json:"title"`
        } `json:"links1hop"`
    } `json:"relatedPages"`
}

type User struct {
    ID           string `json:"id"`
    Name         string `json:"name"`
    DisplayName  string `json:"displayName"`
}

ページ間のリンクはサロゲートキー的な ID のペアになっているので、比較的簡単にグラフ構造を生成できます。

自分の Scrapbox プロジェクトのデータを抽出しました。

scrapbox.io

そしてGraphViz で可視化してみました。

f:id:kondoumh:20200305000013p:plain

見づらいですが、Gadget 関連とDev 関連のクラスター的なものが形成されているので納得感あります。

複数のユーザが作っているプロジェクトではユーザとページの関連も見れます。

Scrapbox の help プロジェクト scrapbox.io

ユーザをシアンで塗り潰したノードで可視化してみました(ユーザ名は anonymize してます)。

f:id:kondoumh:20200306204303p:plain

会社のプライベートなプロジェクトはページ数が5000近くになっているため、ページビューなどでフィルターかけないとグラフが大規模になり閲覧自体が困難です。インタラクティブにフィルタリングする可視化システムを作りたくなります。

*1:User は単独のオブジェクトとして扱いたいのでネストさせてません