Draw.io～Visio感覚で使える無料オンライン作図ツール

ちょっとしたシステム構成説明のポンチ絵やネットワークダイアグラム、トポロジー図などを書く時に使用する無料のオンラインツール「draw.io」についてあれこれと。

作図ツール第三の選択肢

仕事でこの手のお絵かきをする際、私の場合主な選択肢は２つでした。

前者はさすが作図に特化したツールということで非常に詳細な機能と使い勝手の良さ、対応ステンシル（絵画オブジェクト）も豊富という良さがある一方、通常のMS Officeには同梱されず別売りで、読み手には最低限Visio Viewerを端末にインストールする必要があり、少々敷居の高い位置づけとなっています。

後者はExcelということで、汎用性もありちょっとしたお絵かきであれば十分だったりしますが、あくまで表計算ツールおまけで微調整が効かなかったりします。

紹介するdraw.ioは上記の中間的な位置づけにあるツールと言っても良いかと思います。

Chromeのエクステンションとして動作

draw.ioはChromeウェブブラウザのエクステンション（追加モジュール）として動作します。ゆえに利用するにはChromeが必須となります（Chromeは無料のWebブラウザです）

エクステンションはChromeウェブストアからインストール可能です。インストールすると、「アプリ」の一覧にdraw.ioのアイコンが追加されるのでそれをクリックするとツールが起動します。

豊富なテンプレート／ステンシル

テンプレートはネットワーク関連に限らずフローチャートやUML図など、色々な状況に合わせたテンプレートが用意されており、テンプレートに合わせてステンシルのセットがデフォルトで組み込まれています。

デフォルトのステンシルセットにCisco系のものもあります。私の場合ネットワーク関係ではこれが一番使用頻度が高いです。

デフォルトのステンシル以外にも、検索窓から検索して使用することができます。最近ではAWS関連の資料もよく作るのでこれらのステンシルが使えるというのもありがたいですね。

直観的操作が可能なユーザインタフェース

ステンシルを選び配置し、ステンシル同士を何かしらのコネクタ（線）で結び、テキスト（文字）を追加して色やら形状やらを変更するというのが基本的な流れになりますが、直観的なUIにより操作はとても簡単です。

一番右のペインではステンシル（オブジェクト）のプロパティが表示され、ここで色や形状などを指定することができます。

最近は主要な部分は日本語化もされているようですが、ある程度慣れていれば日本語でなくても（そもそも説明を読まなくても）十分理解は可能だと思います。

クラウドストレージへの保存も可能

作成したドキュメントの保存先ですが、HDD等のローカルへの保存だけでなくクラウドストレージにも対応しています。

主な保存先は

• Google Drive
• OneDrive
• Dropbox
• GitHub
• Trello
• Device（ローカルHDD等）
• Browser（これがちょっと仕組みわかってません。。。）

などです。主要なクラウドストレージは大方カバーされていますね。Chrome自体がクラウド連携されているので、せっかくならドキュメントもクラウドストレージに置くのも良いかと思います。

ローカルに保存する場合は.xml形式で保管されます。保存して次回起動時にその.xmlを読み込ませれば再編集も可能です。また、不可逆ですがJPEGやPNG、PDFなどにも変換可能です。

まとめ

慣れるまでの時間はそうそう長くはありません。ちょっとお試しで以下のようなネットワーク構成図を書いてみましたが、Excelでこれを作るのは結構ホネだと思います。かといってこれがVisioレベルかというとそこまでのものではありませんが、無償でここまでできるのであれば御の字です。

VisioにはVisioの、ExcelにはExcelの良いところがあります。それでもその中間的な位置づけとしては十分使えると思います。なにより無償という点はVisioもExcelも敵わないところなので、「良いとこ取り」以上の存在にはなるかと思います。