PlantUMLで堅牢なATM現金引き出しシーケンス図を構築する

A 16:10 hero banner styled graphic featuring a clean, modern illustration. The background is subtle and uses glowing accents, circuit board traces, and digital symbols with blues, greens, and white colors. Vertical columns define main participants like "Card Reader", "ATM Interface", "Bank Server", and "Cash Dispenser" across the top. Arrows with numbered steps (1, 2, 3...) indicate the sequential flow of communication, beginning with a "Customer" actor on the left. Key sections highlight the main decision structures using "alt [PIN Invalid] / [PIN Valid]" and "alt [Insufficient Funds] / [Account Approved]", clearly detailing both successful and alternative paths of interaction. No product logos are included. At the very top center, the main title in clean fonts reads "BUILDING A ROBUST ATM SEQUENCE DIAGRAM" with a subtitle "STEP-BY-STEP PLANTUML GUIDE".

システム的な金融取引を設計するには絶対的な明確さが必要です。銀行エンジンの設計、レガシーワークフローの文書化、またはエンジニアリングチームのトレーニングを行っている場合でも、PlantUMLシーケンス図は、システムコンポーネント間の時系列順序付きの相互作用を可視化する最も効果的な方法の一つです。

このチュートリアルでは、私が包括的なATM現金引き出しシーケンス図をPlantUMLを使ってゼロから構築する際の私の正確な思考プロセスを丁寧に説明します。参加者設定、メッセージフロー、エラー処理のためのネストされた条件分岐についてもカバーします—all usingVPasCode、私たちの無料の図としてのコードツールおよびオンラインPlantUMLエディタ.

An ATM Sequence Diagram in PlantUML

 


ステップ1:タイトルと自動ステップ番号の設定

私は常にPlantUML図の作成を、明確なグローバル設定の配置から始めます。ATM引き出しのような金融操作をモデル化する際、処理順序を把握することは開発者と監査担当者にとって非常に重要です。

これを達成するために、私は@startumlタグから始め、説明的なタイトルを定義し、autonumber機能を有効化します。

@startuml
title ATM現金引き出しシーケンス図

autonumber

なぜautonumber?を採用するのか。自動番号付けがなければ、レビュアーはシーケンスラインを手動で追跡して順序を理解しなければなりません。順次番号付けを強制することで、すべてのリクエストとレスポンスが自動的にインデックス付けされ、アーキテクチャレビュー中の参照作業がまったくストレスフリーになります。

ステップ2:アクターとシステム参加者の定義

次に、取引に参加する明確なエンティティを特定します。人間のアクターをバックエンドコンポーネントやハードウェアサブシステムから分離したいと考えます。

メッセージが描画される際にPlantUMLが参加者を暗黙的に宣言するのを許すのではなく、私は上部に明示的に定義します。これにより、アーキテクチャ上の境界を反映した論理的で左から右への順序で参加者が表示されることを保証できます:

actor Customer
participant "ATMインターフェース" as ATM
participant "カードリーダ" as Reader
participant "銀行サーバ" as Bank
participant "現金ディスペンサー" as Dispenser

設計の根拠:

  • アクター Customer: 行動を開始する人間のユーザーを表します。
  • 参加者 ... を別名として: 以下のような短い別名を割り当てるATM, リーダー、および銀行これにより、長い表示文字列を繰り返すことなく、スクリプトの残り部分が明確で読みやすくなります。
  • 以下のように配置することでリーダーの間にCustomerATMインターフェース、私はソフトウェアUIの操作の前にカードを挿入する物理的な順序を正確に反映しています。

ステップ3:初期認証フローのモデル化

参加者を宣言した後、私はハッピーパスの初期化をマッピングし始めます:カードの挿入、データの読み取り、PINの入力促進、中央銀行サーバーへの連絡。

Customer → Reader: ATMカードを挿入
Reader → ATM: カード詳細を読み取り
ATM → Customer: PINを入力するよう促す
Customer → ATM: PINを入力
ATM → Bank: カードとPINの検証

同期メッセージが実線の矢印(->)を使用していることに注目してください。カードハードウェアがATMソフトウェアをトリガーし、ユーザーに促し、入力をキャプチャし、認証資格情報を安全に銀行サーバーに渡します。

ステップ4:altブロックを用いた認証の分岐構造

現実世界のシステムは失敗することがあり、シーケンス図はエラー状態を明示的に伝える必要があります。ATMが銀行に検証を要求した後、2つの結果が生じる可能性があります:認証が失敗するか、成功するかです。

PlantUMLで条件論理を表現するため、私はalt / else / endブロック:

alt PINが無効
    銀行 --> ATM: 認証失敗
    ATM -> 顧客: 「無効なPIN」メッセージを表示
    ATM -> 読取装置: カードを排出
    読取装置 --> 顧客: カードを返却
else PINが有効
    銀行 --> ATM: 認証成功
    ATM -> 顧客: 取引選択と金額入力を促す
    顧客 -> ATM: 「出金」を選択し金額を入力
    ATM -> 銀行: 出金承認要求(金額)
    ...
end

使用した主な技術:

  • 点線の戻り矢印(-->)は、呼び出し元コンポーネントに非同期の応答メッセージを示す。
  • 明確なブロックラベル、たとえば [PINが無効] および [PINが有効]は、例外処理の終了方法(例:エラーメッセージの表示、カードの排出、ハードウェアの返却)をソフトウェア開発者に即座に伝える。

ステップ5:口座承認および現金支給の論理のネスト

認証が確認された後、ユーザーは出金を要求する。しかし、銀行は口座残高および1日の上限を確認する必要がある。この2次的な検証を表現するために、私は「PINが有効」の分岐内に2番目のaltブロックをネストする。PINが有効分岐内に。

資金が不足している場合、取引は安全に終了する。承認された場合、銀行は口座から引き落とし、現金自動支払機を起動し、現金を提示し、カードを排出し、任意の印刷された領収書を提供する。

    alt 資金不足 / 1日上限超過
        銀行 --> ATM: 取引拒否
        ATM -> 顧客: エラーメッセージを表示
        ATM -> 読取装置: カードを排出
        読取装置 --> 顧客: カードを返却
    else 口座承認済み
        銀行 -> 銀行: 口座残高を引き落とす
        銀行 --> ATM: 取引承認

        ATM -> 支給装置: 現金を支給
        支給装置 --> ATM: 現金準備完了
        ATM -> 顧客: 現金を提示
        顧客 -> ATM: 現金を受け取る

        ATM -> 読取装置: カードを排出
        読取装置 --> 顧客: カードを返却
        ATM -> 顧客: 領収書を印刷(任意)
    end

プロのヒント:内部呼び出し Bank -> Bank: 口座残高を引き落とす。PlantUMLにおける自己参照の矢印は、外部ネットワークメッセージングを伴わない内部バックエンド状態の更新を強調するのに理想的である。


完全なPlantUMLスクリプト

以下は、当社のATM現金出金シーケンス図の完全な、組み立てられたソースコードである。このコードを、お気に入りの無料のPlantUMLエディタに直接コピー&ペーストして、編集またはベクターグラフィックスをレンダリングできる。

@startuml
title ATM現金引き出しシーケンス図

autonumber
actor カスタマー
participant "ATMインターフェース" as ATM
participant "カードリーダー" as Reader
participant "銀行サーバー" as Bank
participant "現金ディスペンサー" as Dispenser

カスタマー -> リーダー: ATMカードを挿入
リーダー -> ATM: カード情報を読み取り
ATM -> カスタマー: PIN入力の促し
カスタマー -> ATM: PINを入力
ATM -> Bank: カードとPINの認証

alt PINが無効
    Bank --> ATM: 認証失敗
    ATM -> カスタマー: 「無効なPIN」と表示
    ATM -> リーダー: カードを排出
    リーダー --> カスタマー: カードを返却
else PINが有効
    Bank --> ATM: 認証成功
    ATM -> カスタマー: 取引選択と金額入力の促し
    カスタマー -> ATM: 「出金」を選択し金額を入力

    ATM -> Bank: 出金承認要求(金額)

    alt 払戻金不足 / 1日の上限超過
        Bank --> ATM: 取引拒否
        ATM -> カスタマー: エラーメッセージを表示
        ATM -> リーダー: カードを排出
        リーダー --> カスタマー: カードを返却
    else アカウント承認済み
        Bank -> Bank: アカウント残高を減額
        Bank --> ATM: 取引承認

        ATM -> ディスペンサー: 現金を出金
        ディスペンサー --> ATM: 現金準備完了
        ATM -> カスタマー: 現金を提示
        カスタマー -> ATM: 現金を受け取る

        ATM -> リーダー: カードを排出
        リーダー --> カスタマー: カードを返却
        ATM -> カスタマー: レシート印刷(オプション)
    end
end

@enduml

The ATM Sequence Diagram editing in VPasCode PlantUML editor

なぜVPasCodeでシーケンス図をレンダリングするのですか?

コードを使って複雑な図を描くには、面倒なローカル環境のセットアップや手動でのコマンドラインコンパイルを必要とすべきではありません。VPasCodeVisual Paradigmによるもので、ブラウザに直接即時レンダリングと強力なAI支援を提供します:

  • 自動フォーマット検出:PlantUML、Mermaid、Graphviz、またはD2のスクリプトを貼り付けるだけで、VPasCodeは即座にDSLフォーマットを認識し、リアルタイムでレンダリングします。
  • AIによるコードエラー修正:構文エラーで詰まった?クリックしてください「AIで修正」透過的な並べ替え比較を表示し、構文エラーを自動的に修復できます。
  • 多言語AI翻訳:国際的な技術チーム向けに、図のラベルやメッセージを数秒で簡単に翻訳できます。
  • 高解像度エクスポート:技術文書やスライド資料用に、クリーンでスケーラブルなSVGベクターグラフィックまたは高解像度PNG画像をダウンロードできます。

無料で図をコードとしてモデリングを開始

テキストノートを出版用のシーケンス図に変換する準備はできましたか?オンラインのPlantUMLエディタVPasCode上で試してみてください—100%無料で即時ライブレンダリングが可能です。

VPasCode無料エディタを起動する →

上部へスクロール