Visual Studio Codeで図を描く – Draw.io Integration

勉強不足で全然知りませんでしたがdraw.ioって有名みたいですね。
それがどうもVSCodeの拡張機能として実装されたみたいです。
使ってみた感じ結構使いやすい。
これはかなりうれしい。

インストール

Ctrl + Shift + X
or ファイル → ユーザー設定 → 拡張機能で拡張機能を開きます。
検索ボックスにdraw.ioと入れればDraw.io Integrationが出てきます。

インストールしてみました

拡張子.drawioのファイルを作成します。

もう使えます。こんな雰囲気。

一般を開いて適当なアイコンをドラッグアンドドロップします。

結構直観的な操作でできます。
文字もただ打つだけで入力できます。

図形が足りない人はその他の図形..を選択します。

結構色々あります。はっきりと見えないのが玉にキズ。
どんなものがあるかは有効にしてからのお楽しみ。

カラー！！
反転するのは右側の反転で垂直とか水平とかを選びます。
そこはちょっと直観的でない(20/9時点)

コピーして適当な絵を貼り付けることもできます。

フリーハンドで落書き

絵心のない僕の落書きだとこうなる

保存は.drawioのファイルとして保存すれば良い。
すごいのはこれ。埋め込み用のコードを出力してくれる。

作成する

埋め込みコードのコピー

埋め込んでみた内容。

一部アイコンが死んでますね。
しかし、かなり便利そうです。

おわり

VSCodeの使い方はこの辺にまとめています。
よろしければどうぞ。→ Visual Studio Code