Claudeでフローチャート(フロー図)を作成する手順

手順書1つから分岐と件数の入った図を作る

Claudeでフローチャート(フロー図)を作るには、業務手順書をチャットに添付し、図の種類と操作性を指定して依頼します。

42ページの導入手順書のように読み通すのが大変な文書でも、Claudeは決定分岐や複数の経路を読み取れます。条件で分かれる経路と、それぞれに流れる件数を1枚の図にまとめられます。

生成された図はArtifactsという専用ウィンドウに表示され、チャットとは別に操作できます。図形をクリックすると詳細説明が開く、経路ごとの色分けや帯の太さで件数の内訳を表現するなど、静止画にとどまらない図になります。作業の先行関係から工程表を描く場合は、工程表(ガントチャート)の作成手順があります。

Artifactsを使うには、Free・Pro・Maxでは「設定 > 機能(Capabilities)」、Team・Enterpriseでは組織設定の同じ項目で、「コード実行とファイル作成」(Code execution and file creation)をオンにしておく必要があります。Artifactsのヘルプでは「クラウドコード実行とファイル作成」と表記されています。Free・Pro・Max・Team・Enterpriseの全プランでチャットからArtifactsを作れます。

Claudeが何でもArtifactsにするわけではありません。目安は、15行を超える分量があり、単体で完結していて、あとから編集・参照したくなる内容かどうかです。図解やフローチャートは、この基準に当てはまる例としてArtifactsのヘルプに挙がっています。

チャット以外では、Claude CodeからもArtifactsを公開できます。Artifactsのヘルプによれば、Claude Codeを含む全プランが対象です。ただしこちらはセッションの出力を非公開URLのライブページとして出す使い方なので、本記事は手順書を図にするチャットでの作り方に絞ります。簡易なゲームのようなインタラクティブな部品も同じ仕組みで作れます。作り方はClaude Artifactsでゲーム制作する方法にあります。

手順書をアップロードしてSankey図を依頼する

元になる文書は、フォーマットが整っていなくても構いません。箇条書きや散らばったメールの寄せ集めからでも、Claudeは決定分岐や並行する作業の構造を読み取れます。ただし、方向・配色・インタラクションまで具体的に伝えると、手戻りが減ります。

添付した導入手順書(42ページ)を可視化してください。
データ品質・連携可否・リソース・展開準備の状況によって
経路が分かれる構造になっています。
 
全体を1枚の図として俯瞰でき、経路ごとの件数の内訳が
分かるSankey形式の図にしてください。曲線でつながる
柔らかい配色で、ズームとパンができるようにしてください。

この例は、Claude Academyのユースケース「Create a process flowchart」の依頼文を下敷きにしています。Academy側の依頼文は、Sankey図・曲線・ズームとパンに加えて「Tufteレベルの情報デザイン」まで指定しています。図の種類や操作性を名指しするほど、単純な四角と矢印の図になりにくくなります。

帯の太さで見せるか、判断基準で見せるか

どちらの形式にするかは、図を見る人に何を判断してほしいかで決まります。図の種類は依頼の書き方で決まるので、目的に合わせて指定を変えます。

添付した承認プロセスの手順書から、上から下に流れる
シンプルなフローチャートを作ってください。分岐点には
判断基準を短く書き添えてください。件数の内訳は不要です。

狙った形にならなかったときは、形式名を依頼文に書き足して作り直す方が確実です。

出来上がった図と元の手順書を突き合わせる

図ができたら、見た目より先に数字を確かめます。Academyの例では、経路の割合が次のように示されています。

4つを足すと100%になります。自分の手順書で作った図でも、割合の合計が100%か、元の文書に書かれた件数と一致しているかを最初に見てください。手順書に件数が書かれていなければ、帯の太さには根拠がありません。その場合は標準的なフローチャートに切り替えるか、件数を自分で渡し直す方が安全です。

各フェーズはクリックできるカードになっていて、開くと、概要と適用条件・主な作業と成果物・よくある問題・期間とリソース要件が表示されます。カードの中身も原文と食い違っていないかを、代表的な1〜2枚だけでも開いて確かめてください。

図を部分的に直す

一度作った図は、全体を作り直さずに一部分だけ拡張したり、レイアウトを変えたりできます。

導入フェーズの部分をもっと細かく展開してください。
技術ディスカバリー・サンドボックス設定・データマッピング・
初期設定・テスト・トレーニングの各ステップに分けて表示し、
他のセクションは今の詳しさのままにしてください。

「他のセクションは今のままに」と明示しておくと、拡張したい範囲だけが変わります。向きや色分けの基準を変えたいときも、既存の図を土台に追加の指示だけで反映できます。

上から下ではなく左から右に流れるように配置し直してください。
また、担当チームごとに色分けしてください。
営業は青、カスタマーサクセスは緑、導入担当はオレンジにしてください。

図の中でエラーが出たときは、エラー表示の近くに出る「Try fixing with Claude」ボタンを押すと、エラー内容が新しいメッセージにコピーされます。それをそのまま送ればClaudeが原因を調べて直しにかかります。直る保証はなく、追加の切り分けが要ることもあるとヘルプに書かれています。

Mermaidに書き出すと何が変わるか

Artifactsの図はチャットの中で完結させることもできます。社内ドキュメントへの埋め込みやGitでの差分管理を前提にするなら、Mermaid Chartコネクタで書き出す選択肢があります。

コネクタ掲載ページによれば、Mermaid Chartは「Mermaid記法の構文を検証し、高品質なSVGで描画し、プレビュー・拡大・修正を対話UIで行える」コネクタです。公開されているツールはdisplay_mermaid(描画)・save_diagram(保存)・update_diagram(更新)・repair_diagram(修復)・get_diagram_by_url・list_personal_diagrams・sign_inの7つです。掲載ページのSign-in欄は「Not required」ですが、保存や一覧取得を使うときはサインインのツールも用意されています。他にどんなコネクタがあるかはClaudeの拡張機能ディレクトリから探せます。

このArtifactのフローチャートを、Mermaid Chart Connectorを使って
Mermaid.js形式に変換してください。チームに共有できる
編集用のリンクと、ドキュメントに埋め込める生のコードも
ください。

Academyの依頼例は、共有用の編集リンクと生のMermaidコードの両方を頼む形です。図の保存(save_diagram)や取得(get_diagram_by_url)はMermaidアカウントへのサインインが前提で、repair_diagramもサインインが必要です。修復に成功するとAIクレジットを消費します。

書き出されるコードのイメージは次のとおりです。Mermaidの公式ドキュメントにある記法(flowchart・ひし形の判断ノード・-->|ラベル|の矢印ラベル)で、承認の分岐を書いた例です。日本語のノード名は、公式ドキュメントのUnicode文字の案内に合わせて引用符で囲んであります。

flowchart TD
    A["導入依頼を受付"] --> B{"データは基準を満たすか"}
    B -->|はい| C{"連携は可能か"}
    B -->|いいえ| D["データ整備を先に実施"]
    D --> C
    C -->|はい| E["主経路で導入"]
    C -->|いいえ| F["代替経路で導入"]

Sankeyは別の記法です。公式ドキュメントでは、先頭にsankeyと書き、その下に「始点,終点,値」の3列のCSVを並べる形式で、「実験的な図」と明記されています。Academyの例の割合を当てはめると、次のようになります。

sankey
 
導入依頼,主経路,62
導入依頼,代替経路,23
導入依頼,拡張経路,12
導入依頼,離脱,3

つまずきやすい点もあります。公式ドキュメントは、フローチャートのノード内で英単語のendを小文字で書くと図が壊れると警告しています。「End」や「END」のように一部を大文字にする必要があります。また、接続先ノードの先頭がoまたはxだと矢印の記号と誤読されるため、前にスペースを入れるか大文字にするよう案内されています。英語の手順書から起こした図で、工程名がendやoutputで始まるときは、書き出し後のコードを読み直してください。

チームのホワイトボードで扱いたい場合は、Miro連携でボードに書き出す方法も選択肢です。ヒアリングメモから現状の業務フローを図にして抜けを洗う使い方は、Claudeで業務フロー図を作成する手順にあります。

更新が続く手順はProjectで持つ

完璧な文書を用意してから始める必要はありません。手元にあるものをそのままアップロードして図にしてもらい、抜けている条件や例外があればチャットで書き足していく方が、事前に整形し直すより早く実用的な図にたどり着けます。

継続的にメンテナンスするなら、専用のProjectを作り、Project Knowledgeに元の手順書・作図の方針(配色・向き・記法)・過去にやり取りした分岐の補足事項を保存しておく方法があります。手順が変わったときは、同じProject内で新しい会話を始めて変更点を伝えます。Projectの容量上限や運用の基本はClaude Projects完全ガイドにまとめています。

作った図の保存と共有

ヘルプの説明は、Artifactsの刷新(2026年9月16日)を境に分かれます。手順が異なるので、自分の図がどちらに当たるかを先に確認してください。

9月16日以降に作った図は、Publishを押さなくてもサイドバーのArtifactsタブに保存されます。公開したレガシーの図はFree・Pro・Maxでは、「Copy」でコードをコピーして新しいチャットに貼り、自分用に手を加えられます。貼るのは信頼できる相手の図に限ってください。他人のコードと内容を自分のチャットに持ち込むことになるためです。

PowerPointやPDFで持ち出したいときは、書き出しの選択肢が図の作られ方で変わります。テンプレートから作った成果物は「Export」から書き出せ、Designの成果物なら.zip・PDF・PowerPoint・HTMLで出せます。チャットで作ったレガシーの図に用意されているのは、コードの表示・コピー・ダウンロードです。9月16日以降にチャットで新しく作った図の書き出し手段はヘルプに明記がないため、画面の操作を確認してください。フローチャートを資料に貼りたい場合は、Mermaidコードに変換して別ツールで画像化するか、ClaudeにSVGのコードを頼んでコピーする経路があります。

Artifacts・Mermaid・Projectは組み合わせられる

ここまでの3つは排他的ではありません。Project上で運用しながら、節目でMermaidに書き出してWikiに反映する組み合わせもできます。最初は1枚作ってみて、必要になった時点で書き出しや継続運用を足す順番なら、無駄な設定作業を避けられます。

オンライン講座のカリキュラム構成を可視化する使い方は、UdemyのカリキュラムをClaudeで設計する記事で扱っています。単線図から複線図を描き起こす練習にArtifactsを使う例は、電気工事士の技能試験の複線図をClaudeで練習する方法にあります。

まとめ

図の見た目は、依頼文で形式を名指しすれば狙いに近づきます。ただし、帯の太さや分岐条件が手順書の数字と合っているかは、人が突き合わせるしかありません。共有や書き出しを考えるときは、9月16日の前後どちらで作った図かを最初に確認してください。