フローチャート作成

分岐のルール

図の記法を覚える必要はありません。ルールは4つだけで、サンプルのボタンを押すとそれぞれの動きを確認できます。

• 書かなかった分岐は次の行へ進みます。「在庫はありますか？」の下に「いいえ: 品切れを連絡」だけを書くと、「はい」の矢印はその次の行につながります。
• 「はい」の分岐は本筋に戻ります。「はい: 傘を持つ」のように新しい手順を書くと、その手順を描いたあと次の行へ続きます。「いいえ」の分岐に書いた新しい手順は、そこで終わります。
• すでにある手順の名前を書くと、そこにつながります。「いいえ: エラーを表示 -> パスワードを入力」と書くと、エラーを表示してから「パスワードを入力」の手順に戻ります。名前は一字一句同じにしてください。
• 分岐の行をまったく書かない場合は、「はい」は次の行へ、「いいえ」は前の手順へ戻ります。「テストは通りましたか？」のような「通るまで繰り返す」流れに向いています。

ひとつの分岐に複数の手順をつなげたいときは、矢印で並べます。例：「いいえ: 品切れを連絡 -> 返金 -> 注文をキャンセル」

こんな場面で使えます

• 業務フローの整理 — 受注処理・返金・承認の流れは、長い文章よりも1枚の図のほうが伝わります。引き継ぎ資料や社内Wikiにそのまま貼れます。
• レポートや課題 — アルゴリズム、実験の手順、ユーザーの行動の流れを図にして、Word・Googleドキュメント・スライドに入れられます。PNGは白い背景なので、紙面になじみます。
• 企画・開発 — 条件によって分かれるログイン・決済・会員登録の流れをさっと描いて、打ち合わせの前に共有できます。
• 日常のチェックリスト — 旅行の準備、引っ越し、トラブル時の確認手順も同じように書けます。

記号の意味

角の丸い枠は開始と終了、長方形は作業、ひし形は「はい」「いいえ」に分かれる判断、矢印は流れの向きを表します。よく使われる記号だけに絞っているので、だれが見ても読める図になります。手順が多いときは、横長のスライドには「左から右」、文書やスマホの画面には「上から下」が向いています。

Mermaidコードを直接書く

「Mermaidコード」タブを開くと、書いた手順がMermaidの記法に変換されます。Mermaidは図を文章で書くためのオープンな形式で、コードを編集すれば枠の形や矢印のラベルを細かく調整できます。同じ入力欄で、人やシステムの間のやり取りを表すシーケンス図（sequenceDiagram）や、スケジュールを表すガントチャート（gantt）も描けます。サンプルのボタンから始めて、名前や日付を書き換えてみてください。

コードに誤りがあると、プレビューの上に確認すべき行を知らせるメッセージが表示されます。直前の正しい図は薄く表示されたまま残るので、見比べながら直せます。文章とコードはこのブラウザに自動保存されるため、あとで開いてもそのまま残っています。サーバーに送信されることはありません。