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

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

インストール

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

vscode-drwaio-01

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

vscode-drwaio-02

使い方

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

vscode-drwaio-03

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

vscode-drwaio-04

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

vscode-drwaio-05

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

vscode-drwaio-06

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

vscode-drwaio-07

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

vscode-drwaio-08

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

vscode-drwaio-09

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

vscode-drwaio-10

フリーハンドで落書き

vscode-drwaio-11

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

vscode-drwaio-12

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

vscode-drwaio-13

作成する

vscode-drwaio-14

埋め込みコードのコピー

vscode-drwaio-15

埋め込んでみた内容。

まとめ

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

おわり

コメントを残す

メールアドレスが公開されることはありません。