はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

ワイヤーフレーム、フローチャートなどの無料ドローツール「draw.io」 を使ってみる

ワイヤーフレーム、フローチャートなどの無料ドローイングツール「draw.io」 を使ってみる

最近は、ドローイングツールのWebサービスがあります。 その中で、使い勝手がいいという「draw.io」を使ってみました。

類似サービス一覧

無料で使えるドローイングツールのWebサービスとして以下があります。

draw.ioとは

無料、制限なし、日本語で使えるドローイングWebサービスです。 Web系の方であればワイヤーフレーム、モックに、 ネットワーク系の方であればネットワーク構成図に、 ハード寄りであれば回路図に使えると思います。 

Flow Chart Maker & Online Diagram Software

draw.io のdocument(support)は、こちらにあります。 

draw.io Support Home - Support - draw.io Support

また、オープンソースのようです。 

github.com

export(保存ファイル)形式

プロジェクトは、XMLファイルになります。XMLファイルをローカルに保存しておき、 draw.io で開くとまた編集し直すことができます。

保存形式は以下です。

  • PNG
  • JPEG
  • PDF
  • SVG
  • HTML
export形式(画像)
※実際の画像も貼っておきます

SVGファイルは、Inkscape で開くことができたので、draw.ioで保存した後に、Inkscape やIllustrator などのドローイングソフトで編集できそうです。

HTMLファイルで保存した場合、ベクターデータになっているようで拡大縮小もでき、劣化しないデータになっています。

使えるテンプレート

使えるテンプレートが豊富で、以下が使えます。

  • ビジネス・プロセス(7種類)
  • チャート(6種類)
  • エンジニアリング(7種類)
  • フローチャート(7種類)
  • マインドマップ(2種類)
  • モックアップ(2種類)

    スマートフォンの外観つきのモックがあります。 テンプレート:モック

  • ネットワーク(8種類)
  • その他(10種類)
  • ソフトウェアデザイン(12種類)
  • ベン図表(2種類)
  • ワイヤーフレーム(5種類)

    Googleの検索結果, Gmailやyoutube などのワイヤーフレームがテンプレートとしてあります。 テンプレート:ワイヤーフレーム

使えるパーツ

いろいろありますが、面白いパーツを挙げておきます。 Bootstrap, AWS, Azure などのパーツを使うことができます。

  • Bootstrap

    パーツ:Bootstrap(画像)

  • AWS

    パーツ:AWS(画像)

  • Aure

    パーツ:Azure(画像)

その他にCisco などもあります。

サンプル一覧

以下、draw.io で描いてみました。ファイルはSVG です。

ワイヤフレーム

Yahoo Japan(上部)のワイヤーフレームを描いてみました。

主なサービス
[Not supported by viewer]
Item 20
[Not supported by viewer]
Search
[Not supported by viewer]
ロゴ
[Not supported by viewer]
検索
[Not supported by viewer]
Tab 1
[Not supported by viewer]
Tab 2
[Not supported by viewer]
Tab 3
[Not supported by viewer]
Tab 1
[Not supported by viewer]
Tab 2
[Not supported by viewer]
Tab 3
[Not supported by viewer]
Item 21
[Not supported by viewer]
Item 19
[Not supported by viewer]
Item 22
[Not supported by viewer]
Item 7
[Not supported by viewer]
Item 9
[Not supported by viewer]
Item 10
[Not supported by viewer]
Item 11
[Not supported by viewer]
Item 12
[Not supported by viewer]
Item 8
[Not supported by viewer]
Item 2
[Not supported by viewer]
Item 14
[Not supported by viewer]
Item 13
[Not supported by viewer]
Item 15
[Not supported by viewer]
Item 16
[Not supported by viewer]
Item 17
[Not supported by viewer]
Item 18
[Not supported by viewer]
Item 1
[Not supported by viewer]
Item 3
[Not supported by viewer]
Item 4
[Not supported by viewer]
Item 5
[Not supported by viewer]
Item 6
[Not supported by viewer]

論理回路図

NANDを使った論理回路です。

AND
 
[Not supported by viewer]
ORN
 
[Not supported by viewer]
N
 
[Not supported by viewer]
N
 
[Not supported by viewer]
N
 
[Not supported by viewer]
XOR
[Not supported by viewer]
NOTN
 
[Not supported by viewer]

フローチャート

自然対数e の近似を求めるフローチャートです。

start
[Not supported by viewer]
input n
[Not supported by viewer]
end
[Not supported by viewer]
a[0] ← 1
e ← a[0]
[Not supported by viewer]
loop i
i = 1 ~ n
[Not supported by viewer]
loop i

[Not supported by viewer]
output a[i]
[Not supported by viewer]
a[i] ← a[i-1] / i
[Not supported by viewer]
e ← e + a[i]
[Not supported by viewer]
output e
[Not supported by viewer]