Inkdrop上に手書き風の図を書くExcalidrawを統合するExcalidraw for Inkdropというプラグインを書きました。

Inkdropのノートに次の記法で .excalidraw ファイルへのリンク か .exalidraw.png を画像として埋め込みます。

[!Excalidraw](file:///path/to/file.excalidraw)

OR

![Excalidraw](file:///path/to/file.excalidraw.png)

このノートをプレビューすると、プレビュー画面に@excalidraw/excalidrawを使ったexcalidrawのエディタが表示されるので、そのまま編集できます。

編集したexcalidrawの内容は元の.excalidrawファイルに自動的に保存され、保存時にあわせて.excalidraw.pngファイルも作成します。

プラグインのオプションで、inline image widgets連携を有効にすると、書き換えるたびにエディタ側が参照する画像も更新して、エディタにレンダリング結果の画像を表示もできます。

☑ Enable integration for inline image widgets

使い方

ipmコマンドでインストールします。

ipm install excalidraw

プラグインの設定から次の設定をします。

  • saveDir: .excalidraw ファイルが自動的に保存されるディレクトリを入れる
  • Enable integration for inline image widgets: inline image previewを使う場合はチェックを入れる

ノート上でコンテキストメニューからCreate Excalidrawを選択すると自動的にsaveDirに.excalidraw が作成され、 そのファイルへのリンクがノートに追加されます。

  • Create Excalidraw: create .excalidraw file to saveDir and put the link into current selection

あとは、プレビューを開いてexcalidrawで描くだけです。

image

Markdownエディタと作図ツールを行き来しないで、同じアプリ内で書けるの便利です。

Figma(FigJam)、Whimsical、Miroとかも便利なのですが、 適当な図を描くのにそっちを使うのは面倒でした。 また、plantuml、nomnoml、Mermaidなどのテキストで書けるツールはメンテナンス性はいいのですが、記法を覚えられないという問題がありました。

Excalidrawは機能的にはそこまで多いわけではないですが、描いてて楽しいのと@excalidraw/excalidrawというライブラリで簡単にアプリケーションに組み込めるので、Inkdropに組み込んでみました。 Excalidrawで描いたら自動で.excalidraw と png ファイルを生成するというのがこだわりポイントです。(ノートアプリで保存を意識したくなかった)

VSCodeでも次のような拡張を使えば .excalidraw ファイルを編集できるので、他のエディタともうまく連携できるような気もします。

雑記

今年のオープンソース活動振り返り @ 2020でも書いていましたが、メインのフローなメモアプリをQuiverからInkdropにしました

Inkdropプラグイン開発者ライセンスを使っているので、ちょこちょこinkdrop pluginを作って使っています。

Inkdropは、CodeMirror、React、Redux、Remark、Electron、CouchDBみたいな構成になっていて、 APIも大体そのままな感じなので、ハックして遊ぶには結構便利な感じです。 (たまにAPIがなかったり、ドキュメント探しても分からないことあるけど、特殊な構成じゃないからなんとかできるみたいな感じ)

あと最近Inkdropのアプリ自体がローカルサーバになって、HTTPでInkdropをさわれるようになったので、これも便利な気がします。