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

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

ワイヤーフレーム、フローチャートなどの無料ドローツール「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 で開くとまた編集し直すことができます。

保存形式は以下です。

export形式(画像)
※実際の画像も貼っておきます

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

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

使えるテンプレート

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

使えるパーツ

いろいろありますが、面白いパーツを挙げておきます。 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]

広告を非表示にする