システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。

flowchart.jsの使い方

flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。

さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。

flowchart.jsはSVGで生成しているのがポイントで、元文書はもちろんWebブラウザで表示した場合にも検索ができます。もちろん日本語にも対応しています。オブジェクトをマウスで設置したりして、更新があるたびに作業が大変になるというのはよくあることなので、flowchart.jsを使ってテキスト記述だけにしてみるのは良さそうです。

flowchart.jsはHTML5/JavaScript製のオープンソース・ソフトウェアです。

flowchart.js adrai/flowchart.js