「これ、たぶん〇〇さんしか分かってないですね」
「じゃあ整理してもらっていい？」
・・それが、属人化が進んだ業務の棚卸しを任されるきっかけでした。
最初に思ったのは「これ、図にしないと誰もわからないな」ということでした。文章やエクセルの一覧では限界があり、動きや流れを掴むには視覚的な整理が不可欠です。
ということで、この記事では、業務フローをMermaidで書くことで得られた手応えや、つまずきながら見えてきた実践的なコツを共有します。
現場での可視化に悩む方のヒントになれば幸いです。
この記事を読むとわかること
- 業務フロー図をMermaidで作成する目的と導入のポイント
- flowchart構文の書き方と主要パターンの実践的な例
- チーム利用を見据えたルールや管理の工夫
業務フローをMermaidで書く目的と効果
業務の流れを文章で説明するのは、思った以上に伝わりません。
特に、複数の担当者が関わるような作業では、どこで何が行われているかが曖昧になりがちです。図にすることで「何が、誰によって、どの順で行われるか」を一目で把握できるようになります。
属人化していた処理を洗い出す場面では、こうした可視化が大きな助けになります。図を元に話し合うことで、「これは自分しかやってなかった」「この工程、実は飛ばしていた」など、口頭では出てこない実態も明らかになります。
図にすると、みんな急に「あ、そういえば…」って話し始めるあるあるです
なぜ図にするのか？属人化解消の第一歩
業務が属人化しているとき、それを言語化するだけでも一苦労です。とはいえ、文章や手順書では細かな流れや前提が抜けがちで、再現性に欠けてしまいます。
図に落とすことで、たとえば「どのフローが分岐点なのか」「どこに承認プロセスが入るか」などが見えてきます。これが標準化や業務分担のきっかけにもなります。
Mermaidを選んだ理由とメリット
手軽に業務フローを描く方法を探したとき、最初に候補に挙がったのはExcelやVisioといったツールでした。でも、共有や管理を考えると、テキストベースで扱えるMermaidの軽さが魅力でした。
特にExcelは、現場にすでにあるツールで誰でも使えるため、フロー図の作成にもよく使われています。実際、多くの現場では「図形を並べて矢印を引く」だけの簡易な業務フローが、Excelファイルとして保管されています。
でもその一方で、矢印の位置がズレたり、図形の数が多くなると途端にレイアウトが崩れたりと、「編集する人によって見た目が変わる／壊れる」問題がつきまといます。コメントのやり取りもファイル上ではしづらく、履歴も追いづらいため、メンテナンスも大変です。
その点、Mermaidですと、コードで書けるからGitで管理できるし、レビューもしやすい。HTMLドキュメントやMarkdown内にそのまま埋め込める柔軟さもあり、エンジニアとのやり取りもかなり楽になります。
業務フロー整理で最初につまずくこと
業務を図にしようとしたとき、いきなり手が止まったのが「どこから書けばいいのか」です。全体が見えていないうちは、何を起点にするか、どこまで掘るかが曖昧になりがちです。
そして、いざ関係者にヒアリングしても、想像以上に答えがまちまちでした。「たぶん」「いつもはこう」といった曖昧な回答が多く、これは予想外でした。
「どこから書くか」が決められない問題
業務の流れは、書く順序によって見え方が大きく変わります。だから最初のうちは、ひとつの作業を細かく追いすぎて、全体像を見失ってしまうこともあります。
結局、最初は「誰が最初に動くか」を基準に決めると整理しやすかったです。担当者単位で分けて、受け渡しのタイミングを軸にすることで、フローの全体が描きやすくなりました。
関係者に聞いても情報が曖昧だった話
ヒアリングは大事ですが、相手も説明し慣れていないと、どうしても抽象的になります。「前任者がやってたから」「通知が来たらやる」など、具体的なトリガーや手順がはっきりしないことが多かったです。
そんなときは、仮のフローを先に描いて、「こうなってますか？」と見せながら話すと精度が上がりました。これは意外と効果的だったポイントです。
Mermaidによる業務フローの基本的な書き方
こうした試行錯誤を経て、最終的に業務フローを整理するための「型」として使えるのが、Mermaidでした。
テキストベースでサッと形にできるこのツールが、モヤモヤを図解に落とす手助けになってくれたんです。
Mermaidの記法はシンプルですが、最初は記号や構文に少し戸惑うかもしれません。ですが、一度覚えてしまえば、手早く業務フローを組み立てられるようになります。
ここではflowchartの基本構文と、開始・分岐・ループなどよく使う形を紹介します。
flowchart構文の基本ルールと記述例
基本は「ノード」と「矢印」でつないでいくだけです。ノードには任意のIDとラベルを付けます。
flowchart TD
Start[業務開始]
Task1[書類の確認]
Task2[上司へ提出]
End[完了]
Start --> Task1 --> Task2 --> End
flowchart TD
Start[業務開始]
Task1[書類の確認]
Task2[上司へ提出]
End[完了]
Start --> Task1 --> Task2 --> End
このように、-->で処理の流れを記述します。ラベルに日本語を使えるのも便利な点です。
開始・分岐・ループなど主要パターンの書き方
条件分岐には-->|条件|のようにラベル付きの矢印を使います。ループ処理も単純な構造なら再接続で表現できます。
flowchart TD
A[ログイン画面]
B{入力内容チェック}
C[エラー表示]
D[ダッシュボードへ遷移]
A --> B
B -- OK --> D
B -- NG --> C
C --> A
flowchart TD
A[ログイン画面]
B{入力内容チェック}
C[エラー表示]
D[ダッシュボードへ遷移]
A --> B
B -- OK --> D
B -- NG --> C
C --> A
このように、分岐とループを組み合わせることで、実務に近い流れを描くことができます。
実務フローを反映したサンプル図の作り方
実際の業務に合わせて描くときは、「部署単位」や「システムの役割」でノードを分けるとわかりやすくなります。
flowchart TD
subgraph ユーザー部門
U1[申請書作成]
U2[申請ボタン押下]
end
subgraph 管理部門
M1[承認確認]
M2[承認済みメール送信]
end
U1 --> U2 --> M1 --> M2
flowchart TD
subgraph ユーザー部門
U1[申請書作成]
U2[申請ボタン押下]
end
subgraph 管理部門
M1[承認確認]
M2[承認済みメール送信]
end
U1 --> U2 --> M1 --> M2
subgraphで部門や担当者をグループ化すると、関係者が見るときにも理解しやすくなります。
チームで使うための工夫と補足
業務フロー図をチームで扱うには、一定のルールや運用の工夫が欠かせません。特に、図の差分や修正履歴をどう追うかは、あとから効いてくるポイントです。
ここでは、実際に使ってみて気づいたことや、小さな工夫を紹介します。
記号と命名ルールを統一する
ノードのIDやラベルがバラバラだと、図が読みづらくなります。そこで、「処理はTで始める」「判断はJから始める」など、軽いプレフィックスルールを設けました。
flowchart TD
T1[書類作成]
J1{内容に不備は？}
T2[修正対応]こうすることで、読み手が構造をすばやく理解できるようになります。
差分更新をどう管理するか
Mermaidはテキスト形式なので、Gitなどのバージョン管理と相性が良いです。ただし、コメントを入れないと変更点が伝わりにくい場合もあります。
変更のたびに、上部に簡単な履歴コメントを加えるようにしました。Markdown内であれば、変更理由なども並記しやすいです。
後から気づいた便利な書き方
あとで気づいたのが、click構文やリンク挿入ができる点。たとえば関連ドキュメントや手順書への導線を追加できます。
flowchart TD
A[マニュアル参照] --> B[手順実行]
click A "https://example.com/manual" "マニュアルを開く"
flowchart TD
A[マニュアル参照] --> B[手順実行]
click A "https://example.com/manual" "マニュアルを開く"
こうした補足機能を活用すると、図が「操作の入口」としても機能してきます。
まとめ：Mermaidで業務の見える化が前に進む
業務フローを図にすることは、単に手順を整理するだけでなく、曖昧な部分や認識のズレを浮き彫りにする手段でもあります。Mermaidはその作業を軽やかに、かつ柔軟に進めるツールとして有効でした。
もちろん、どんなに図を整えても、実際の運用は常に動いています。だからこそ、
図は「固定した仕様」ではなく「話し合いの土台」
として使うのがちょうどよく、扱いやすく、すぐ直せることこそが、Mermaidの強みだと感じています。
必要に応じて少しずつ試してみる、くらいの気軽さで導入してみてはいかがでしょうか。
正直、Mermaidは“考えるフェーズ”では爆速なんですが、
実際の業務では「きれいな図じゃないと通らない」ってことも多く、
上層部に出すときは、結局ExcelやVisioで清書することになります(-_-;)
