draw.io（Diagrams.net） は、フローチャート、プロセス図、組織図、UML、ER、およびネットワーク図を作成するためのオンライン無料作図ソフトです。
以下のような特徴があり、特別な環境やスキルが全く必要なく、メモを書くように速く気楽に作図をすることができます。
- 日本語対応している
- マニュアル不要で直観的に使える
- png 、svg、html 形式での保存・編集も可能なマルチデバイス対応
- ユーザ登録不要でオンライン上で作図ができる
- ダウンロード版もあり
- VS Code 版もあり
オンライン版の使い方
オンライン版、ダウンロード版、VS Code版と３種類ありますが、基本的に使い方は同じです。
サイトにアクセスするとアプリが起動し、まず保存先のポップアップが現れます。GoogleDriveやDropboxなど現在考えられる主要な保存先が網羅されています。「デバイス」を選択すると自分のPC上に保存されます。また「後で決める」を選択すると作図を先に行うこともできます。
次に「新規作成する」か、「既存のファイルを開く」かを選びます。なお、既存のファイルを開きたい場合はファイルをこの画面にドラッグドロップするだけでも開くことができます。
新規作成する場合は、テンプレートからの作成にも対応しています。また、その際に保存形式を決めることができます。
※・png 、svg、html 形式での保存・編集も可能なマルチデバイス対応
（推奨の保存形式は .drawio ）
フローチャートのテンプレートを使ってみます。
もちろん日本語も使えますし、パーツの拡大縮小、回転、着色、コピー…なんでも簡単にできます。
ダウンロード版の使い方
提供元からダウンロードするか、ウェブ版を使用しているとダウンロードのポップアップが出てきます。はじめはオンライン版を使って、気に入ったらダウンロード版を使う感じが良いかもしれません。
提供元からダウンロードする場合は、自分のPCのOSに合わせてダウンロード、インストールします。
使い方はオンライン版と同じです。
VS Code版の使い方
VS Code の拡張機能から「drawio」を検索すると幾つかヒットします。その中でダウンロード数が一番多いので「Draw.io Integration」を使っています。
まったくゼロから作る場合は、空のファイルを新規作成し拡張子を標準の「.drawio」、または「.png」で作っておきます。
一旦閉じて、そのファイルを VS Code 上で再度開くと、オンライン版やダウンロード版と同様の draw.io 画面が VS Code 上で開きます。なお、拡張子を「.png」するとブラウザや画像ビューアでは通常のPNG画像として認識されますし、「.png」ファイルはオンライン版、ダウンロード版、VS Code版のすべてで編集することができます。
