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 拡張子を変更する対処法4 Draw...
(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に緩やかに変わるようです。

Blog - Open source diagramming is moving to diagrams.net, slowlydiagrams.netIntegrationsCompanyCareersCareers SingleCustomersCustomer storyPortfolioAll layoutsContactsContacts AgencyContacts Start-UpUtilitiesPricingFAQTerms & ConditionsPrivacy & PolicySpecialtyStatusBlogSecurityApp Marketplace NewMarketplace app demoHouseReal estate demoJobJob vacancy demoHelp DeskHelp deskCrypto LandingCryptocurrency demoNew demoscoming soon ...Front makes you look at things from a different perspectives.DocsDocumentationv2.8Development guidesGet startedComponents and snippetsCheck what's newChangelogHave a question?Contact usStart NowHomeblogOpen source diagramming is moving to diagrams.net, slowly.st0{fill:#F08705;}.st1{fill:#DF6C0C;}.st2{fill:#FFFFFF;}diagrams.net26 Feb 2020Share:draw.io will slowly transition to become diagrams.net during 2020 for security reasons. Nothing will change for you, apart from seeing a different URL and logo. www.draw.io will continue to serve the application correctly, we won窶冲 even redirect you.
Blog - Open source diagramming is moving to diagrams.net, slowly www.diagrams.net
Blog - Open source diagramming is moving to diagrams.net, slowly

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

以 上

 

Sponsored Link