Claudeでのフローチャート作成手順

Claudeでフローチャートを作成するとは

Claudeは、文章で書かれた業務手順書をアップロードするだけで、決定分岐や複数の経路を視覚的なフローチャートにまとめられます。42ページの導入手順書のような読み通すのが大変な文書でも、条件によって分かれる経路と、それぞれにどれだけの件数が流れているかを1枚の図に集約できます。

生成された図はArtifactsという専用ウィンドウに表示され、チャットとは別に操作できます。図形をクリックすると詳細説明が開く、経路ごとの色分けや帯の太さで件数の内訳を表現するといった、単なる静止画以上のインタラクティブな図になります。

Artifactsを使うには、設定の「Capabilities」で「Code execution and file creation」を有効にしておく必要があります。以前はこのトグルなしでもArtifactsだけは使えましたが、現在は両方が同じ設定でまとめて管理されています。Free・Pro・Max・Team・Enterpriseの全プランで使え、Team・Enterpriseは組織の管理者が有効化します。

Claudeが何でもArtifactsにするわけではありません。目安になるのは、15行を超える分量があり、単体で完結していて、あとから編集・参照したくなる内容かどうかです。フローチャートのような図解は、この基準に当てはまる代表的なコンテンツとして公式にも挙げられています。Claude・Claude Desktopに加え、Team・EnterpriseプランではClaude CodeやCoworkでもArtifactsが使えますが、本記事はClaude(チャット)からの作成に絞って扱います。

手順1: 手順書をアップロードして可視化を依頼する

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

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

「Sankey形式」「ズームとパン」のように具体的な図の種類や操作性まで指定すると、単純な四角と矢印の図ではなく、件数の比率を帯の太さで表現した図になります。指定がなければ、Claudeは文書の構造から標準的なフローチャートの形式を選びます。

Sankey形式以外の図にしたい場合

件数の内訳までは要らず、単純に手順の分岐だけを見せたい場合は、標準的な上から下へのフローチャートで十分です。図の種類は依頼の書き方で決まるため、目的に応じて指定を変えます。

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

どちらの形式が向くかは、伝えたい情報の性質で決まります。

手順2: Claudeが作る図の中身を確認する

出来上がった図では、各フェーズがクリックできるカードになっており、開くとそのフェーズの詳しい説明・関わる担当・注意点が表示されます。経路の分岐点では、帯の太さがそのまま件数の比率を表します。

たとえば「主経路62%、代替経路23%、拡張経路12%、離脱3%」のように、文書には数値としてしか書かれていなかった内訳が、帯の太さという視覚情報に変換されます。数値の一覧を読むより、どこが太い経路でどこが細い経路かが一目で分かる点が、通常のフローチャートとの違いです。

会議の場で図を映しながら「この離脱経路をもっと減らせないか」といった議論をする際にも、帯の太さがそのまま論点の優先度を示してくれるため、数値表を別途見比べる手間が省けます。フェーズカードを開けば、その経路特有の課題やリソース要件までその場で確認でき、資料を行き来せずに議論を進められます。

手順3: 図を編集・拡張する

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

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

「他のセクションは今のままに」と明示しておくと、拡張したい範囲だけが変わり、全体の構成が崩れません。同様に、レイアウトの向きや色分けの基準を変えたいときも、既存の図を土台にした追加の指示だけで反映できます。

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

図を最初から作り直す必要はなく、直近の会話で作った図を参照した状態のまま、変更したい観点だけを伝えれば反映されます。

Mermaidや共有可能な形式へ書き出す

Artifacts内の図はチャットの中だけで完結させることもできます。社内ドキュメントへの埋め込みや、チームでの編集を前提にするなら、Mermaid Chart Connectorを使った書き出しが選択肢になります。

Mermaid Chartは、Claude・Claude Desktop・Claude Mobile・Claude Code・APIから利用できる外部サービスのコネクタです。Mermaid記法の構文チェック、SVGとしての高品質な描画、プレビューと編集ができる共有リンクの発行までを担います。他にどんなコネクタが使えるかはClaudeの拡張機能ディレクトリから探せます。

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

Artifactsで作った図をそのままMermaidのコードとして持ち出せると、Gitで管理しているドキュメントやWikiにテキストとして埋め込めるようになります。画像として貼り付けるより、後から文面を検索したり差分を追ったりしやすくなる点が利点です。

Projectで継続的にメンテナンスする

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

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

作った図を公開して共有する

Artifactsの中で作った図は、そのままではチャットの中だけに残り、Artifactsサイドバーの一覧には自動では表示されません。あとから見返したり他の人と共有したりしたい場合は、図を開いた状態で「Publish」を押して、明示的にサイドバーへ登録する操作が必要です。

「Publish」を押して公開した図はURLで共有でき、相手はコードを見たり、そこから複製して自分用に手を加えたりできます。社内で使い回すテンプレート的なフローチャートほど、公開しておく価値が上がります。逆に、その場限りの確認用に作った図まで毎回公開する必要はありません。チャットの中で見て終わりにしてよいものと、後々参照するものを区別しておくと、Artifacts一覧が使い勝手の良い状態を保てます。

作り方の使い分け早見表

同じ「フローチャートを作る」でも、目的によって適した手段が変わります。

一度きりの資料化ならArtifactsで十分です。更新が続く業務手順や複数人での編集を前提にする場合は、Mermaidへの書き出しかProjectでの運用を組み合わせるほうが、作り直しの手間を抑えられます。3つの方法は排他的ではなく、Project上で継続運用しながら、節目でMermaidに書き出して社内Wikiへ反映する、という組み合わせ方もできます。最初からすべてを整備しようとせず、まずArtifactsで1枚作ってみて、必要になった時点で書き出しや継続運用を足していく順番のほうが、無駄な設定作業を避けられます。

よくある質問

Claude Codeでも同じ図を作れるか

作れます。ArtifactsはTeam・EnterpriseプランであればコマンドラインのClaude Codeからも利用でき、セッションの内容をライブページとして公開する使い方ができます。公開範囲や運用の細部はチャット版と異なります。

作った図をPowerPointや社内資料に貼り付けられるか

Artifactsの画面右下からコードの確認・クリップボードへのコピー・ファイルのダウンロードができます。SVGとして書き出してから資料に貼り付ける、あるいはMermaidコードとして書き出してから別ツールで画像化する、といった経由が可能です。貼り付け先の資料フォーマットに合わせて、どちらの経由が扱いやすいかを選んでください。

まとめ

Claudeのフローチャート作成は、文章の手順書をアップロードするだけで、決定分岐と件数の内訳まで含んだ図をArtifacts上に生成する機能です。図の種類や操作性を具体的に指示するほど仕上がりが安定し、既存の図は部分的な拡張やレイアウト変更で更新できます。チームでの共同編集や社内ドキュメントへの埋め込みを前提にするならMermaid Chart Connectorでの書き出し、継続的な更新が前提ならProjectでの運用が向いています。