VSCodeとExcalidrawでちょっとした手書きの図を書こう

はじめに

VSCodeでメモやドキュメントに残すとき、
ちょっとした図を作りたいときないですか？
Mermaid や draw.io もいいですが、手書きの画像を作るなら、 Excalidraw を使うといいかもしれません。

Excalildrawとは

Excalidrawは図形描画ツールです。
手書きもできます。

https://docs.excalidraw.com/

VSCodeの拡張機能を使う

VSCodeに拡張機能ありました。
ありがたいです。

https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor

使い方

使い方は簡単。
.excalidraw 、.excalidraw.json、 .excalidraw.svg、 .excalidraw.png を拡張子に持つ空のファイルを作成するだけです。
VSCode内にExcalidrawのエディタが表示されます。
ペンタブを使えば手書きも可能です。
実際、こちらの画像の文字はペンタブで書いています。

こんな感じ

まとめ

自分はマークダウンと組み合わせて手書きの図つきのメモを作るようにしています。
mermaidやdraw.ioではできなかった手書きツールをぜひ試してみてはいかがでしょうか。