Visioライクな説明画像やフローチャートを簡単に作れるサイト「draw.io」

皆さんはVisioというソフトをご存じでしょうか?

たぶんIT系の技術屋さんやプレゼンをよくする人は知っているかもしれませんね!

VisioはMicrosoftOfficeの一つである図表作成ソフトです。

私は、SEの勉強としてUMLモデルやフローチャートなんかを結構作るので非常にお世話になっています。ですから私は購入しているのですが、普通に購入すると高いソフトなんですよね。それを解決してくれるWebアプリを見つけました!

それが、「draw.io」です!

このWebアプリは簡単に図表が作成できます!さらに、無料使えます!

一般の方でもWebサイトの説明画像やプレゼンの画像が簡単に作成できるので使ってみてください!

ちなみに、当サイトでも過去に作成した個人でもVPNの導入は当たり前の時代に!知っておこうVPN Git 講座などで作成した説明画像もdraw.ioで作成したものです。

Untitled-Diagram5

Untitled-Diagram-1

使い方

まずはサイトにアクセスします。

すると、このような画面になります!パッと見で分かると思いますが作ったものをクラウド上に保存することができます。クラウドに保存したい場合は好きなクラウドサービスを選んで認証して下さい。

ローカルに保存するという場合は赤枠のDecide laterを選択して下さい。もちろん後でクラウドを選択することも可能です。

SnapCrab_NoName_2016-4-10_19-17-53_No-00

すると、作業画面が現れます!

SnapCrab_Untitled Diagram - drawio - Mozilla Firefox_2016-4-10_19-22-2_No-00

左側にはすでに様々な種類の図形が設定されています。

ここから好きなカテゴリを選んで後はドラッグ&ドロップで簡単に図形を作成することができます。

SnapCrab_NoName_2016-4-10_19-24-5_No-00

UMLもきちんと用意されています!

SnapCrab_NoName_2016-4-10_19-24-16_No-00

もし気に入ったカテゴリや図形がない場合は検索ボックスで検索してみてください!

ネットワークやGitなど結構適当に入力しても関連画像が出てくるのでかなり多くの図形が存在していると思います。

※検索に関しては日本語に対応していません!必ず英語で検索をしてください。

図表の編集

図形を右クリックするとコメントやリンクの追加などの設定が可能です。

スポンサードリンク

SnapCrab_NoName_2016-4-10_19-41-16_No-00
To Front 図形に文字を追加

To Back 図形を一番後ろに設定

Edit Data 不明

Edit Link クリックしたときにリンクを表示

図形を選択した状態で右ブロックを弄れば色やスタイル、フォントなど細かい設定を変更可能です。

図形の保存

今回は例として簡単なフローチャートを作成してみました。

SnapCrab_NoName_2016-4-10_22-36-5_No-00

プロジェクトの保存

プロジェクトの保存はSaveを選択します。

SnapCrab_NoName_2016-4-10_23-1-13_No-00

すると、保存方法を選択できるので好きなものを選択してください。

クラウドなどに保存しておけばいつでも再編集できますのでクラウドに保存することもいいかもしれません。

SnapCrab_NoName_2016-4-10_23-1-21_No-00

図形の保存

保存形式にはいくつかあります。

画像やPDF、XMLで保存したい場合はここから好きなものを選択して下さい。

保存場所はクラウドでもローカルでも可能です。

SnapCrab_NoName_2016-4-10_22-42-45_No-00

ローカルに画像として保存されました。

SnapCrab_NoName_2016-4-10_22-50-51_No-00

埋め込みなどに使用する際はその下のEmbedを選択して下さい。HTMLコードが返ってきますので自分のサイトなどに張り付けてください。

SnapCrab_NoName_2016-4-10_22-42-57_No-00

HTMLコードが返ってきますので自分のサイトなどに張り付けてください。

SnapCrab_NoName_2016-4-10_22-48-22_No-00

まとめ

いかがでしたでしょうか?

非常に簡単に説明図が作成できることが分かっていただけたかと思います!

「draw.io」のいいところは、やはりWebアプリケーションであるということです。Visioなどのソフトウェアはどのパソコンにも入っているものではありません、しかしWebアプリはインターネットに繋がる環境さえあればいつでもどんな環境でも使用することが可能です。また、クラウドサービスを多くサポートしているのでサイトから直接保存することができます。

無料で非常に使いやすいのでぜひ図形作成が必要になった時は使用してみてください!

スポンサードリンク