第2の脳を謳うObsidianでMarkdownファイルの「つながり」を見える化する

markdown

f:id:orangeclover:20201120110255p:plain

やりたいこと

  • pukiwikiのrelatedプラグインのように、バックリンクをMarkdownでも表示できたらいいのに。
  • Scapboxのページリンクを記述すると表示される関連ページのようなことをMarkdownでもできたらないいのに。
  • Roam ResearchのようなネットワークグラフをローカルのMarkdownファイルでもできたらいいのに。
  • EmacsのMarkdownをリアルタイムプレビューするのにお手軽なビューアーがあったらいいのに。

Obsidianの特徴

それが、Obsidianなら、できるんです。

Obsidainは、以下の特徴を備えたMarkdownエディタです。

  • ローカルのMarkdownファイル(.md)を扱える
  • ファイル間の関係をグラフビューで表示でき
  • バックリンクを表示できる
  • 分類用のタグ #ã‚¿ã‚° が使える
  • リンクに [[wiki-links]] 形式が使える
  • コードブロックのmermaid対応しており、図を埋め込める
  • 数式を表示できる
  • ファイルの埋め込みを使った表示ができる(pukiwikiのincludeプラグイン相当)
  • Windows、macOS、Linuxのアプリケーションが用意されている

この中で、上の4つを紹介します。

ローカルのmarkdownファイル(.md)を扱える

ObsidianをMarkdownを書くエディタとしも十分に使えると思いますが、プログラマーを始めとして、普段ソフトウェアの開発に関わる方であれば、お気に入りのエディタでmakrdownをすでに書いていると思います。

Obsidianは、Markdown専用エディタによくある独自DB形式に格納するタイプではなく、ローカルのMarkdownファイル(.md)を扱えます。

そのため、普段使いのエディタで書いて、Obsidianをビューアーとして使うといったこともできます。

Obsidianでは、 Vault というフォルダ単位で管理します。 Vaultは複数、どこにでも作れます。 ネットワークグラフ、バックリンク、タグは、 Vault 単位になります。 Vault を複数開くには、Obsidianを複数立ち上げることになります。

f:id:orangeclover:20201120110332p:plain

以下のように指定をすると、

Vault name:dotnet-doc
Location:D:\workspace

以下のようなディレクトリが作成されます。

D:\workspace\dotnet-docs\.obsidian
├ config
├ graph.json
â”” workspace

Obsidianで作成する Markdownファイルは、 Vault 配下に、 .md形式 で保存されます。別のエディタで作成したファイルを持ってきても認識します。
なので、バックリンク、ネットワークグラフを見るビューアーとして使うといった使い方もできます。
すでに、Emacs、vim、Visual Studio Codeなど別のエディタを使ってる人にも優しいです。
Emacsのmarkdown-modeで書いて、リアルタイムプレビューとして使うにもいいと思います。

ファイル間の関係をグラフビューで表示できる

Obsidianの売りの機能で、Markdownファイル間の関係をネットワークグラフで表示してくれます。
[[wiki-links]] も使えますが、通常のMarkdown記法の [リンクテキスト](ファイル名) 貼っているリンクも対象です。

例えば、Obsidianのヘルプをグラフビューで表示すると以下のようになります。
f:id:orangeclover:20201120110409p:plain



1つのノードにカーソルを合わせると、それにつながっているリンクを強調してくれます。
f:id:orangeclover:20201120110440p:plain



Ctrlを押しながら、カーソルを合わせると、ファイルのプレビューを表示することもできます。
(これはデフォルトではOFFになってるので、 Setting の Core Plugins で Page preview を ON に設定変更が必要です。)
f:id:orangeclover:20201120110503p:plain



ObsidainのヘルプはMarkdownファイルが259個なので、問題なく表示できていますが、ファイル数が多くなるとどうなるんだ？と疑問に思うかもしれません。 ファイル数が12308個の.NET Docsを表示してみます。

表示できます。しかし、これではなにがなんだかわかりません。 f:id:orangeclover:20201120110616p:plain



こういう場合は、フィルターで、関係しそうなものを抽出しると良さそうです。
試しに、 async でフィルターしてみます。スッキリしました。
f:id:orangeclover:20201120110636p:plain



その後、マウスのホイールか、 + キーでファイル名が見えるまでズームすると良さそうです。
f:id:orangeclover:20201120110701p:plain



バックリンクを表示

現在の見ているファイルが、他のどのファイルからリンクを貼られているかを右側のサイドバーにあるbacklinks for sync確認することもできます。
(これはデフォルトではOFFになってるので、 Setting の Core Plugins で Backlinks を ON に設定変更が必要です。)

[[wiki-links]] も使えますが、通常のMakdown記法の [リンクテキスト](ファイル名) 貼っているリンクも対象です。
f:id:orangeclover:20201120110728p:plain



また、サードパティー製のプラグインを使うと、ファイル下にバックリンクを表示することもできます。
(Setting の Tird-party Plugins で、 Safe Mode を OFF にして、 Backlinks in document をインストールして、 ON にする。)
f:id:orangeclover:20201120110745p:plain



分類用のタグ

Markdownの記法を外れてしまいますが、 #タグ で分類することも出きます。日本語のタグも使用することができます。
(これはデフォルトではOFFになってるので、 Setting の Core Plugins で Tag Pane を ON に設定変更が必要です。)
f:id:orangeclover:20201120110807p:plain



タグをクリックすると、該当箇所が一覧表示されます。
f:id:orangeclover:20201120111129p:plain



公式サイト

関連リンク