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

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

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

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

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

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

##1. お絵描きで作成
EXCELみたいに図を直接作成するタイプからリストアップ。
## draw.io
* 利用形態：Webサービス、インストール
* 料金：無料


現在は「draw.io」ではなく、[diagrams.net](https://app.diagrams.net/)に名称変更されたようです。

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

####膨大な数のテンプレート
左のリストの分だけテンプレートの種類があります。
![Screenshot_2021-06-05 diagrams net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/652b3414-4155-141c-d7d5-730d11809126.png)

####もはやキャンバス
複雑なテーブルや別のフローチャートも同時に置ける。
EXCELに張り付けて作業する必要ないですね。
![Screenshot_2021-06-05 Untitled Diagram drawio - diagrams net(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/a5e97eb7-4a09-fe0a-c7ef-5318a648bc08.png)

####エクスポートのオプションも豊富
**svg**や**html**でも出力できるじゃないですか。
しかも**埋め込み**もあるので個人サイトとかなら画像を出力する必要もないですね。
![Screenshot from 2021-06-05 22-55-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/70ae3ffe-862b-67f8-1912-03a521132846.png)

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

####オンプレに構築できる
[GitHub](https://github.com/jgraph/drawio-desktop)でデスクトップ版は公開されているので、自社内で構築できてしまう。
・・・え？これで無料？

##その他
[Lucidchart](https://www.lucidchart.com), [cacoo](https://cacoo.com/ja/) , [Canva](https://www.canva.com/ja_jp/)など多機能ツールがあります。
他にもたくさんあったのですが、draw.ioがすごすぎるのでお絵描きスタイルのサービスはここまで。

##2. データから自動生成
データを定義すると自動でフローチャートを出力するタイプ。

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

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

## Graphviz
* 利用形態：インストール
* 料金：無料

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

[こちら](http://www.graphviz.org/)で手順通りにやれば簡単にインストールできる。
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" ];
}
```

何も設定しなければ下図のようなシンプルな図を生成。
![fsm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/95fd4e1d-9d1e-e8b1-2a30-8969d3e1f2f0.png)

膨大な設定項目があり、**色やノードの形状変更も自由自在**。
ドキュメントを読むだけで日が暮れそう。
![Screenshot_2021-06-05 Node Shapes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/ac743135-9eaf-7b1e-aa3e-10831876eaef.png)

## guiflow
* 利用形態：インストール
* 料金：無料

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/85b17742-132d-1b4e-66ee-da13dde6fdce.jpeg)
[こちら](https://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42)の記事の方が開発したツール。

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

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

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

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

## MarkDownDiagram
* 利用形態：インストール
* 料金：無料

guiflowにインスパイアされたという[こちら](https://qiita.com/wakufactory/items/8a0cf4ffdd52936f7469)の記事の方が作成したツール。guiflowにプラスして下記ができるようになっていて使えそう。

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

## Mermaid
* 利用形態：インストール
* 料金：無料
![Screenshot  mermaid-js mermaid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/63370e17-effe-76ce-5235-cd1860486139.png)

[GitHub](https://github.com/mermaid-js/mermaid)スター数**36k**超（'21年6月時点）。*JS Open Source Awards (2019)*ノミネート。

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

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

下図は「stateDiagram」の例。
![Screenshot_2021-06-08 Online FlowChart Diagrams Editor - Mermaid Live Editor(2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/4705f966-1067-dcc3-5750-bf69c3a86b28.png)



## Judge
* 利用形態：Webサービス
* 料金：無料

[「Judge」](https://judge-hub.com)という無料で使えるサービス。
ステップ式のUIでデータを作成すれば、自動でフローチャートを出力してくれる！
![Screenshot 2021-06-06 at 18-40-44 Create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/d34305b5-cf43-7ec6-5ea2-cf1687e3bf5f.png)

下図のような感じでフローチャートが作成される。
リアクティブなフローチャートなので、**つまんで位置調整**などができる！
![Screenshot 2021-06-06 at 18-42-55 Create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/d0664174-46ca-917e-527e-3abfb365dd2d.png)

###画面遷移管理にも使える
ユニークだと思ったのが、**選択肢を押すとステップが動いて次の分岐に移動**する機能。
最初に下図のような判断１という分岐、A,Bという条件があるとして、
![Screenshot 2021-06-06 at 19-04-10 -- No Title --.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/1ff39773-3c24-ca14-5639-8fe27cf9e0bd.png)

条件Aをクリックすると、
下図のように自動で次のステップに移動。
どの条件を選択したのか**積み上げ表示**されていくので便利。
![Screenshot 2021-06-06 at 19-04-31 -- No Title --.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/d3da437f-2519-40d2-f779-dd51cb7e31bf.png)

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

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

## PlantUML

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

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

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

下記のような図が作成できます（※シーケンス図の場合）。
![Screenshot 2021-06-06 at 22-47-18 PlantUML Web Server.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197854/e39c5e0e-2baf-6af3-497b-ce213f55975a.png)

[こちら](https://plantuml.com/ja/)からインストールできる。
公式サイトにオンラインで使えるページもあります。

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

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

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

##3. 番外編：マジカ！
* 利用形態：ダウンロード
* 料金：無料、商用OK


「[マジカ！](https://www.magicaland.org/)」という業務フローの**イラストテンプレート**が無料で使えるサイト。
お客さんへのプレゼンとかに使えそうです。商用利用もOK。

以上です！