ワイヤーフレーム、フローチャートなどの無料ドローツール「draw.io」 を使ってみる
ワイヤーフレーム、フローチャートなどの無料ドローイングツール「draw.io」 を使ってみる
最近は、ドローイングツールのWebサービスがあります。 その中で、使い勝手がいいという「draw.io」を使ってみました。
類似サービス一覧
無料で使えるドローイングツールのWebサービスとして以下があります。
- Cacoo
- Moqups
- draw.io
draw.ioとは
無料、制限なし、日本語で使えるドローイングWebサービスです。 Web系の方であればワイヤーフレーム、モックに、 ネットワーク系の方であればネットワーク構成図に、 ハード寄りであれば回路図に使えると思います。
Flow Chart Maker & Online Diagram Software
draw.io のdocument(support)は、こちらにあります。
draw.io Support Home - Support - draw.io Support
また、オープンソースのようです。
export（保存ファイル）形式
プロジェクトは、XMLファイルになります。XMLファイルをローカルに保存しておき、 draw.io で開くとまた編集し直すことができます。
保存形式は以下です。
SVGファイルは、Inkscape で開くことができたので、draw.ioで保存した後に、Inkscape やIllustrator などのドローイングソフトで編集できそうです。
HTMLファイルで保存した場合、ベクターデータになっているようで拡大縮小もでき、劣化しないデータになっています。
使えるテンプレート
使えるテンプレートが豊富で、以下が使えます。
- ビジネス・プロセス（7種類）
- チャート（6種類）
- エンジニアリング（7種類）
- フローチャート（7種類）
- マインドマップ（2種類）
- モックアップ（2種類）
スマートフォンの外観つきのモックがあります。
- ネットワーク（8種類）
- その他（10種類）
- ソフトウェアデザイン（12種類）
- ベン図表（2種類）
- ワイヤーフレーム（5種類）
使えるパーツ
いろいろありますが、面白いパーツを挙げておきます。 Bootstrap, AWS, Azure などのパーツを使うことができます。
- Bootstrap
- AWS
- Aure
その他にCisco などもあります。
サンプル一覧
以下、draw.io で描いてみました。ファイルはSVG です。
ワイヤフレーム
Yahoo Japan（上部）のワイヤーフレームを描いてみました。
主なサービス
Item 20
Search
ロゴ
検索
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Item 21
Item 19
Item 22
Item 7
Item 9
Item 10
Item 11
Item 12
Item 8
Item 2
Item 14
Item 13
Item 15
Item 16
Item 17
Item 18
Item 1
Item 3
Item 4
Item 5
Item 6
論理回路図
NANDを使った論理回路です。
XOR
フローチャート
自然対数e の近似を求めるフローチャートです。
start
input n
end
a[0] ← 1
e ← a[0]
e ← a[0]
loop i
i = 1 ～ n
i = 1 ～ n
loop i
output a[i]
a[i] ← a[i-1] / i
e ← e + a[i]
output e
