無料でUMLやER図などを作図できる便利サービス「draw.io」を使ってみた

2018年11月29日サービス

おはようございます。

人に何か説明する時、考えを整理する時、
新しくサービスやソフトウェアを作るときなんかに図を使うことってありますよね。

今回は無料で手軽に色々な図を作成できるサービスを紹介します。

  • フローチャート
  • マインドマップ
  • ネットワーク図
  • フロアレイアウト
  • 各種モックアップ
  • ER図
  • シーケンス図

とまあ、やりようによっては何でも作図できてしまいそうなほど
高機能なサービスとなっています。

スポンサーリンク

サイト

次のURLにアクセスするとログイン不要で使い始めることができます。
https://www.draw.io/

draw.ioサイトトップ
draw.ioサイトトップ

保存先に次のものが選べます。

  • Google Drive
  • GitHub
  • Dropbox
  • OneDrive
  • Device
新規作成
新規作成

ひとまず「Device」を選択します。

作成メニューが表示されるので、
「Create New Diagram」をクリックします。

テンプレート選択
テンプレート選択

テンプレート選択画面が表示されます。
50程の豊富なテンプレートが用意されています。

テンプレート選択画面
テンプレート選択画面

スマートフォンのモックアップ用テンプレートなんかも用意されています。

日本語表示に変更する

あとあと気付いたのですが、表示も日本語に変更できます。

言語選択
言語選択

右上にあるアイコンをクリックします。

日本語を選択
日本語を選択

リストから日本語を選択します。

表示が変更される
表示が変更される

表示が日本語に変更されます。

日本語表示
日本語表示

これで悩まず操作できますね。
後の画像は先にキャプチャしたものなので全て英語表記になってます(汗

フローチャートを作成してみる

簡単なフローチャートを作成してみます。

テンプレート選択
テンプレート選択

ひとまず、「Blank Diagram」を選択します。

ファイル名変更
ファイル名変更

左上にファイル名(初期は「Untitled Diagram.xml」)が表示されているので、
クリックして変更します。

ファイル名入力
ファイル名入力

ファイル名を「フローチャート」とします。

図形の配置
図形の配置

左側に図形(シェイプ)が表示されているので、
「Flowchart」メニューから、開始(楕円形)の図形をクリック、
またはドラッグ&ドロップで配置します。

スタイル変更
スタイル変更

配置した図形のスタイルや、文字の色などを設定することができます。

矢印で図形をつなぐ
矢印で図形をつなぐ

図形を選択すると、上下左右に矢印が表示されるので、ドラッグして別の図形につなげます。

矢印の配置
矢印の配置

開始図形から、ファイル読み込み図形に矢印が挿入されました。

図形を配置していく
図形を配置していく

更に図形を配置していきます。

図形のコピペ
図形のコピペ

同じ図形を配置する場合
コピーアンドペーストが便利です。
Windows のショートカットと同じ「CTRL」+「C」、「CTRL」+「V」を使うことができます。

テキストの挿入
テキストの挿入

あたりまえですが、テキストも挿入できます。

ページ設定
ページ設定

ページの設定も可能です。
ページサイズなんかを最初に決めてから作図するといいかと思います。

名前を付けて保存
名前を付けて保存

上部メニューの「File」>「Save as…」をクリックすると
名前を付けて保存することができます。

保存ダイアログ
保存ダイアログ

ひとまず、「フローチャート」という名前で保存してみました。

既存ファイルの編集

既存ファイルを開く
既存ファイルを開く

先程まで編集していた画面を閉じ、
再度アクセスして既存ファイルを開きます。

「Open Existing Diagram」をクリックします。

既存ファイルの表示
既存ファイルの表示

無事にフローチャートが表示されました。
保存形式は「xml」、「html」等選べるようです。

豊富な図形やテンプレート

図形選択
図形選択

初期で表示されている図形メニューの他にも色々と用意されています。
左下の「More Shapes」をクリックします。

他の図形群
他の図形群

無料とは思えない程色々な図形メニューがあります。

Android用
Android用

Androidのモックアップ用図形なんかも。

iOS用
iOS用

ということはもちろん iOS モックアップ用もあります。

スマフォ用
スマフォ用

スマートフォンモックアップです。
結構しっかりと表現できるのがすごいと思います。

ワイヤフレーム用
ワイヤフレーム用

HP作成などで使われるワイヤーフレームなんかも用意されています。

まとめ

まだまだ沢山の機能があります。
簡単に紹介すると次のようなことができます。

  • 図形の作成
  • ダイアグラムの編集
  • アウトラインの表示
  • レイヤーの追加
  • スクラッチパッド(図形群の保存)
  • 画像や HTML の埋め込み
  • 画像や HTML、PDF形式での出力

相当便利なので、是非使ってみてください。

ではでは。

かんたん UML入門 [改訂2版] (プログラミングの教科書)

かんたん UML入門 [改訂2版] (プログラミングの教科書)

竹政 昭利, 林田 幸司, 大西 洋平, 三村 次朗, 藤本 陽啓, 伊藤 宏幸
3,197円(12/17 09:38時点)
発売日: 2017/07/01
Amazonの情報を掲載しています

スポンサーリンク


関連するコンテンツ

2018年11月29日サービスdraw.io, ER図, UML, サービス, シーケンス図, 作図

Posted by doradora