フローチャート作成ツールのまとめ

はじめに

最近、受託したシステム化案件で業務の流れをひたすらフローチャートにしています。
EXCELを方眼紙みたいにしてひたすら地道な作業。

分岐だけで60個以上あります、もうイヤ。

さすがに非効率な気がしたので、
便利ツールを探してみたのでシェアします。

調べてみると、
フローチャートツールには大きく以下の2種類のアプローチがありました。

1. お絵描きで作成する
2. データから自動生成する

1. お絵描きで作成

EXCELみたいに図を直接作成するタイプからリストアップ。

draw.io

• 利用形態：Webサービス、インストール
• 料金：無料

現在は「draw.io」ではなく、diagrams.netに名称変更されたようです。

このツールは多機能かつ非常に使いやすいです。
しかも無料。いくつか有料のサービスがあったのですが自分はこれで十分そうです。

膨大な数のテンプレート

左のリストの分だけテンプレートの種類があります。

もはやキャンバス

複雑なテーブルや別のフローチャートも同時に置ける。
EXCELに張り付けて作業する必要ないですね。

エクスポートのオプションも豊富

svgやhtmlでも出力できるじゃないですか。
しかも埋め込みもあるので個人サイトとかなら画像を出力する必要もないですね。

共同編集もできる

GoogleドライブまたはOneDriveに保存するダイアグラムは共同編集できる。
クラウド版でももちろん可能。

オンプレに構築できる

GitHubでデスクトップ版は公開されているので、自社内で構築できてしまう。
・・・え？これで無料？

その他

Lucidchart, cacoo , Canvaなど多機能ツールがあります。
他にもたくさんあったのですが、draw.ioがすごすぎるのでお絵描きスタイルのサービスはここまで。

2. データから自動生成

データを定義すると自動でフローチャートを出力するタイプ。

「絵」的な自由度は相対的に低くなりますが、この方式はめちゃくちゃ便利です。矢印の張り直しとか位置調整が必要ないので手間が省けます。

何より構造化済データとして残るので、データさえあれば描画ツールは後から差し換えたりアップデートすればいいだけです。エンジニアが使用するならこちらな気がします。

Graphviz

• 利用形態：インストール
• 料金：無料

DOT言語というフォーマットでデータを作成すれば自動でフローチャートを出力してくれる！

こちらで手順通りにやれば簡単にインストールできる。
Windows,MacOS,Linux対応。

WindowsでChocolateyを使っている人は、
choco install graphvizでOK。

極めれば多彩な見栄えを設定可能

sample.dotなど、拡張子を.dotにしてDOT言語でグラフ構造を記述。

digraph {
    rankdir=LR;
    node [shape = doublecircle]; 判断1;
    node [shape = circle];
    判断1 -> 判断3 [ label = "A" ];
    判断1 -> 判断4 [ label = "B" ];
    判断2 -> 判断3 [ label = "C" ];
}

何も設定しなければ下図のようなシンプルな図を生成。

膨大な設定項目があり、色やノードの形状変更も自由自在。
ドキュメントを読むだけで日が暮れそう。

guiflow

• 利用形態：インストール
• 料金：無料

こちらの記事の方が開発したツール。

マークダウン風にテキスト入力していくと、
フロー図が自動で作成されるというユニークなもの！

画面遷移管理に特化したフローチャートで、
画像にあるように項目をスタックしたDBテーブルのリンクのような図（UI Flow）が生成できる。

しかも、単純な絵ではなく、
ノードをクリックすると対象のノードに画面遷移できる。

細かい図の調整は難しいようだけど、
手軽に使えるので画面遷移管理や仕事のメモにもめちゃくちゃ役立ちそう。

MarkDownDiagram

• 利用形態：インストール
• 料金：無料

guiflowにインスパイアされたというこちらの記事の方が作成したツール。guiflowにプラスして下記ができるようになっていて使えそう。

• 配置をマウスでドラッグして調整できる
• CSSで色や装飾を指定可能

Mermaid

• 利用形態：インストール
• 料金：無料

GitHubスター数36k超（'21年6月時点）。JS Open Source Awards (2019)ノミネート。

マークダウン風にテキスト入力するとフローチャートを作成してくれるJavascriptベースのツール。フローチャート、シーケンス図、ガントチャート、クラス図、状態遷移図、パイチャートなどの図に対応！

見栄えも小綺麗でこれならドキュメントにもそのまま使える。
すんごい素晴らしい。

下図は「stateDiagram」の例。

Judge

• 利用形態：Webサービス
• 料金：無料

「Judge」という無料で使えるサービス。
ステップ式のUIでデータを作成すれば、自動でフローチャートを出力してくれる！

下図のような感じでフローチャートが作成される。
リアクティブなフローチャートなので、つまんで位置調整などができる！

画面遷移管理にも使える

ユニークだと思ったのが、選択肢を押すとステップが動いて次の分岐に移動する機能。
最初に下図のような判断１という分岐、A,Bという条件があるとして、

条件Aをクリックすると、
下図のように自動で次のステップに移動。
どの条件を選択したのか積み上げ表示されていくので便利。

画像も貼れるので、
ポチポチ押せば画面遷移アプリみたいなものが簡単につくれる！
そのままお客さんに操作してもらえるので、めちゃくちゃ使えそう。

別用途としては、twitterで見かける「～診断します」のような質問していく機能は、
これがあればすぐ作成できそう。

PlantUML

• 利用形態：Webサービス、インストール
• 料金：無料

下記のように、データを定義すれば、

@startuml
第1フェーズ -> 第2フェーズ : hello
@enduml

下記のような図が作成できます（※シーケンス図の場合）。

こちらからインストールできる。
公式サイトにオンラインで使えるページもあります。

フローチャートというよりは、
下記の種類のダイアグラム作図に特化したもの。

1. シーケンス図
2. ユースケース図
3. クラス図
4. オブジェクト図
5. アクティビティ図（古い文法はこちら）
6. コンポーネント図
7. 配置図
8. 状態遷移図（ステートマシン図）
9. タイミング図

※ちなみに、全角の数字を入れるとエラーになることを発見しました。
その他、日本語入力は問題なさそう。

3. 番外編：マジカ！

• 利用形態：ダウンロード
• 料金：無料、商用OK

「マジカ！」という業務フローのイラストテンプレートが無料で使えるサイト。
お客さんへのプレゼンとかに使えそうです。商用利用もOK。

以上です！