なんでもメモして個人的な知識を蓄える「Obsidian」のキャンバスデータ保存形式「JSON Canvas」がオープンソース化、中身はこんな感じ

Markdown形式でメモを作成できるサービスのObsidianが使用しているObsidian Canvasファイル形式を「JSON Canvas」ファイル形式としてオープンソース化することを発表しました。

JSON Canvas — An open file format for infinite canvas data.
https://jsoncanvas.org/

Announcing JSON Canvas: an open file format for infinite canvas data - Obsidian
https://obsidian.md/blog/json-canvas/

仕様についてはjsoncanvas.orgに記載されています。サイトにアクセスするとこんな感じ。右下の「Toggle output」をクリックしてみます。

右側にJSON Canvas形式のファイルが表示されました。このサイト自体もJSON Canvasで表現されているというわけです。JSON Canvasには「node」と「edge」という2種類のオブジェクトが存在しており、「node」には「id」や「type」のほか、表示する位置や大きさのデータが保存されています。例えば「JSON Canvas Spec」というノードのtypeは「file」となっているため、「file」で指定したファイルの中身が表示されています。

「type」には「text」も存在しており、この場合は「text」に中身として表示するテキストをMarkdown形式で直接指定すればOK。

また、「edge」オブジェクトにはノード同士を矢印で接続する時の情報が保存されています。

Obsidian以外にもJSON Canvas形式をサポートするアプリがいくつか登場しているということで、そのうちの1つであるhi-canvasを使ってみました。サイトにアクセスし、「Create a new canvas」をクリック。

広いキャンバスにノードが1つ存在しています。ノードをクリックしてみます。

ノードの上にメニューが表示されました。左端の紙とペンのマークをクリックするとノードの内容を編集する画面が表示されます。Markdown形式で直接記入するほか、Markdownの記述を支援するさまざまなツールが用意されていました。

続いて左から2番目のアイコンをクリックします。

新たなノードが追加され、そのノードに矢印で接続されました。

また、パレットアイコンをクリックすると色を変更する画面が出現します。

キャンバスの右下の四角いアイコンをクリックすると新たなノードを追加可能。

ノードを選択した状態で線のアイコンをクリックすると画面の上部に「Select target node」と表示されます。この状態で別のノードをクリックすると線をつなげることができます。

こんな感じになりました。

ここまでのキャンバスのデータをJSON Canvas形式で出力してみます。キャンバスの右下のアイコンをクリックし、「Export」をクリック。

JSON Canvasの拡張子である「.canvas」を使用してファイルが保存されます。テキストエディタで開いてみると下図の通りJSON Canvas形式で保存されているのが確認できました。

JSON Canvasに関連する全てのリソースはMITライセンスで提供されており、無料で自由に商用利用することが可能となっています。