Visual Studio Codeで「draw.io」が使える⁉

どうも。半リモート中(週2日だけ本社勤務)のエンジニア、ほりです。

はじめに

エンジニアってちょっとした図を書いたり、UML書いたりと結構作図しますよね?
そこで今日は、作図で有名なサイト draw.io を、Visual Studio Codeでプラグイン化した拡張機能を紹介したいと思います。

インストール

前提として、Visual Studio Code を使いますので事前にインストールしておいてください。
今回使う拡張機能は「Draw.io Integration」と呼ばれるものになります。

画像に alt 属性が指定されていません。ファイル名: Kmo1Uyu2-_CA3Vo17dEXgoU3MmtjKwp7OR7CY4F6sMBxpVIHRzNoHO7gtQrcr7yW6odJBhgdHtKvYzzsQ05M9DpyRLnZShZCVSpBiUEamE2fGLd7KXAeD1cwPxW76lJaZY0PzYhd

拡張機能追加のアイコンをクリックして「draw.io」で検索するとヒットすると思います。

使ってみよう!

拡張子を .drawio または .dio としたファイルを作成し、VSCodeで開きます。
「w2solution.dio」という名前でファイルを作成して開くと以下のようになりました。

画像に alt 属性が指定されていません。ファイル名: C5l2AYxzsuHOiC9ukJ7ijEJdfp23-GZ-cYXgXyd31xC7q5SV68rMFF7XeX-iZOcTKhq5LTJs5Nv5FWmE9qTpxPqTBMIBu6O1yZTLpyuc3C6VLdUDdJW1MFT3_7mDwrKeodgP-Otu

あとは作図するだけです。試しに「w2」と書いてみました。

画像に alt 属性が指定されていません。ファイル名: mwLYnCLNNYOBZE9Ojkgccpb7xXrnVZBn-Y339j8nGkMLrh802v0IGNBHDQFYcumzZIjiRI1EzJNB2mpgzZB1adXduscDOZ3tNzRP4FLXVTn0DwljcIAnLjPk8IkvxAhatG9FCv9z

とってもお上手だと思いませんか!?笑

次にsvgでエクスポートしてみます。
「Ctrl+Shift+P」で小窓を開いて「draw…」と入力していると「Export To…」というのが表示されてきます。
これでエクスポート可能です(pngもいけるようです)。

画像に alt 属性が指定されていません。ファイル名: JC2ikRScuBhGkqsLWZYjhTuUUnIRcZ0ydZahXvAZqRJ-R8cAEJPKB_mivQxeHdU0mUi9KSCIQsoycPN6CiZbxQWJGwXBoZ0wfdV2OWVmOhxzzSR_wTHEtSFqofdbyEPr7BjYE0Eq

じゃじゃーん!

と、遊びみたいな絵になってしまいましたが、ちゃんと業務的にも使えます!笑

画像に alt 属性が指定されていません。ファイル名: F2qCFvuvkatJwBPWoI7t1QZgN5g9lebVY0nYULycpaLQpyfOO0l1hY1e92vncVQOsMHuSgogln7yO5Eoqb2Sz2ziEeFRgVkpb8jgDG2MBIel6AEgAQYVILcwso_z5IqBFWooVWzT

まとめ

いかがでしたでしょうか?
驚いたのは、ここまで全て無料でできるということです。

エンジニアの方は、作図をする機会も多いと思うので、是非つかってみてください!

関連記事

プロジェクトストーリー

おすすめ記事

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP