Mermaid とフローチャート

導入

まずは Mermaid の一番の基本、フローチャート（流れ図） です。処理や判断の流れを、四角や矢印でつないで表します。手順の説明やアクティビティ図の代わりとしてよく使われます。

説明

Markdown の中に、次のように ```mermaid で囲んだブロックを書きます。1行目に図の種類（flowchart TD）を書き、続けてノードと矢印を並べます。

• flowchart TD … フローチャートを 上から下（Top→Down） に描く宣言。LR にすると左から右になります。
• A[テキスト] … 四角いノード。A は識別子、[] の中が表示ラベル。
• B{テキスト} … ひし形のノード（判断・分岐 を表す）。
• --> … 矢印。-->|ラベル| で矢印に文字を添えられます。

flowchart TD
    A[開始] --> B{ログイン済み?}
    B -->|はい| C[トップページ]
    B -->|いいえ| D[ログイン画面]
    D --> C

この図は「開始 → ログイン済みか判断 → はいならトップへ、いいえならログイン画面を経てトップへ」という流れを表します。矢印をたどるだけで処理の道すじが読めるのがフローチャートの利点です。

読んでみよう

ノードの形が意味を持つ点に注目しましょう。四角 [] は「処理・状態」、ひし形 {} は「分岐（Yes/No）」を表す約束です。flowchart TD を flowchart LR に変えると、同じ内容が横方向に並びます。図の向きは、載せる場所の幅に合わせて選びます。