本文へ移動

フローチャート作成

手順と判断を配置し、ラベル付き矢印でつないでSVGまたはPNG画像として保存します。

フローチャート編集

データはこのブラウザー内に留まります。

100%

上部から図形を追加。文字をクリックして編集し、図形をドラッグして移動します。上下左右の接続点から別の図形へドラッグして接続できます。

線を選択してスタイル変更 · 空白をドラッグして移動 · Ctrl/⌘ Zで元に戻す

結果

フローチャートの使い方

  1. 開始 / 終了、処理、判断を追加します。最初の例もそのまま編集できます。
  2. 図形を選び、パネルで種類や色を変更します。文字をクリックすると直接編集できます。図形本体をドラッグするか、矢印キーで移動できます。
  3. 上下左右の接続点から別の図形へドラッグします。線を選択すると、ラベル、実線・破線・点線、両端の矢印を変更できます。上部のパレットは独立した図形を追加します。
  4. 元に戻す、やり直す、拡大縮小、全体表示、空白ドラッグを使い、SVGまたはPNGを保存します。

図形の意味

丸みのある図形は開始・終了、長方形は処理、ひし形は判断を表す一般的な約束です。ツールは手順を実行したり、内容を自動生成したりしません。

承認フローの例

開始から「申請を確認」、次に「承認?」へ接続します。「はい」は「公開」、「いいえ」は「修正」へつなぎ、修正から確認へ戻すこともできます。図形を動かしても矢印は追従します。

サポート手順の例

開始、「問い合わせを読む」、「情報は十分?」を作ります。はいは調査、いいえは追加質問へ進み、両方を「返信」にまとめます。複製した図形に元の矢印は付きません。

選択・移動・履歴

選択中の図形は破線で囲まれ、複製と削除の2つの操作が表示されます。パネルで文字・色・種類を変更でき、種類を変えても接続は保持されます。パレットは図形追加、4つの接続点は既存図形の接続に使います。キーボードでは接続点にフォーカスしてEnterを押し、接続先でも同じ操作をします。元に戻す・やり直しはキャンバス右上のアイコンです。追加、削除、ドラッグ、確定した文字・色・線スタイルの編集を1操作ずつ戻せます。入力欄以外ではCtrl/Command+Z、Shift+Ctrl/Command+Z、Ctrl+Yが使えます。矢印キーで選択図形を移動し、Deleteで削除します。全消去も元に戻せます。

範囲と出力

有限の1,200 × 760キャンバス、図形40個、接続60本、図形60文字、分岐36文字まで。SVGはベクター、PNGは1,200 × 760です。選択枠や操作部は出力されません。

保存とプライバシー

編集はこのタブ内だけです。画像保存は編集用プロジェクトのバックアップではありません。再読込や言語変更前に保存してください。アカウント、クラウド、共同編集、AI、自動配置、読込はありません。

困ったとき

接続できない場合は、同じ方向の線がない別々の図形を選んでください。線やラベルの余白が不足している場合は図形を離します。線は図形を避けて通り、ラベルは経路の中央付近で図形や他のラベルと重ならない位置に配置されます。長すぎる名前は短くします。表示を見失ったらフィットを使い、空白をドラッグして移動します。PNGの作成に失敗した場合はSVGを試してください。共有前に矢印とラベルの意味を確認しましょう。

よくある質問

AIで自動作成しますか?

いいえ。図形、文字、接続、位置は利用者が編集します。

図形削除で線も消える理由は?

接続先のない線を残さないためです。

保存後に再編集できますか?

SVGは多くのベクターツールで開けますが、編集プロジェクト形式ではありません。

移動しても線はつながりますか?

はい。現在の図形位置から端点を再計算します。

SVGとPNGの違いは?

SVGは拡大に強く、PNGは1,200 × 760の固定画像です。