Help us understand the problem. What is going on with this article?

VSCodeでDraw.ioが使えるようになったらしい!

はじめに

VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、
導入方法と使い方を備忘として残していきます。

Draw.ioとは?

Draw.ioとはdraw.ioにアクセスするだけで、フローチャートやネットワーク図、ER図といった豊富なテンプレートを使用して簡単にお絵かきをすることができるサービスになります。
Draw.ioで作成した図はPNGやJPEGなどの画像形式だけでなく、 SVGやXMLといった豊富な拡張子でエクスポートすることが可能です。
具体的にこんな感じでお絵かきすることができます。
スクリーンショット 2020-05-14 20.03.52.png

それがVSCodeで使えるようになったらしい!

Draw.ioを知ったところで本題に戻ります。
なんとこのDraw.ioがVSCodeで利用できるようになったらしいです!
Github: https://github.com/hediet/vscode-drawio
MarketPlace: Draw.io VS Code Integration

手元で簡単に、しかもGUIベースで利用することができるようで、使い方に迷うこともなく直感的にお絵かきができます!
ブラウザ上で作成するのでも苦はなかったですが、VSCodeでそれができるというのはかなりいいですよね!

導入方法

Draw.io Integrationでinstallボタンを押すか、
VSCodeの拡張機能検索窓で「Draw.io Integration」と検索してインストールをするだけです!

反映させ直すために一度VSCodeを立ち上げなおしたほうが良いかと思います。

使い方

拡張子を.drawioもしくは.dioでファイルを作成するだけですぐに利用可能です。
ファイルを作成して開くとすぐに描画画面になります。
drawiovscode.mov.gif

操作方法

かなり直感的に操作することができると思うので、説明はおそらく不要だと思いますが、
左側のshapeから必要なものをドラッグ&ドロップするだけですぐに描画することができます。

また、描画した図にマウスオーバーすると、矢印が出てきますので、そちらをクリックしたままホールドし、他のShapeに伸ばしてあげることで、リレーションを書くこともできます。

drawio2.mov.gif

アイコンを追加する

いろんなサービスのアイコンを追加で使うことができます!
Shapesの下にある[+ More Shapes...]を選択してもらうと追加でアイコンを選択することができます。
AWSやGCP、AzureのアイコンやKubernetesのアイコンを使うこともできます!
draw4.mov.gif

エクスポートのやり方

上記までで作成した図をエクスポートするときには、
上のメニューバーから
[File]→[Export as]→(任意の拡張子)
の順で選択することで簡単にエクスポートすることが可能です。
draw3.mov.gif

最後に

簡単に導入から使用までを行うことができました!
エンジニアはよく図を描く場面があると思うので、そのときにはぜひ使ってみるといいと思います!

参考

Github: https://github.com/hediet/vscode-drawio
MarketPlace: Draw.io VS Code Integration

riku-shiru
普段はキーボードをぽちぽちしています。新卒3年目Webエンジニアです。
lifull
日本最大級の不動産・住宅情報サイト「LIFULL HOME'S」を始め、人々の生活に寄り添う様々な情報サービス事業を展開しています。
https://lifull.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした