はじめに
VSCodeの機能拡張 Draw.io Integrationがリリースされ、VSCodeで作画ができるようになりました。
文章をマークダウン、図形をDraw.ioを使ってドキュメント化すれば、ソースコード含め全ての成果物をVSCodeで完結できます。 また、図形をテキスト形式であるsvgで作成すればマークダウンと共にgitで管理するのに都合がよいです。
ということで、Draw.ioでsvg形式で画像ファイルを作成し、マークダウン（mdファイル）に埋め込む方法を調べました。
| 環境 | |
|---|---|
| OS | macOS Caralina 10.15.4 |
| VScode | 1.45.1 |
| Draw.io Integration | 0.6.6 |
VSCode拡張機能 Draw.io Integration導入方法
先人の方がまとめて下さってます。⇒ VSCodeでDraw.ioが使えるようになったらしい！
Draw.ioでsvg形式のファイルを作成する
拡張子を.drawio.svgまたは.dio.svgにしてファイル作成すると、Draw.ioに関連付けられ、svg形式のファイルを作画＆作成できます。
mdファイルにsvgを埋め込む
mdファイルに以下のように作成した画像（.drawio.svg)を埋め込むことができます。
マークダウン構文またはimgタグで記述します。
mdファイルの編集画面からDraw.io画面を開ければ...
マークダウン構文で記載した場合、画像ファイルを cmd + クリック で開くことはできますが...
残念ながら、テキストエディタが開いてsvgのソースが表示されます。
Draw.io Integrationはまだリリースされたばかりなので、バージョンアップして安定性とVSCodeとの親和性があがることを期待します。