VSCodeでdraw.ioを使う
VSCodeのdraw.ioプラグイン
以前、ご紹介したdraw.io


ですが、先日VSCodeでもdra.ioが使えるという記事を見つけたので早速試してみました。


詳細は記事を参照していただければと思います。
プラグインはDraw.io Integrationというもので、拡張機能で検索すればすぐに見つかります。
使用感としては、ほとんど変わらずに使う事ができ、図形(ステンシル)も問題無く利用できました。
ただ、エクスポートする事ができなかったので、プラグインの制約なんだろう、とあきらめていたのですが、改めて上記の記事を読むとエクスポートできると書いてあるではありませんか。
Google先生に聞いてみたところ、プラグインの設定が原因でした。
ちなみに設定変更前のファイルメニューは下の図。
Draw.io Integrationの設定
参考にさせていただいたのは、こちらの記事


拡張機能でOfflineを無効にしてあげることでエクスポートできるようになりました。
あ、Offlineのオプションのアップ。
ちなみに参考にさせていただいた記事の通り、現時点(2020/05/27)ではPDFは動作しませんでした。
PNGはオッケー。
エクスポートの時に、”名前をつけてダウンロード”と表示されるので、一旦アップロードしてからエクスポートデータを取得しているのではないでしょうか。(勝手な推測です)
エクスポートされるイメージは白背景となっております。
Draw.io Integrationのテーマ
今VSCodeのテーマはdarkを使っており、前の画像の通り背景が黒い編集画面となっています。
エクスポートというか作成される図面は基本白背景ですが編集時にイメージを一致させたいと思い、拡張機能のThemeを試してみました。
前の図にあるようにデフォルトはautomaticとなっていますが、他のテーマがどんな感じかご紹介します。
darkは割愛。
まずはminというテーマ。

Draw.io Integrationのテーマ:min
白い背景で、メニュー表示が小さくなっていたり、図形ボックスの表示が変わっています。
続いて、atras。

Draw.io Integrationのテーマ:atras
基本的な表示はデフォルトと変わらない感じですが、メニューバーが青いですね。(こんだけか?)
最後にKennedy。

Draw.io Integrationのテーマ:Kennedy
これは単純に白い背景に置き換わったイメージ。
当面はKennedyで行こうかと思います。
参考
どうやらdraw.ioはdiagrams.netに緩やかに変わるようです。


使ってみた感じは特に変化はありませんでした。
以 上