お絵描きツールまとめ

はじめに

みなさんこんにちは。
先日に引き続き、今回もツール系の記事を書いていきます。

僕は現在、要件定義をメインに担当しています。(そろそろコーディングしたい。。。)
要件定義はその名のとおり、プロジェクトの要件を決めていくフェーズで、仕様を決めるにあたり、図を使用してまとめることがあります。

図を描画するために皆さんはどのようなツールを使用しているでしょうか?

昔描いた東京タワー
14歳の時にペイントで描いた東京タワー

様々な描画ツール

Excel

こちらは最も利用者が多いのではないでしょうか?
Excelは本来表計算ソフトなので、図形描画のためのツールではないのですが、複雑でなければ綺麗に作図することができます。
また、図のみを出力することもできます。僕の環境では若干古いExcel2016(Mac版)を使用しているのですが、図として保存保存形式を選択出来ます。

オブジェクトを選択し、右クリック
図として保存の画面

draw.io(おすすめ)

diagrams.netのdraw.ioです。
こちらのツールは、無料でリッチな作図が可能でツールで、作成した図の保存形式も多様です。WEB表示時に推奨されているWebP(ウェッピー)や、SVGといったベクトル画像を出力可能なところが推しポイントです。
使用できる画像も多様で、例えばhumanと検索するだけでも下記のように30程度出てきました。

draw.ioは多様な出力形式
humanでの検索結果

また、コネクタも図形1辺あたり正方形であれば5つ存在します。
同じ辺から矢印が伸びる時などに便利ですね。
こちらのツールは先日紹介したVSCodeの拡張機能として設定することもできるようでした。


Mermaid

Mermaidはテキスト入力すると、図が作成できるツールです。
対応している図としては

  • フローチャート
  • シーケンス図
  • ガントチャート
  • 状態遷移図
  • 各種グラフ(棒・円・XY)
  • タイムチャート

などです。。。
実際には下記のように書いていきます。

定義
結果

テキストに比べ勝手に綺麗にレイアウトしてくれるのではるかに書くのが楽になるでしょう。

まとめ

いかがでしたでしょうか?
資料を作るのであれば綺麗な図を作りたいですよね。
なるべく工数をかけずに綺麗に図を作れるように、かつ資料全体として良いものになるよう、引き続き模索していきます。