気持ちよく手軽に図を描ける無料ツール「diagrams.net」(旧draw.io)

f:id:karaage:20211024120847p:plain:w640

図を手軽に無料で書きたい

 仕事でもプライベートでもたまにつかいたくなるのが作図ツールですね。ドキュメントを書くとブロック図、フローチャート等様々な図が必要となります。

 仕事だと、昔(回路設計をしていたころ)はVisioを使っていました。ただ、Visioはそれなりにお高いですし、Visioを周りの人が使っていないと、布教から導入までが大変そうですね。下手したらその間にプロジェクトが終わってしまうかもしれません。

 また、個人で使いたいと思ってもなかなかこの手のソフトは個人で買う気は起こりませんね。特にVisioは基本的にWindows向けなので、MacやLinuxで使う場合も困りそうです。そんなときの強い味方が、マルチプラットフォームで無料で使える作図ツールです。

 というわけでおすすめのもの、特に「diagrams.net(draw.io)」を中心に紹介したいと思います。

diagrams.net

 元はdraw.ioと呼ばれていた作図ツールです。いつの間にか名前変わっていました。

 このツールはすごくて、マルチプラットフォームでWindows/Mac/Linuxに対応しているのはもちろん、デスクトップ版アプリに加えて、Google Chrome拡張、Visual Studio Code拡張、Google Drive拡張(連携)もできます。

 「ありとあらゆる環境で動くようにしてやるぞ!」という強い意志を感じます。

 使い心地もVisioライクで、手軽に作図できます。また素材も豊富で、ブロック図やフローチャートだけでなく、ちょっとした回路図に加えて、ネットワーク関係の図も作れます。

 回路図 f:id:karaage:20211024120909p:plain:w640

 ネットワーク図 f:id:karaage:20211024120919p:plain:w640

 個人でちょっとした図をつくるのには、全く問題のないレベルですね。ファイルもバイナリでなくテキスト形式で、VS Code拡張もあるのでコードのドキュメントとしてGitHubで管理するのにも相性良いです。

 以降、様々なアプリの形式があるので一つずつ紹介していきます。

デスクトップ版

 デスクトップ版です。迷ったらとりあえずこちらでしょう。以下GitHubリポジトリのReleaseから、自分の環境に合わせたインストーラをダウンロードしてインストールしましょう。

VS Code拡張

 VS Codeの拡張もあります。draw.ioで検索すると出てきます。VS Codeエディタに関しては、Zennで無料の入門書を出しているの以下参照ください。

 draw.ioに関しては以下のページで触れています。

Google Drive連携

 Google Driveと連携することもできます。クラウドで完結するので、とりあえず連結しておけば、ネットに繋がったPCなら、ブラウザからいつでもどこでも図を描くことができます。以下サイトを参考にセットアップしましょう。

 なお「File -> embed -> Image」を選択すると、imgタグとして埋め込むことができるので、そのままブログの図として使えます。いちいち画像をダウンロードしてアップロードする手間もないですし、修正も楽ですし最高ですね。

 以下Google Drive上のdiagrams.netの図を貼り付けています。

Google Chrome拡張

 Google Chromeの拡張としても用意されています。以下からダウンロードしましょう。デスクトップ版との差などはよく分かりませんが、Chrome OSとかだと相性よかったりするのかもしれません。

その他の作図ツール

 diagrams.net以外のツールもいくつか紹介したいと思います。

Google図形描画

 Google Drive標準の図形描画も紹介したいと思います。「diagrams.net」に比べるとシンプルです。とくに凝った図をつくらないならこちらで十分かもしれませんね。

 こちらもimgタグとしてブログに埋め込むことができます。図を編集すると、ブログの画像も一緒にアップデートされるのは便利ですね。以下のソラコム松下(max)さんの記事がとても参考になります。

Plant UML

 Plant UMLが使いたい人は、VS Codeの拡張機能を使うのが良いかもしれません。Plant UMLって何?という人は、あんまり必要ないものだと思います。

LibreOffice Draw

 私はほとんど使ったことないですが、Officeソフトに近い使い勝手という点だとLibreOfficeのDrawも良いかもしれませんね。

まとめ

 無料の作図ツール、特に「diagrams.net」を中心に紹介してみました。以前からdraw.ioという名前で知っていて、たまに使っていました。ただ、あらためて調べてみたら、名前変わった上にこれほど多くのプラットフォームに対応して、サービスにも連携しているとは知らなかったのでビックリしました。特に、ブログへの図の貼り付けできるのはめっちゃ便利ですね。

 今までは、ちょっとした図はKeynoteでササッと作ることが多かったのですが、最近ゲーミングPCを買ってWindowsやLinuxを使うことが増えてきているので、これを機に作図ツールもマルチプラットフォーム対応した「diagrams.net」をメインにしていこうと思っています。

 みなさんも、もし良い作図ツールやおすすめの使い方をご存知でしたら教えていただけると嬉しいです。

関連記事