作図ツール draw.io を使ってみよう

こんにちは。フロントエンドエンジニアの辻です。
今回は作図ツールの draw.io を紹介します。

draw.io とは

draw.io とは、無料で利用できるオンライン作図ツールです。
フローチャートやクラス図をはじめとした様々な図を作成できる便利ツールです。

Web ブラウザ上で動作するツールであり、draw.io 公式サイト の「Start」からすぐに作図を始められます。
また、Web ブラウザ版だけでなく、デスクトップアプリ版や VSCode プラグイン版（非公式）もあります。

デスクトップアプリ版は draw.io 公式サイト の「Download」の遷移先から入手できます。
VSCode プラグイン版は Draw.io Integration – Visual Studio Marketplace です。

draw.io のはじめ方

さっそく使ってみましょう。
今回は Web ブラウザ版で作図をしていきます。
まずはじめに draw.io の「Start」ボタンを押下します。

すると「ファイルの保存先」の選択画面が表示されます。
ここで Google ドライブや GitHub などを選択すると、各サービスとの連携が可能です。
…が、今回は「デバイス」を選択します。

次に表示される選択肢のうち、「新規ファイルを作成する」を選択します。

次に新規ファイルを作成する画面が表示されます。

1. ファイル名に任意の名前を入力する
2. ファイルの拡張子は「ベクター画像(.svg)」を選択する
3. 「白紙ファイル」を選択する

上記の3点に対応後、画面右下の「作成する」ボタンを押下しましょう。

新規ファイルが作成されると、編集画面が表示されます。
ここから、作図スタートです！

draw.io でシンプルなフロー図を作成してみる

まず画面左側の「一般」から何かしらの図をクリックしてみましょう。
すると画面右側に図形が挿入されます。
（「一般」内の図を選択して、ドラッグ&ドロップでも構いません。）

図形が挿入されたエリアは「キャンバス」と呼ばれ、このエリア内で図形を組み立てていきます。

挿入した図形をダブルクリックすると、図形内部にテキストを挿入できます。
試しに何かしらの文字を挿入してみましょう。

こうして、1つずつ図形を用意していきます。
「一般」以外の図形でも構いませんので、いくつか図形を挿入してみましょう。
今回は下記のような形式にしてみました。

では次に挿入した図形にカーソルを乗せてみましょう。
すると、四方に矢印が表示されます。
そのうち、下方の矢印をクリックして、真下の図形にめがけてドラッグします。
こうして、図形同士を矢印でつなげられます。

同じ操作でそれぞれの図形をつなげていきます。

最後に、矢印の近くに文字を挿入してみます。
キャンバス上の何もない箇所をダブルクリックすると、カーソル付近に挿入できる図形一覧のショートカットが表示されます。このうち、左上の「Text」を選択します。

すると、画面上に Text が挿入されました。
Text をダブルクリックすると内容を編集できます。

同じ操作でテキストをもう一つ挿入してみました。
とても簡素ではありますが、これで1つのフローができました！

ここまで来ましたら、作成したファイルを保存しましょう。
画面左上の「ファイル」から「保存」を選択すると、作成したファイルが「ファイル名.drawio.svg」として PC にダウンロードされます。

SVG として出力する

PC にダウンロードされた「ファイル名.drawio.svg」でもフロー図の確認は可能です。
ただ drawio.svg は、あくまで draw.io で編集するためのファイルであるため、最後の仕上げとしてシンプルな svg にして出力してみます。

画面左上の「ファイル」から「形式を指定してエクスポート」 > 「SVG」を選択します。

エクスポートする SVG の設定が聞かれます。
任意で設定いただいて構いません。

最後に保存場所を「ダウンロードする」にした上で、「OK」ボタンを押下して完了です。
これまで編集してきたフロー図が SVG として出力されます。

まとめ

さて、draw.io を使って簡単なフロー図を作ってきました。
draw.io には様々な機能が搭載されており、効率的に作図できるので、大変便利です！
機会がありましたら、また draw.io の機能を紹介していきます。

Gaji-Labo フロントエンドエンジニア向けご案内資料