【Markdown活用】Markdown文書のSVGファイルをDraw.ioでリアルタイムに編集する[Visual Studio Code]

今回は最近リリースされて各所話題になっている 『VisualStudioCode上でDraw.ioが使用できるパッケージ』を使用してMarkdwon文書中のSVGファイルをリアルタイムに編集してみます。

marketplace.visualstudio.com

パッケージの取得

Visual Studio Codeで以下パッケージを取得します。 今回は最新の機能を使用するため、Insiders Buildバージョンにしています。(ver 0.6.1)

marketplace.visualstudio.com

SVGファイルの作成

パッケージをインストール後、任意のディレクトリでファイル名.drawio.svgというファイルを新規作成します。 するとDraw.ioの編集画面が開くので、GUIで描画することが出来ます。

Markdown文書に挿入

同じディレクトリに以下のようなMarkdown 文書を作成し、先程のSVGを挿入してみます。

## Draw.ioの画像を挿入してみます

↓こんな風に

![test.drawio](test.drawio.svg)

プレビューウインドウに問題なく表示されています。 (Markdown Preview Enhancedパッケージを使用しています）

リアルタイムに編集してみる

この状態でSVGファイルを編集したとき、markdownプレビューも更新されるか確認します。

Drawioの画面上で編集したあとに保存が必要ですが、リアルタイムに反映されることがわかります。 これにより、いちいちエクスポートせずとも良くなりましたので更新管理が楽になります。

Mermaidも使用できます。

Mermaid.jsにも対応しています。 Arrange -> Insert -> Advanced -> MermaidよりMermaidのコードが挿入可能です。

たとえばガントチャートを挿入してみます

Drawio上でガントチャートが描画されました。

もちろん、Markdown previewでもガントチャートが表示されています

これにより本来Mermaid記法に対応していないMarkdownビューアーでも、問題なくMermaidを活用できそうです。

今回はここまでにします。