Claude Codeで業務フロー図を作成する — Mermaid・draw.ioの使い分け

図を「描く」のではなく「文章で書かせる」

Claude Codeは、図をマウスで描くのではなく、図の設計図を文字で書き、それを図に変換する方式で業務フロー図を作ります。代表的な形式がMermaid（マーメイド）で、「AからBへ進む」といった関係を短いテキストで書くと、ツール側が箱と矢印に並べてくれます。

この方式の利点は、図の修正が文章の修正で済むことです。「承認者を課長から部長に変えて」「差し戻しの矢印を足して」と頼めば、Claude Codeが該当の行を書き換えます。図形の位置を手で直す手間がなく、変更前後の差分もファイルで確認できます。

ステップ1: 業務の流れを箇条書きで書き出させる

いきなり図を作らせるより、先に流れを箇条書きで確定させるほうが手戻りが減ります。作業フォルダに手順書・聞き取りメモ・帳票などの材料を置き、まず次のように頼みます。

このフォルダの「請求業務_聞き取りメモ.md」と「請求書発行手順.docx」を読んで、
請求業務の流れを箇条書きで整理してください。
- 1行に「誰が・何をするか」を1つだけ書く
- 判断が入る箇所（承認・差し戻しなど）は分岐として明記する
- 資料から読み取れず推測した箇所には【要確認】を付ける

ポイントは【要確認】の印を付けさせることです。資料にない手順をAIが補うのは便利な反面、現場の実態と違う流れが紛れ込みます。印の付いた箇所だけを担当者に確認すれば、聞き取りの往復を最小限にできます。

ステップ2: Mermaidで業務フロー図にする

流れが固まったら、図にするよう頼みます。保存先と形式を指定しておくと、フォルダに図のファイルが残り、後から何度でも修正できます。

いま整理した請求業務の流れを、Mermaidのフローチャートにして
「請求業務フロー.md」に保存してください。
上から下へ流れる向きで、判断の箇所はひし形にしてください。

保存されるファイルの中身は、たとえば次のようなテキストです。1行が1本の矢印に対応しているので、慣れると図を見なくても流れが読めます。

flowchart TD
    A[営業: 受注内容を登録] --> B[経理: 請求書を作成]
    B --> C{課長: 金額を承認?}
    C -- 承認 --> D[経理: 請求書を送付]
    C -- 差し戻し --> B
    D --> E[経理: 入金を確認]

このファイルをGitHubやNotionに置くと、そのまま図として表示されます。手元で確認したいときは、VS CodeにMermaid表示用の拡張機能を入れるか、Mermaid公式のブラウザ上のエディタ（Mermaid Live Editor）に貼り付ければ図で見られます。

担当者別のスイムレーンにする

業務改善の場で役に立つのは、担当者ごとに列を分けたスイムレーン図です。誰の手元で仕事が止まっているか、部署間の受け渡しが何回あるかが一目で分かります。

請求業務フローを、営業・経理・課長の担当者別に枠を分けた図にしてください。
部署をまたぐ受け渡しの矢印が何本あるかも数えて教えてください。

Mermaidでは担当者ごとの枠（subgraph）でまとめる形になります。枠の並びが崩れるなど見た目に限界があるので、社外にも出す清書はこの後のdraw.ioで整えるのが現実的です。社内の検討用なら、Mermaidの下書きで十分に議論できます。

ステップ3: 画像に書き出して資料に貼る

WordやPowerPointに貼るには、図を画像ファイルにする必要があります。Mermaid公式のコマンドラインツール（mermaid-cli）を使えば、MermaidのファイルからPNGやSVGを書き出せます。インストールや実行もClaude Codeに任せられます。

「請求業務フロー.md」の図を、mermaid-cliでPNGとSVGに書き出してください。
PNGは資料に貼るので、背景は白で横幅を広めにしてください。

mermaid-cliはNode.jsで動くツールで、Claude Codeが npx 経由で実行するのが一般的です。社内PCでツールの追加に制限がある場合は、導入前に情報システム部門のルールを確認してください。拡大しても荒れない図が欲しいときはSVG、すぐ貼りたいときはPNGが扱いやすい形式です。

手で仕上げたいときはdraw.ioと連携する

図形の配置や色を細かく整えたいときは、作図ツールのdraw.ioを使います。draw.ioの開発元は、Claude Codeなどから使える公式のMCPサーバーとプラグインを公開しています。プラグインを入れると、Claude Codeがdraw.io形式（.drawio）のファイルを作れるようになります。

/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio

作られた.drawioファイルはdraw.ioのエディタで開き、図形を手で動かして仕上げられます。公式の説明では、PNG・SVG・PDFへの書き出しにはdraw.ioのデスクトップ版が必要です。プラグインの入れ方や管理の仕方はプラグインの記事を参考にしてください。

実務では、Mermaidで流れを固めてから、清書だけdraw.ioに移す順番がおすすめです。流れが固まる前にレイアウトを整えると、手順が1つ増えるたびに配置をやり直すことになります。

既存の図を読み取らせて改善案を出させる

Claude Codeは画像を読み取れるので、手書きのホワイトボードや古い業務フロー図の写真も材料になります。画像をClaude Codeの画面にドラッグ&ドロップするか、ファイルの場所を伝えて読ませます。

「現行フロー_ホワイトボード.jpg」を読み取り、Mermaidの図に起こしてください。
そのうえで、待ち時間が発生しやすい箇所と、二重入力になっている箇所を指摘し、
改善後のフロー図を別ファイルで作ってください。

現状と改善後の図を並べると、会議で「何がどう変わるのか」を説明しやすくなります。ただし、手書きの文字が読みにくい箇所は誤読が起こりうるので、起こした図は必ず元の写真と見比べてください。

よくあるつまずきと対処

業務フロー図は、業務改善やシステム化の議論の出発点です。図ができたら、そのまま要件定義の進め方に進めば、「どこをシステム化するか」まで同じ作業フォルダで整理できます。

当社のClaude Code法人研修では、受講企業の実際の業務を題材に、聞き取りから業務フロー図・改善案の作成までを実習形式で体験していただけます。