draw.ioとは何ですか？

ブラウザ上で使える無料の作図ツール。フローチャートやネットワーク図、ER図などを直感的に作成でき、VSCode拡張も人気。

draw.ioのポイントは？

ブラウザだけで使える無料の作図ツールで、インストール不要。フローチャート・ネットワーク図・ER図・UML図・AWS構成図など多彩なテンプレートを搭載。ファイルをGitHub・Google Drive・OneDriveなどに直接保存でき、チームでの共同編集にも対応。VSCode拡張「Draw.io Integration」でエディタ内から直接図を編集できる

【ドローアイオー】

draw.io とは？

💡 無料なのにプロ級の図が描ける万能キャンバス

📌 このページのポイント

ブラウザだけで使える無料の作図ツールで、インストール不要
フローチャート・ネットワーク図・ER図・UML図・AWS構成図など多彩なテンプレートを搭載
ファイルをGitHub・Google Drive・OneDriveなどに直接保存でき、チームでの共同編集にも対応
VSCode拡張「Draw.io Integration」でエディタ内から直接図を編集できる

draw.ioで作成できる図のイメージ

ひよこ

draw.ioって無料で使えるの？

ペンギン先生

完全に無料だよ。アカウント登録すら必要なくて、app.diagrams.netにアクセスするだけですぐに使えるんだ。オープンソースだから企業での利用にもライセンスの心配がないよ

ひよこ

どんな図が描けるの？

ペンギン先生

フローチャート、ネットワーク構成図、ER図、UMLのクラス図やシーケンス図、AWS・Azure・GCPのアーキテクチャ図まで描けるよ。各クラウドサービスの公式アイコンがテンプレートに入っているから、構成図がきれいに作れるんだ

ひよこ

ファイルはどこに保存されるの？

ペンギン先生

ローカルのPC、Google Drive、OneDrive、GitHub、GitLabなど好きな場所を選べるよ。GitHubに保存すればバージョン管理もできるし、チームメンバーと共有も簡単だね

ひよこ

VSCodeの拡張があるって本当？

ペンギン先生

「Draw.io Integration」という拡張をインストールすると、VSCode内で.drawioファイルを開いて直接編集できるよ。コードを書きながらすぐ横で図を修正できるから、ドキュメントの更新がはかどるんだ

ひよこ

Figmaとは何が違うの？

ペンギン先生

Figmaはデザインツールで見た目の美しさが得意、draw.ioは技術的な図の作成が得意だよ。draw.ioはエンジニアが使うことを想定していて、コネクタの自動ルーティングやレイヤー管理など、ダイアグラム作成に特化した機能が充実しているんだ。データベース設計やシステム構成図ならdraw.ioのほうが断然使いやすいね

まとめ：ざっくりこれだけ覚えればOK！

「draw.io」って出てきたら「無料で使えるブラウザベースの作図ツール」と思えればだいたいOK！

📖 おまけ：英語の意味

「draw.io」＝ draw（描く）+ io（ドメイン）

💬 「描く」という意味のdrawに.ioドメインを付けた名前。現在はdiagrams.netという名前に変わっているけど、draw.ioの方が圧倒的に知名度が高いよ

← 用語集にもどる