draw.ioとは？基礎知識やできること、使い方を紹介

draw.ioとは

draw.ioとは、英国のJGraph Ltdが開発・提供するオンラインの作図ツールです。アカウントを作成することなく、基本的に無料で使える手軽さが魅力といえます。

エンジニア向けのUMLやER図といった専門的な図から、フローチャートなどの汎用性が高い図まで、幅広い図を作成可能です。また、作成した図は自分のパソコンはもちろん、クラウド上に保存して共有することもできます。

draw.ioは個人・チーム、ビジネス・プライベートを問わず使える、汎用性が高い作図ツールです。現在の作図ツールに不満がある方は、気軽に使ってみましょう。

draw.ioを使ってできること4選

draw.ioは汎用性が高く、さまざまな用途に利用可能です。ここでは、draw.ioを使ってできることの代表例を4つピックアップして紹介します。

• UMLの作成
  
• フローチャートの作成
  
• ER図の作成
  
• ワイヤーフレームの作成

それぞれ詳しく見ていきましょう。

UMLの作成

draw.ioは、エンジニアがシステムの構造や振る舞いを表現する「UML（Unified Modeling Language）」の作成に適しています。draw.ioには、さまざまなUMLを描くためのテンプレートがあり、大半のUMLを作成可能です。

UMLの種類は多岐にわたりますが、draw.ioで作成できるUMLの代表例を下表にまとめました。

draw.ioを使えば、こうしたUMLに必要なオブジェクトを配置したり、複数オブジェクトをコネクタでつないだりできます。UMLを扱うエンジニアであれば、draw.ioが役立つシーンは多いでしょう。

フローチャートの作成

draw.ioは、処理や手続きの流れを可視化する「フローチャート」の作成にも活用できます。端子や分岐、処理といった幅広いオブジェクトがあり、オブジェクトの配置・矢印での接続のみで手軽にフローチャートを作成可能です。

フローチャートはソフトウェア設計のみならず、幅広いビジネスシーンで役立ちます。たとえば、業務改善に向けてツールを導入する際、新しい業務フローを可視化して関係者と共有することが可能です。「処理や手続きの流れを可視化したい」といったビジネスシーンでは、draw.ioでフローチャートを作成するとよいでしょう。

ER図の作成

draw.ioは、データベース設計に欠かせない「ER図（Entity Relationship Diagram）」の作成にも対応しています。ER図は、データ管理に用いるテーブルのデータ構成や関係性（リレーションシップ）を表現する図です。

draw.ioを使えば、「テーブルを配置→データを列挙→テーブル間をコネクタでつなぐ」といったステップで手軽にER図を作成可能です。ER図でリレーションシップを表現するためのコネクタが多数あり、テーブル間の関係性を正確に表現できます。データベースを扱う業務を担当している場合は活用してみましょう。

ワイヤーフレームの作成

draw.ioを使えば、Webサイトの制作に欠かせない「ワイヤーフレーム」も作成できます。ワイヤーフレームは、Webページ上の表示要素やレイアウトなどを可視化するものです。

draw.ioは使用する図形をカスタマイズでき、ボタンやアイコンといったWebページの表示要素を追加することも可能です。Webデザインに特化したツールではありませんが、簡易的なワイヤーフレームであれば無料で作成できます。費用をかけずにワイヤーフレームを作成したい方は活用してみましょう。

draw.ioを活用するメリット

draw.ioを活用するメリットは、主に次の2つです。

• フローチャートや模式図などを無料で作成できる
  
• 豊富な図形を用いて効率的に作図

それぞれ詳しく見ていきましょう。

フローチャートや模式図などを無料で作成できる

draw.ioの大きなメリットは、無料で図を作成できることです。一般的な作図ツールには、月額料金やライセンス料が発生する製品も少なくありません。draw.ioであれば、このような費用が発生せず、企業や個人がコストを気にせず気軽に使えます。

また、draw.ioで作成した図は、特段の制限なくビジネスにも利用できます。たとえば、draw.ioで作成したフローチャートを自社サービスのヘルプページに盛り込む、といった利用方法も無料で可能です。ビジネス利用に制限がないことは大きな強みといえます。

豊富な図形を用いて効率的に作図ができる

PowerPointといった一般的なツールで作図する場合、存在しない図形は自ら作成しなければなりません。その点、draw.ioは汎用性が高く、さまざまな用途に使える図形が用意されています。幅広い図形を使えるため余計な作業工程が減り、効率的に作図を進められるでしょう。

draw.ioでは、UMLやER図などの主要なオブジェクトが標準で利用できます。それに加えて、用途に合わせて「その他の図形」から図形を追加することが可能です。

一度追加した図形は画面の左側にリストアップされ、さまざまなファイルの編集時に使い回せます。そのため、新しく図形を作成する手間を省け、作業効率を大幅に向上できます。

draw.ioの使い方

draw.ioはとても簡単に使い始められます。ここでは、draw.ioの使い方を次の5ステップに分けて紹介します。

1. draw.ioへのアクセス
2.  ファイル名やテンプレートの設定
   
3.  初期設定
   
4.  図の作成
   

5.  作成した図の保存

    

1. draw.ioへのアクセス

まずは、draw.ioへアクセスしましょう。初回アクセス時には、以下のような画面が表示されます。初めての場合は「新規ファイルを作成する」をクリックすればOKです。

なお前述のように、draw.ioを使い始めるうえではアカウント作成が必要ありません。ファイルの作成が完了すれば、draw.io上で作図を開始できるようになります。

2. ファイル名やテンプレートの設定

次に、作成した図を保存するためのファイル名や、作成したい図のテンプレートを設定します。draw.ioで作成した図は、「.drawio」という独自の拡張子を持つXMLファイルで保存するのが基本です。

今回は、ファイル名を「サンプル.drawio」、図のテンプレートを「フローチャート」とします。ファイル名やテンプレートを設定したうえで「作成する」を選択しましょう。テンプレートを使わない場合は「白紙ファイル」を選択してください。

上記の設定を行うとファイルの保存先を聞かれるため、保存したい場所を選択してください。以下のような画面が表示されれば、ファイルの作成は成功です。

3. 初期設定

使い始める前にdraw.ioの初期設定を行い、自分好みにカスタマイズしましょう。画面上部にあるツールバーの「拡張」から、さまざまな設定が可能です。主な設定項目を下表にまとめました。

また、特別な用途に使いたい場合は図形を追加しておくとよいでしょう。前述のように、画面左下の「その他の図形」から、用途に応じた図形を追加できます。

4. 図の作成

初期設定を済ませたうえで、図を作成しましょう。画面左側のツールバーから図形やコネクタなどを選択し、キャンバス上に配置するのが操作の基本です。以下のように、配置したいオブジェクトをドラッグ＆ドロップするだけで簡単に配置できます。

配置したオブジェクトを移動・サイズ調整したり、オブジェクト同士をコネクタで接続したりすることも可能です。図の作成を効率化したい場合は、テンプレートを有効活用しましょう。

5. 作成した図の保存

作成した図を残したい場合は、自分のパソコンやクラウド上に保存しましょう。画面上部の「ファイル」から「保存」を選択、または「Ctrl ＋ S（Cmd ＋ S）」で保存できます。クラウドサービスに保存する場合は、各サービスへのログインが必要です。

また、「ファイル」から「形式を指定してエクスポート」を選択すれば、図を画像ファイルとして出力できます。

draw.ioを有効活用するためのポイント

draw.ioを有効活用するために、次のポイント3つを押さえておきましょう。

• テンプレートを活用する
  
• プラグインを活用する
  
• ショートカットキーを覚える

それぞれ詳しく見ていきましょう。

テンプレートを活用する

draw.ioにはフローチャートやUMLなど、さまざまなテンプレートが用意されています。テンプレートを活用すれば、1からオブジェクトを配置していく必要がありません。作図の手間を減らしたい場合は、テンプレートを有効活用しましょう。

たとえば、以下の図はフローチャートのテンプレートです。オブジェクトの配置を調整したり、文言を変更したりすれば、手軽にフローチャートを作れます。

プラグインを活用する

draw.ioのプラグイン（拡張機能）を活用するのも効果的です。用途に合わせたプラグインを活用することで、よりdraw.ioを快適に利用できるようになります。

プラグインを活用したい場合は、画面上部の「拡張」から「プラグイン」選択し、プラグインを適用する必要があります。プラグインはdraw.ioのGitHubリポジトリから入手可能です。詳しい手順は公式サイトを参照してください。

参考までに、draw.ioで使える代表的なプラグインを下表にまとめました。

なお、コードエディタの「Visual Studio Code」からdraw.ioを利用できるプラグイン「Draw.io Integration」もあります。こちらはVisual Studio Codeのプラグインですが、興味がある方は活用してみましょう。

ショートカットキーを覚える

draw.ioは多くのショートカットキーを備えています。よく使うショートカットキーを覚えることで、作業スピードのアップにつながるでしょう。代表的なショートカットキーを下表にまとめました。

draw.ioのショートカットキーは多岐にわたり、上記はほんの一部です。ショートカットキーを調べたい場合は、「ヘルプ」から「キーボードショートカット」を選択して調べてみましょう。

まとめ

draw.ioとは、無料かつアカウントなしで使えるオンラインの作図ツールです。エンジニア向けのUMLやER図、デザイナー向けのワイヤーフレーム、ビジネスを問わないフローチャートなどを作成できます。

draw.ioはアカウントを作成することなく、手軽に使い始められます。「費用をかけず手軽に図を作成したい」という方は、今回の内容を参考にしてdraw.ioを使ってみてください。