無料でUMLやER図などを作図できる便利サービス「draw.io」を使ってみた
おはようございます。
人に何か説明する時、考えを整理する時、
新しくサービスやソフトウェアを作るときなんかに図を使うことってありますよね。
今回は無料で手軽に色々な図を作成できるサービスを紹介します。
- フローチャート
- マインドマップ
- ネットワーク図
- フロアレイアウト
- 各種モックアップ
- ER図
- シーケンス図
とまあ、やりようによっては何でも作図できてしまいそうなほど
高機能なサービスとなっています。
スポンサーリンク
サイト
次のURLにアクセスするとログイン不要で使い始めることができます。
https://www.draw.io/
![draw.ioサイトトップ](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio000.jpg)
保存先に次のものが選べます。
- Google Drive
- GitHub
- Dropbox
- OneDrive
- Device
![新規作成](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio001.jpg)
ひとまず「Device」を選択します。
作成メニューが表示されるので、
「Create New Diagram」をクリックします。
![テンプレート選択](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio002.jpg)
テンプレート選択画面が表示されます。
50程の豊富なテンプレートが用意されています。
![テンプレート選択画面](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio003.jpg)
スマートフォンのモックアップ用テンプレートなんかも用意されています。
日本語表示に変更する
あとあと気付いたのですが、表示も日本語に変更できます。
![言語選択](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio026.jpg)
右上にあるアイコンをクリックします。
![日本語を選択](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio027.jpg)
リストから日本語を選択します。
![表示が変更される](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio028.jpg)
表示が日本語に変更されます。
![日本語表示](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio029.jpg)
これで悩まず操作できますね。
後の画像は先にキャプチャしたものなので全て英語表記になってます(汗
フローチャートを作成してみる
簡単なフローチャートを作成してみます。
![テンプレート選択](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio004.jpg)
ひとまず、「Blank Diagram」を選択します。
![ファイル名変更](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio005.jpg)
左上にファイル名(初期は「Untitled Diagram.xml」)が表示されているので、
クリックして変更します。
![ファイル名入力](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio006.jpg)
ファイル名を「フローチャート」とします。
![図形の配置](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio008.jpg)
左側に図形(シェイプ)が表示されているので、
「Flowchart」メニューから、開始(楕円形)の図形をクリック、
またはドラッグ&ドロップで配置します。
![スタイル変更](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio009.jpg)
配置した図形のスタイルや、文字の色などを設定することができます。
![矢印で図形をつなぐ](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio010.jpg)
図形を選択すると、上下左右に矢印が表示されるので、ドラッグして別の図形につなげます。
![矢印の配置](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio011.jpg)
開始図形から、ファイル読み込み図形に矢印が挿入されました。
![図形を配置していく](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio012-1024x767.jpg)
更に図形を配置していきます。
![図形のコピペ](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio013.jpg)
同じ図形を配置する場合
コピーアンドペーストが便利です。
Windows のショートカットと同じ「CTRL」+「C」、「CTRL」+「V」を使うことができます。
![テキストの挿入](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio014-1024x767.jpg)
あたりまえですが、テキストも挿入できます。
![ページ設定](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio015.jpg)
ページの設定も可能です。
ページサイズなんかを最初に決めてから作図するといいかと思います。
![名前を付けて保存](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio016.jpg)
上部メニューの「File」>「Save as…」をクリックすると
名前を付けて保存することができます。
![保存ダイアログ](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio017.jpg)
ひとまず、「フローチャート」という名前で保存してみました。
既存ファイルの編集
![既存ファイルを開く](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio018.jpg)
先程まで編集していた画面を閉じ、
再度アクセスして既存ファイルを開きます。
「Open Existing Diagram」をクリックします。
![既存ファイルの表示](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio019.jpg)
無事にフローチャートが表示されました。
保存形式は「xml」、「html」等選べるようです。
豊富な図形やテンプレート
![図形選択](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio020.jpg)
初期で表示されている図形メニューの他にも色々と用意されています。
左下の「More Shapes」をクリックします。
![他の図形群](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio021.jpg)
無料とは思えない程色々な図形メニューがあります。
![Android用](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio022.jpg)
Androidのモックアップ用図形なんかも。
![iOS用](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio023.jpg)
ということはもちろん iOS モックアップ用もあります。
![スマフォ用](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio024.jpg)
スマートフォンモックアップです。
結構しっかりと表現できるのがすごいと思います。
![ワイヤフレーム用](https://www.doraxdora.com/wp-content/uploads/2017/05/Drowio025-1024x771.jpg)
HP作成などで使われるワイヤーフレームなんかも用意されています。
まとめ
まだまだ沢山の機能があります。
簡単に紹介すると次のようなことができます。
- 図形の作成
- ダイアグラムの編集
- アウトラインの表示
- レイヤーの追加
- スクラッチパッド(図形群の保存)
- 画像や HTML の埋め込み
- 画像や HTML、PDF形式での出力
相当便利なので、是非使ってみてください。
ではでは。
ディスカッション
コメント一覧
まだ、コメントがありません