作図ツール 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 などを選択すると、各サービスとの連携が可能です。
…が、今回は「デバイス」を選択します。

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

次に新規ファイルを作成する画面が表示されます。
- ファイル名に任意の名前を入力する
- ファイルの拡張子は「ベクター画像(.svg)」を選択する
- 「白紙ファイル」を選択する
上記の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 フロントエンドエンジニア向けご案内資料
Gaji-Labo は Next.js, React, TypeScript 開発の実績と知見があります
フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。
「既存のサイトを Next.js に移行したい」
「人手が足りず信頼できるエンジニアを探している」
「自分たちで手を付けてみたがいまいち上手くいかない」
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
Next.js, React, TypeScript の相談をする!