Mermaidを使えば、テキストを書くだけで簡単にフローチャートを作成できます。
ChatGPTに、
「この業務をMermaidのフローチャートにしてください」
と頼むだけでも、それらしい図がすぐに作れるようになりました。
ところが、実際に使ってみるとこんなことはありませんか？
「図にはなったけれど、なんだか見づらい」
「線が多くて、どこを見ればいいのか分からない」
「情報を追加したら、急にごちゃごちゃしてしまった」
Mermaidでは、コードが正しく書けていることと、図が見やすいことは別問題です。
この記事では、Mermaidで見やすいフローチャートを作るために意識したい5つのポイントを、初心者向けに紹介します。
Mermaidは「図を作る」のは簡単。でも「見やすくする」のが難しい
たとえば、問い合わせ対応の流れをMermaidで表現するとします。
これくらいの規模なら、それほど難しくありません。
しかし実際の業務では、
「メールの場合は？」
「緊急の場合は？」
「担当者が不在だったら？」
「他部署へのエスカレーションは？」
と、条件を次々に追加したくなります。
そして全部を1枚に詰め込むと、急に読みにくくなります。
見やすいフローチャートを作るポイントは、すべての情報を入れることではありません。
必要な情報を選び、流れが一目で追える状態にすることです。
1．1つの図に情報を詰め込みすぎない
Mermaidでありがちな失敗が、1枚のフローチャートにすべてを入れようとすることです。
業務の例外処理、担当者、システム名、判断条件、補足説明……。
情報を追加するほど正確にはなりますが、その代わりに「流れ」が見えなくなります。
たとえば最初は、
問い合わせ受付
↓
内容確認
↓
対応
↓
回答
↓
完了くらいの大きな流れだけを作ります。
その後、
「対応できなかった場合」
「別部署へ確認する場合」
など、必要な分岐だけを追加します。
最初から完成版を作ろうとしない。
これだけでも、かなり図が整理しやすくなります。
2．分岐を増やしすぎない
フローチャートでは、ひし形の判断ノードを使って処理を分岐できます。
便利なので、つい判断をたくさん入れたくなります。
しかし、
「Aならこちら」
「Bならこちら」
「さらにCの場合は……」
と判断を重ねていくと、線が増えて読みにくくなります。
判断が増えてきたら、
「この判断は本当にこの図に必要なのか？」
と考えてみてください。
詳細な条件は別の図や文章に分ける方法もあります。
フローチャートの目的が「全体の流れを理解すること」であれば、細かな例外まで1枚に詰め込む必要はありません。
3．流れる方向をできるだけ統一する
Mermaidでは、フローチャートの方向を指定できます。
たとえば、
flowchart TD
なら上から下へ、
flowchart LR
なら左から右へ流れます。
基本となる処理の流れは、なるべく1方向に統一した方が読みやすくなります。
途中から急に右へ行ったり、左へ戻ったり、下へ伸びたりすると、読む側が視線を何度も移動させることになります。
特に初心者向けの資料なら、
上から下
または
左から右
のどちらかを基本にすると、かなり見やすくなります。
4．ノードの文章を短くする
次のようなノードがあったとします。
問い合わせ内容を確認して担当部署で対応可能かどうかを判断するこれでは、図の中に文章が入りすぎています。
たとえば、
対応可否を確認くらいまで短くできます。
詳しい説明が必要なら、図の外で補足します。
フローチャートは文章を読むためのものではなく、流れを見るためのものです。
ノード内の文章を短くするだけでも、図全体がかなりすっきりします。
5．色や強調を使いすぎない
Mermaidではノードの色を変更することもできます。
たとえば、重要な処理だけ色を変えることは効果的です。
一方で、
赤、青、黄色、緑、オレンジ……
と色を増やしてしまうと、何が重要なのか分からなくなります。
色を付けるのであれば、
通常処理
判断
注意が必要な処理
など、役割を限定した方が分かりやすくなります。
色は装飾ではなく、意味を伝えるために使うと考えるのがおすすめです。
ChatGPTを使えばMermaidコードの作成はかなり楽になる
この考え方を5つのルールで整理したKindle本はこちら
Mermaidの便利なところは、ChatGPTとの相性が非常に良いことです。
たとえば、
問い合わせ受付から対応完了までの業務フローを、初心者にも見やすいMermaidのフローチャートにしてください。
分岐は最小限にして、上から下へ流れる構成にしてください。
と指示すれば、Mermaidコードのたたき台を作ってもらえます。
さらに、
ノード内の文章を短くしてください。
分岐が多いので整理してください。
1枚の図が複雑なので、2つの図に分けてください。
などと修正を頼むこともできます。
つまり、最初から自分でMermaidコードをすべて書く必要はありません。
人間が「何を伝えたいか」を決め、ChatGPTにコードを書いてもらう。
この使い方がかなり便利です。
「正しい図」より「伝わる図」を目指す
フローチャートを作っていると、
「この処理も必要」
「あの例外も必要」
と、つい情報を追加したくなります。
しかし、図を見る人が知りたいのは必ずしもすべての情報ではありません。
たとえば新人向けの説明なら、まず知りたいのは全体の流れです。
一方、実際に作業する担当者向けなら、例外処理まで必要になるかもしれません。
つまり、同じ業務でも、
誰に見せる図なのか
によって必要な情報量は変わります。
Mermaidで図を作るときは、
「この図を見た人に何を理解してほしいのか？」
を最初に考えると、かなり整理しやすくなります。
Mermaidで見やすいフローチャートを作るポイント
Mermaidで見やすいフローチャートを作るときは、次の5つを意識してみてください。
- 1枚の図に情報を詰め込みすぎない
- 分岐を増やしすぎない
- 流れる方向を統一する
- ノードの文章を短くする
- 色や強調を使いすぎない
Mermaidはコードを書けば簡単に図を作れます。
だからこそ、
「何を描くか」だけではなく「何を描かないか」
を考えることが大切です。
Mermaidで「見やすい図」を作りたい方へ
Mermaidの基本的な書き方は分かったけれど、
「どうしても図がごちゃごちゃしてしまう」
「もっと見やすいフローチャートにしたい」
「ChatGPTを使って効率よく図を作りたい」
という方に向けて、Kindle本
『Mermaidで作る 見やすいフローチャート入門』
を作りました。
本書では、単にMermaidの記法を覚えるだけではなく、業務フローを「伝わる図」に変えるための考え方を初心者向けに整理しています。
Mermaidを使い始めたけれど「なんか見づらい」と感じている方は、参考にしていただければうれしいです。
▶ Amazonで『Mermaidで作る 見やすいフローチャート入門』を見る
まとめ
Mermaidは、フローチャートを素早く作れる便利なツールです。
さらにChatGPTを組み合わせれば、コードを書く負担もかなり減らせます。
ただし、見やすい図を作るためには、
情報を整理すること
が欠かせません。
まずは小さなフローチャートから作り、必要な情報だけを少しずつ加えてみてください。
「全部入った図」よりも、
一目で流れが分かる図。
その方が、実際の仕事では役に立つことが多いです。
コメント