VSCodeでdraw.ioを使う

Sponsored Link
ロリポップ!レンタルサーバー

VSCodeのdraw.ioプラグイン

以前、ご紹介したdraw.io

draw.ioでAWSの図面を描いてみる。これまで仕事ではVISIOを使ってネットワーク図やAWSの構成図などを描いていましたが、代わりとなるツールとして有名なdraw.ioを使ってAWSの構成図が描けるのか試してみました。 draw.io…
続きを読む
 www.51weblab.jp
draw.ioでAWSの図面を描いてみる。

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

VSCodeでDraw.ioが使えるようになったらしい! - Qiita追記versionによっては設定を変えないとエクスポートができないようです。エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。現状バージョン0.4で…
VSCodeでDraw.ioが使えるようになったらしい! - Qiita qiita.com
VSCodeでDraw.ioが使えるようになったらしい! - Qiita

詳細は記事を参照していただければと思います。

プラグインはDraw.io Integrationというもので、拡張機能で検索すればすぐに見つかります。

使用感としては、ほとんど変わらずに使う事ができ、図形(ステンシル)も問題無く利用できました。

ただ、エクスポートする事ができなかったので、プラグインの制約なんだろう、とあきらめていたのですが、改めて上記の記事を読むとエクスポートできると書いてあるではありませんか。

Google先生に聞いてみたところ、プラグインの設定が原因でした。

ちなみに設定変更前のファイルメニューは下の図。

Sponsored Link

Draw.io Integrationの設定

参考にさせていただいたのは、こちらの記事

(2020年12月8日追記)VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 - Qiita概要Draw.io Integrationでのエクスポート方法について記載します。対処法一覧対処法1 オンラインモードで使用する対処法2 オフラインモードで使用する対処法3 拡張子を変更する…
(2020年12月8日追記)VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 - Qiita qiita.com
(2020年12月8日追記)VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 - Qiita

拡張機能で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に緩やかに変わるようです。

Attention Required! | CloudflareThis website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
Attention Required! | Cloudflare www.diagrams.net
Attention Required! | Cloudflare

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

以 上

 

Sponsored Link