無料で使える高機能な作図ツール draw.io(diagrams.net)の使い方を解説

2024年11月14日(木) プロジェクト管理

 

draw.io(現diagrams.netは高機能なWebベースのドローアプリケーションを提供しています(デスクトップ版もあります)。データはすべてクラウドまたはローカルに保存する形式になっており、diagrams.net 自身はデータを保存しません。そのおかげか、diagrams.netは無料ですべての利用が利用できます。

そんなdiagrams.netの使い方を解説します。

WEB上で簡単にドキュメント作成・管理ができるツール「NotePM」
NotePMを無料で試してみる

データの保存先を決める

diagrams.netへアクセスすると、最初にデータの保存先が聞かれます。Google DriveやDropbox、GitHubなどが選択できます。つまりdiagrams.net自体はデータを保持せず、こうしたクラウドストレージサービスへ保存する形式となっています。自分の好きなクラウドストレージサービスを選択してください。

保存先を選んだら、ドローするもののテンプレートを選択します。ビジネスやチャート、マインドマップ、UMLなど様々なテンプレートがありますので、必要なものを選んでください。

こちらはビジネス。

チャート。

UML。

ワイヤーフレーム。

マップ。

WEB上で簡単にドキュメント作成・管理ができるツール「NotePM」
NotePMを無料で試してみる

diagrams.netの使い方

こちらはUMLのテンプレートから選んで開いたところです。左側に配置するオブジェクトが並び、中央がエディタになります。右側にはプロパティがあり、色や線種、配置を細かく指定できます。

日本語も利用できます。

さらに右上から表示言語の変更ができます。日本語を選ぶと、メニューが日本語化されます。

改訂履歴があるので、バージョンを戻すことも可能です。

ダークモードにすると、黒ベースの背景になります。

このようなクラウドサービス(今回はAWS)のアーキテクチャ設計に適した素材も用意されています。

ドローをNotePMに埋め込む

描いたドローはNotePMのページ中に埋め込んで表示できます。ファイルメニューからIFrameを選択します。このドローはGoogle側の共有設定でパブリックになっている必要があります。

Createを押すと、iframeタグの内容が表示されます。これをコピーします。

これをそのままNotePMで貼り付けます。そうすると、ページ内でドローが展開されます。画像ではないので、diagrams.netでの編集内容がすぐに反映されるのがメリットです。

その場で編集はできませんが、ドローの下には編集用のアイコンが表示されます。これをクリックするとdiagrams.netに飛んで、編集を行えます。

詳しくはdraw.ioで作成した図形を埋め込む | NotePMを参照してください。

WEB上で簡単にドキュメント作成・管理ができるツール「NotePM」
NotePMを無料で試してみる

まとめ

diagrams.netはとても多機能なドローWebアプリケーションで、あらゆるドローに対応しています。情報の可視化をするのにぴったりなツールでしょう。プレゼンツールを使って図表を描いていた方は、ぜひdiagrams.netを試してください。
NotePM