フローチャートの書き方と記号一覧｜分岐・繰り返しの例とMermaid

フローチャート（流れ図）とは、処理の手順を、意味の決まった記号と線でつないで表した図です。 記号の形は日本産業規格 JIS X 0121（情報処理用流れ図・プログラム網図・システム資源図記号）で決められていて、この規格に沿って描くと、読む人によって解釈が分かれにくい図になります。

この記事では、JIS X 0121の記号を「名前・形・意味・Mermaidでの書き方」の4列で一覧にし、順次・分岐・多分岐・繰り返し（前判定・後判定）・サブルーチン呼び出しを、Mermaidのコードと同じ処理のPythonコードを並べて説明します。繰り返しは、判断記号で書く方法とループ端記号で書く方法の2通りを比べます。

確認環境：Mermaid 12.1.0（@mermaid-js/mermaid-cli 12.0.0 と Chromium で描画）／Python 3.11.2。掲載したMermaidのコードは、エラーの例を除き、すべて図として出力できることを確認しています。Pythonのコードは実行した出力を載せています。

フローチャートの記号早見表（よく使う8種）

まずは「端子・処理・判断・データ・線」の5つがあれば、ほとんどの手順を描けます。繰り返しとサブルーチンを描くときに、ループ端と定義済み処理を足します。

JIS X 0121の記号一覧（全25種）

JIS X 0121:1986 は国際規格 ISO 5807 に対応した規格で、記号をデータ記号・処理記号・線記号・特殊記号の4つに分けています。Mermaidの列は、Mermaid 12.1.0で描画できた書き方です。@{ shape: … } の形の指定は、公式ドキュメントでv11.3.0以降の機能とされています。

データ記号（10種）

処理記号（7種）

線記号（4種）

特殊記号（4種）

一覧をまとめて描画するコード

上の表のうち、Mermaidに形があるものをまとめて描くコードです。

flowchart TB
    subgraph データ記号
        d1[/"データ"/]
        d2@{ shape: bow-rect, label: "記憶データ" }
        d3@{ shape: win-pane, label: "内部記憶" }
        d4@{ shape: h-cyl, label: "直接アクセス記憶" }
        d5@{ shape: doc, label: "書類" }
        d6@{ shape: sl-rect, label: "手操作入力" }
        d7@{ shape: notch-rect, label: "カード" }
        d8@{ shape: flag, label: "せん孔テープ" }
        d9@{ shape: curv-trap, label: "表示" }
    end
    subgraph 処理記号
        p1["処理"]
        p2[["定義済み処理"]]
        p3@{ shape: trap-t, label: "手作業" }
        p4{{"準備"}}
        p5{"判断"}
        p6@{ shape: fork, label: " " }
        p7@{ shape: notch-pent, label: "ループ端" }
    end
    subgraph 線記号と特殊記号
        s1(["端子"])
        s2(("A"))
        s3@{ shape: brace, label: "注釈" }
        s4["線の例"]
        s1 --> s2
        s2 --- s4
        s4 -.- s3
    end

Mermaid 12.1.0のループ端（notch-pent）は上の角を落とした始端の形で、下の角を落とした終端の形は用意されていません。この記事では、始端と終端に同じ形を使い、同じループ名を書いて対応を示す方法をとります。

フローチャートの書き方（5つの手順と基本ルール）

制御構造ごとの描き方（MermaidとPythonの対応）

プログラムの流れは「順次・分岐・繰り返し」の3つの組み合わせで表せます。それぞれについて、Mermaidのコード、同じ処理のPythonコード、実行結果の順に載せます。

順次

flowchart TD
    S(["開始"]) --> A[/"単価と数量を入力"/]
    A --> B["合計 = 単価 × 数量"]
    B --> C[/"合計を表示"/]
    C --> E(["終了"])

price = 120          # 単価と数量を入力
quantity = 5
total = price * quantity   # 合計 = 単価 × 数量
print(total)         # 合計を表示

600

分岐（if 〜 else）

flowchart TD
    S(["開始"]) --> A[/"在庫数と注文数を入力"/]
    A --> D{"在庫数 >= 注文数"}
    D -- Yes --> B["在庫数 = 在庫数 − 注文数"]
    B --> C[/"「出荷します」を表示"/]
    D -- No --> F[/"「入荷待ちです」を表示"/]
    C --> E(["終了"])
    F --> E

stock = 8            # 在庫数と注文数を入力
order = 10
if stock >= order:   # 在庫数 >= 注文数
    stock = stock - order
    print("出荷します")
else:
    print("入荷待ちです")

入荷待ちです

判断記号から出る線に -- Yes --> のようにラベルを書きます。分かれた流れは、終了の前で1本に合流させます。

多分岐（if 〜 elif 〜 else）

JIS X 0121の判断記号は「いくつかの出口」をもてるので、3つ以上に分かれる場合も1つのひし形から線を出して描けます。

flowchart TD
    S(["開始"]) --> A[/"点数を入力"/]
    A --> D{"点数"}
    D -- "80以上" --> B1["評価 = A"]
    D -- "60以上80未満" --> B2["評価 = B"]
    D -- "60未満" --> B3["評価 = C"]
    B1 --> C[/"評価を表示"/]
    B2 --> C
    B3 --> C
    C --> E(["終了"])

score = 72           # 点数を入力
if score >= 80:      # 80以上
    grade = "A"
elif score >= 60:    # 60以上80未満
    grade = "B"
else:                # 60未満
    grade = "C"
print(grade)         # 評価を表示

B

値そのもので分かれる場合は、判断記号の中に調べる対象だけを書き、出口のラベルに値を書きます。Pythonでは match 文（3.10以降）が対応します。

flowchart TD
    S(["開始"]) --> A[/"コマンドを入力"/]
    A --> D{"コマンド"}
    D -- "add" --> B1[/"「追加します」を表示"/]
    D -- "list" --> B2[/"「一覧を表示します」を表示"/]
    D -- "その他" --> B3[/"「使い方を表示します」を表示"/]
    B1 --> E(["終了"])
    B2 --> E
    B3 --> E

command = "list"
match command:           # 値そのもので分かれる多分岐
    case "add":
        print("追加します")
    case "list":
        print("一覧を表示します")
    case _:
        print("使い方を表示します")

一覧を表示します

前判定の繰り返し（while）

先に条件を調べ、成り立つ間だけ処理を繰り返します。 最初から条件が成り立たなければ、処理は1回も実行されません。

flowchart TD
    S(["開始"]) --> A["在庫数 = 3"]
    A --> D{"在庫数 < 10"}
    D -- Yes --> B["在庫数 = 在庫数 + 4"]
    B --> D
    D -- No --> C[/"在庫数を表示"/]
    C --> E(["終了"])

stock = 3
while stock < 10:    # 先に条件を調べる（前判定）
    stock = stock + 4
print(stock)

11

在庫数は 3 → 7 → 11 と変わり、11になったところで条件（10未満）が成り立たなくなって繰り返しを抜けます。

後判定の繰り返し

先に処理を1回実行し、そのあとで条件を調べます。 処理は必ず1回は実行されます。入力のやり直しのように「まず1回やってみる」処理に向いています。Pythonには後判定専用の構文がないため、while True: と break で書きます。

flowchart TD
    S(["開始"]) --> A[/"数量を入力"/]
    A --> D{"数量 >= 1"}
    D -- No --> A
    D -- Yes --> C[/"数量を表示"/]
    C --> E(["終了"])

inputs = iter([0, -2, 3])   # 入力される値（1回目、2回目、3回目）
while True:
    quantity = next(inputs)  # 先に1回実行する
    print("入力:", quantity)
    if quantity >= 1:        # あとで条件を調べる（後判定）
        break
print("数量:", quantity)

入力: 0
入力: -2
入力: 3
数量: 3

前判定と後判定の見分け方

繰り返しの2通りの書き方（判断記号とループ端記号）

「1から5までの合計を求める」という同じ処理を、2通りで描きます。Pythonのコードはどちらも同じです。

total = 0
for i in range(1, 6):   # i = 1, 2, …, 5
    total = total + i
print(total)

15

判断記号で書く

flowchart TD
    S(["開始"]) --> A{{"合計 = 0、i = 1"}}
    A --> D{"i <= 5"}
    D -- Yes --> B["合計 = 合計 + i"]
    B --> I["i = i + 1"]
    I --> D
    D -- No --> C[/"合計を表示"/]
    C --> E(["終了"])

初期化（i = 1）、条件（i <= 5）、増分（i = i + 1）がそれぞれ別の記号になり、戻る線が1本入ります。流れを1歩ずつ追えるので、繰り返しの仕組みを説明するときに向いています。

ループ端記号で書く

flowchart TD
    S(["開始"]) --> A{{"合計 = 0"}}
    A --> L1@{ shape: notch-pent, label: "ループ1<br>i = 1, 2, …, 5" }
    L1 --> B["合計 = 合計 + i"]
    B --> L2@{ shape: notch-pent, label: "ループ1" }
    L2 --> C[/"合計を表示"/]
    C --> E(["終了"])

始端と終端に同じ名前（ループ1）を書き、始端に「i = 1, 2, …, 5」と繰り返しの条件をまとめます。戻る線がなくなり、上から下への一本道になるので、繰り返しが入れ子になっても線が交差しません。

どちらを使うか

1つの図の中では、どちらかに統一すると読みやすくなります。

サブルーチン呼び出し（定義済み処理）

まとまった処理は定義済み処理の記号（左右に縦線が入った長方形）に置きかえ、中身は別の流れ図として描きます。Pythonでは関数の定義と呼び出しに対応します。

flowchart TD
    subgraph main["主処理"]
        S(["開始"]) --> A[/"金額のリストを入力"/]
        A --> L1@{ shape: notch-pent, label: "ループ1<br>金額を1件ずつ取り出す" }
        L1 --> P[["税込み金額を求める"]]
        P --> O[/"税込み金額を表示"/]
        O --> L2@{ shape: notch-pent, label: "ループ1" }
        L2 --> E(["終了"])
    end
    subgraph sub["税込み金額を求める"]
        S2(["開始（金額）"]) --> D{"金額 >= 0"}
        D -- Yes --> B["税込み = 金額 × 1.1 を四捨五入"]
        D -- No --> B2["税込み = 0"]
        B --> E2(["戻る（税込み）"])
        B2 --> E2
    end

from decimal import Decimal, ROUND_HALF_UP


def with_tax(amount):                 # 定義済み処理「税込み金額を求める」
    if amount >= 0:
        return int((Decimal(amount) * Decimal("1.1")).quantize(Decimal("1"), rounding=ROUND_HALF_UP))
    return 0


amounts = [1000, 255, -50]            # 金額のリストを入力
for amount in amounts:                # ループ1：金額を1件ずつ取り出す
    print(with_tax(amount))           # 税込み金額を表示

1100
281
0

• 主処理の側は「税込み金額を求める」という名前だけを書き、計算の中身には触れません。
• 呼び出される側は、端子に「開始（受け取る値）」「戻る（返す値）」を書くと、関数の引数と戻り値に対応します。
• 定義済み処理の名前と、呼び出される側の流れ図の名前を同じにしておくと、対応を取り違えません。

Mermaidでエラーになる例と直し方

Mermaidのflowchartでは、小文字の end が subgraph を閉じる予約語です。ノードの名前に使うと次のエラーになります。

flowchart TD
    S(["開始"]) --> A["合計 = 単価 × 数量 (税抜き)"]
    A --> end

Error: Parse error on line 3:
...量 (税抜き)"]    A --> end
----------------------^
Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'end'

この記事のほかのコードのように、E(["終了"]) と別の名前（E）を付けて表示名を引用符の中に書けば描画できます。かっこや記号を含む表示名も、引用符で囲んでおくとそのまま表示されます。

読みやすいフローチャートにするチェックリスト

よくある質問

Q. JIS X 0121の記号をすべて覚える必要はありますか？ A. 手順を表す流れ図なら、端子・処理・判断・データ・線の5つに、ループ端と定義済み処理を足した7つでほとんど描けます。磁気テープやカードなどの媒体を表す記号は、システム全体のデータの流れを表す図で使うもので、必要になったときに一覧表を見れば足ります。

Q. 繰り返しは、判断記号とループ端記号のどちらで描くのがよいですか？ A. どちらもJIS X 0121にある記号で、同じ処理を表せます。流れを1歩ずつ追わせたいときは判断記号、繰り返しが多く線の交差を減らしたいときはループ端記号が向いています。1つの図の中では統一してください。

Q. 入力と出力は、どの記号で描きますか？ A. 媒体を決めないときは平行四辺形の「データ」を使います。キーボードからの入力であることを示したいときは「手操作入力」、画面への出力は「表示」、印刷物は「書類」と、媒体に合わせた記号に置きかえられます。

Q. 判断記号の出口は2つまでですか？ A. 規格上は「いくつかの択一的な出口」をもてるので、3つ以上でも描けます。出口が多くて読みにくいときは、判断記号を2段に分けるか、値と行き先の対応を表にまとめて注釈で添えます。

まとめ

• フローチャートの記号は JIS X 0121（ISO 5807 に対応）で決められており、データ記号10・処理記号7・線記号4・特殊記号4の計25種があります。
• よく使うのは端子・処理・判断・データ・線の5つ。繰り返しにループ端、サブルーチンに定義済み処理を足します。
• 流れは上から下、左から右。逆向きの線には矢先を付け、判断記号の出口には必ずラベルを書きます。
• 前判定は判断が処理の前（最小0回）、後判定は判断が処理の後（最小1回）。ひし形の位置と戻る線の行き先で見分けます。
• 繰り返しは判断記号でもループ端記号でも描けます。 戻る線をなくしたいときはループ端、1歩ずつ説明したいときは判断記号を選びます。
• Mermaidでは @{ shape: … } でJISの記号に近い形を指定でき、ループ端は notch-pent、定義済み処理は [[ ]] で書けます。

参考・出典

• JIS X 0121:1986「情報処理用流れ図・プログラム網図・システム資源図記号」（記号の名称と意味。閲覧に使用したページ）: https://kikakurui.com/x0/X0121-1986-01.html
• Mermaid「Flowcharts Syntax」（ノードの形、@{ shape: … } の一覧、v11.3.0以降）: https://mermaid.js.org/syntax/flowchart.html

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。