0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VSCode でドローイング / drawio を使う

Last updated at Posted at 2020-05-17

VSCode で drawio を使う

VSCode にドローイングツール drawio のプラグインが提供されるようになった、ということでインストールしてみた。

Draw.io Integration - Visual Studio Marketplace

drawio については詳しくは述べないが、Apache 2.0でライセンスされているオープンソフトウェアで、以前はWEBサービスとして動かすものだったと記憶しているが、いつの間にかオフライン版が提供されるようになっていたらしい。

ソフトウェアの仕事をしているとチャートやブロック図、UMLなど図を描きたいと思うシーンがそれなりの頻度で出るにも関わらず気軽に使える適切なツールがなく、ついつい Excel を使用、そして履歴管理や構造を取り出すといったことを使用として途方に暮れるも過去の資産や手軽さでそれを超えるものがなく、ついつい使い続けてしまう…という経験をしている人も少なくないのでは、と思う。

客先に提出したり、図表が成果物として定義されていれば Visio を導入したりと言ったこともあるのだろうが…残念ながらこの20年以上、図表を描く必要性が低すぎて、導入する→便利で使い倒す→効率が上がる→広く導入する→…、というスパイラルを組み立てることができなかった。

導入

拡張機能の管理(MarketPlace)から drawio で検索、インストール。 これだけ。
同様な拡張機能に、vscode-drawio というのもあるが、Draw.io Integrationのほうが 2020-05-17 記事投稿時点で既にメニューが日本語化されており、カスタマイズも多いようだ。

インストール後、拡張子.drawio .dio .drawio.svg でファイルを作成するとVSCode内でdrawioエディタが起動する。デフォルトではオフライン版の drawio が動作するが、外部のdraw.ioサービスも利用できる。

あまりの導入の容易さに拍子抜け。

設定

Draw.io Integration - Visual Studio Marketplace
に詳しいが、オンライン/オフラインの切り替え、テーマの切り替えの他、

  • 拡張子.svgの関連付け
  • XMLファイルを直接編集しながら図の確認ができる

などなど

0
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?