上野家のホームページ - 資料室バックアップ : PC/VisioのようなDrawツールdraw.ioがクールのソース

[ 差分 | バックアップ | リロード ]

差分を表示
PC/VisioのようなDrawツールdraw.ioがクールへ行く。

* VisioのようなDrawツールdraw.ioがクール [#t8eee76d]
ネットワーク構成図のような図をささっと書く時に便利なアプリが[[Visio>https://products.office.com/ja-jp/visio/]]。~

昔，アメリカで会社に勤めていた時に，打ち合わせを行っている時にその場で図を書いている人がいて，その人が使っていたのが[[Visio>https://products.office.com/ja-jp/visio/]]というアプリだった。~
予め用意されているステンシルと呼ばれる部品を，ドラッグ&ドロップして図を書くアプリ。

とにかくスピーディに図が描けるので，それからお気に入りのアプリになった。

2000年にMicrosoftがVisioを作っていた会社を買収したんで，現在はMicrosoft Officeアプリになっている・・・~
Microsoft製になってしまったため価格がめちゃくちゃ高くなってしまい，なかなか個人では購入出来なくなってしまった。

Visioのようなフリーアプリケーション無いかなって思っていた所，&ref(drawio.png,,around);''draw.io''という凄いクールなツールを見つけました。

#clear

* draw.ioってどんなアプリ [#n96bc98c]
Visioのようなネットワーク構成図やフローチャートなどを書くためのアプリで，無料で使用できるWEBアプリケーション。

WEBブラウザ上で動作するWEBアプリケーションなので，いちいちPCにインストールする必要もなくPCのWEBブラウザがあれば使用できる。~
ユーザー登録なんかもいらないです。

使いたい時にWEBブラウザで [[draw.io>https://www.draw.io/]] にアクセスすれば使用できます。日本語対応しています。~

作成したデータはxmlデータで出力出来て，PCのローカルストレージやGoogle Drive，OneDriveなどにも保存できる。PNG，SVG，PDFなどにエクスポートもサポートしている。

- draw.ioのいいところ~
-- 商用利用も含めて[[無料>https://drawio-app.com/pricing/]]で使える~
-- 会員登録不要~
-- 作成したデータの管理は自分次第（クライアントサイドのみで動くため）~
PCのローカルストレージに保存出来る。クラウドストレージサービスにも保存出来る~
-- 図形のパーツが豊富~
-- 日本語化されている~
- draw.io の欠点・不便なところ~
-- 複数の人で共同編集が出来ない~
-- コメントを書く機能がない~
-- 履歴を管理する機能がない~
-- 書いた図を共有する仕組みがない~
Pluginを利用したり，クラウドストレージ等を利用すれば可能。~

* draw.ioって何がすごいか [#ja0828ae]
Visioの機能が無料で使えるのが，まあ凄いです。

それになんと言っても用意されているステンシルが非常に多くて，すぐに使いたいものが見つけられることです。多すぎって感じもする。~
AWSなんかもあったりするし・・・

おそらく，書きたい図でステンシルに困ることは無いんじゃないかと思える。~

Visioと同じように多くの種類のテンプレートがあるので，いろいろなタイプの図も描けます。

描いた図は，DropboxやGoogleドライブ，もちろん自分のPCでも保存出来ます。

また，数式（LaTeX表記）も入力出来ちゃいます。

* draw.ioを利用する方法 [#weddf842]
draw.ioはいくつか異なった方法で使用できる。

**WEBブラウザで使用する [#q6d47f8a]

簡単に利用出来ます。WEBブラウザで[[draw.io>https://www.draw.io/]]を開くだけ。~
ファイルの保存先を選べば使用できます。~
#ref(save.png)

[[使えるWEBブラウザ>https://github.com/jgraph/drawio#supported-browsers]]は，Firefox，Google Chrome，Safari，IE11なんかで使える。

WEB版では，なんとVisioで作成したファイルが読み込めます。&wink;

** デスクトップアプリとしても使える [#x32be417]
[[ここからデスクトップアプリ>https://get.diagrams.net/]]をダウンロードしてインストールすると，WEBブラウザでなく普通のデスクトップアプリのように使用出来ます。

このデスクトップアプリは，[[Electron（エレクトロン）>https://www.electronjs.org/]]((東京エレクトロンとは関係ない))で作成されています。

ぜひ使ってみてください。

** クラウドサービスから使用する [#c933d033]
上記のdraw.io単体で使用するのではなく，他のクラウドサービスに組み込まれている場合に使用できます。

- [[Google GSuite/Google Drive>https://gsuite.google.com/marketplace/app/drawio_diagrams/671128082532]]
- [[Office365/One Drive>https://appsource.microsoft.com/ja-JP/product/office/wa200000113]]

他にも，draw.ioで作成した図をRedmine上に埋め込むためのプラグインなどがある。