HP Directplus -HP公式オンラインストア-

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

draw.io(Diagrams.net) は、フローチャート、プロセス図、組織図、UML、ER、およびネットワーク図を作成するためのオンライン無料作図ソフトです。
以下のような特徴があり、特別な環境やスキルが全く必要なく、メモを書くように速く気楽に作図をすることができます。

  • 日本語対応している
  • マニュアル不要で直観的に使える
  • png 、svg、html 形式での保存・編集も可能なマルチデバイス対応
  • ユーザ登録不要でオンライン上で作図ができる
  • ダウンロード版もあり
  • VS Code 版もあり
ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io
Diagram Software and Flowchart Maker

オンライン版の使い方

オンライン版、ダウンロード版、VS Code版と3種類ありますが、基本的に使い方は同じです。

Flowchart Maker & Online Diagram Software
diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams
ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io


サイトにアクセスするとアプリが起動し、まず保存先のポップアップが現れます。GoogleDriveやDropboxなど現在考えられる主要な保存先が網羅されています。「デバイス」を選択すると自分のPC上に保存されます。また「後で決める」を選択すると作図を先に行うこともできます。

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

次に「新規作成する」か、「既存のファイルを開く」かを選びます。なお、既存のファイルを開きたい場合はファイルをこの画面にドラッグドロップするだけでも開くことができます。

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

新規作成する場合は、テンプレートからの作成にも対応しています。また、その際に保存形式を決めることができます。
※・png 、svg、html 形式での保存・編集も可能なマルチデバイス対応
(推奨の保存形式は .drawio )

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

フローチャートのテンプレートを使ってみます。

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

もちろん日本語も使えますし、パーツの拡大縮小、回転、着色、コピー…なんでも簡単にできます。

ダウンロード版の使い方

提供元からダウンロードするか、ウェブ版を使用しているとダウンロードのポップアップが出てきます。はじめはオンライン版を使って、気に入ったらダウンロード版を使う感じが良いかもしれません。

Diagram Software and Flowchart Maker

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

提供元からダウンロードする場合は、自分のPCのOSに合わせてダウンロード、インストールします。

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

使い方はオンライン版と同じです。

VS Code版の使い方

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

VS Code の拡張機能から「drawio」を検索すると幾つかヒットします。その中でダウンロード数が一番多いので「Draw.io Integration」を使っています。

Draw.io Integration - Visual Studio Marketplace
Extension for Visual Studio Code - This unofficial extension integrates Draw.io into VS Code.

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

まったくゼロから作る場合は、空のファイルを新規作成し拡張子を標準の「.drawio」、または「.png」で作っておきます。

ワイヤーフレームからレイアウト図まで何でも作れる無料作図ツール draw.io

一旦閉じて、そのファイルを VS Code 上で再度開くと、オンライン版やダウンロード版と同様の draw.io 画面が VS Code 上で開きます。なお、拡張子を「.png」するとブラウザや画像ビューアでは通常のPNG画像として認識されますし、「.png」ファイルはオンライン版、ダウンロード版、VS Code版のすべてで編集することができます。

タイトルとURLをコピーしました