ワイヤーフレーム、フローチャートなどの無料ドローイングツール「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（上部）のワイヤーフレームを描いてみました。
論理回路図
NANDを使った論理回路です。
フローチャート
自然対数e の近似を求めるフローチャートです。
e ← a[0]
i = 1 ～ n
