フローチャート作成ツールとは？
ドラッグ＆ドロップで判断ひし形、処理ボックス、入力/出力の平行四辺形、ドキュメント形状、コネクタを配置してフローチャートを作成できます。完成した図はPNG、SVG、PDFでエクスポートできます。
処理ボックス、判断ひし形、開始/終了の角丸ピル、入力/出力の平行四辺形、ドキュメント形状から選べます。キャンバスに吸着し、ノードを動かしても接続は外れません。ノードをダブルクリックで名称変更、ハンドルから別のハンドルへドラッグすれば 2 つの図形がつながり、色替えやキャンバスの一括消去もワンクリックです。図が完成したら、スライド用の透明背景 SVG、任意のズーム倍率の PNG、印刷向けの PDF に書き出せます。
使い方
- ステップ1 — ツールバーから図形ノード（処理、判断、開始/終了）をキャンバスにドラッグします。
- ステップ2 — ハンドルからドラッグしてノード同士を接続します。ダブルクリックでラベルを編集できます。
- ステップ3 — レイアウトを整えたら、フローチャートをPNG、SVG、PDFでエクスポートして、プレゼンや印刷、文書作成に活用しましょう。
使用するタイミング
- コードを書き始める前に、成功と失敗の分岐込みでバックエンドのリクエスト処理を図にする。
- 新人が初日に読み解けるよう、カスタマーサポートのエスカレーション経路を整理する。
- 設計ドキュメントで文章だけでは分かりにくいアルゴリズムを図解する。
結果
プロダクトマネージャーがユーザーオンボーディングフローを作成します：開始 → 新規登録 → メール認証済み？（判断）→ はい → ダッシュボード / いいえ → メール再送信 → 認証に戻る。
よくある質問
- 処理ボックスと判断ひし形は何が違いますか?
- 長方形は動作や工程(メール送信、レコード更新)を表します。ひし形は はい/いいえ や分岐の質問を表し、流れを 2 方向に分けます。ピル形は図全体の開始と終了を示します。この約束を守ると図がぐっと読みやすくなります。
- 2 つの図形をつなげる方法は?
- ノードにマウスを乗せると小さなハンドルが縁に現れます。片方のハンドルをクリックして、もう片方の図形のハンドルへドラッグし放すと矢印が出ます。あとから矢印の中点をドラッグすれば、他のノードを避けるように経路を変えられます。
- 矢印にもラベルを付けられますか?
- はい。矢印をダブルクリックすると中点にテキスト入力が出ます。判断ひし形の二本の出口に「はい」「いいえ」を書く、または「status=200」「リトライ上限到達」のような条件を遷移に書き添えるのに便利です。
- PNG ではなく SVG を勧める理由は?
- SVG はどのズームでも鮮明で、後から Figma、Illustrator、Inkscape で文字や色を編集できます。PNG は解像度が固定ですが、Confluence、Notion、PowerPoint に貼り付けるときの安定性は高めです。
- キャンバスは何ノードくらいまで耐えますか?
- React Flow は数百ノードまでなら快適に動きます。それを超えると、性能が低めのノート PC でパンとズームが重くなります。ここまで大きくなった図は、全体図と各サブシステムの詳細図に分けてリンクでつなぐのがおすすめです。