システム構成図の書き方と例 Mermaidテンプレートと記号一覧

システム構成図とは、システムを形づくるサーバー・ネットワーク機器・データベースなどの要素と、そのつながりを1枚にまとめた図です。 設計書の最初のほうに置かれ、「どこに何があり、どこからどこへ通信するのか」を関係者全員が同じ絵で確認するために使います。

この記事では、Web三層・バッチ連携・冗長構成・拠点間接続の4パターンを、コピーして書き換えるだけで使えるMermaidのテンプレートで示します。flowchart の subgraph を使う書き方と、アイコンつきの architecture 図の両方を載せ、記号の早見表、線種と矢印の凡例ルール、記載項目のチェックリストを表にまとめます。

確認環境：Mermaid 12.1.0（@mermaid-js/mermaid-cli 12.0.0 と Chromium で描画）。掲載したMermaidのコードは、すべて図として出力できることを確認しています。例に出てくるホスト名とIPアドレスは架空のもので、外部向けのアドレスには文書用として予約されている範囲（192.0.2.0/24、198.51.100.0/24、203.0.113.0/24）を使っています。

システム構成図の早見表（種類・記号・線）

論理構成図・物理構成図・ネットワーク構成図の違い比較表

1枚にすべてを書き込まず、目的ごとに図を分けると読みやすくなります。同じシステムでも「論理構成図で全体をつかみ、ネットワーク構成図でアドレスを確かめる」という読み方ができます。

機器の記号早見表（Mermaidでの形）

機器の絵は使うツールや会社によって異なるため、図ごとに凡例を付けて「この形はこの機器」と決めておくのが確実です。この記事のテンプレートでは、Mermaid の flowchart で出せる形を次のように割り当てています。

形の種類には限りがあるので、同じ形を2つの機器に使うときは、必ずノードの文字に機器の種類（FW、L3スイッチ など）を書きます。

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

flowchart LR
  rt(("ルーター"))
  l3{{"L3スイッチ"}}
  l2["L2スイッチ"]
  fw{{"FW"}}
  lb[/"LB"\]
  sv["サーバー"]
  db[("DB")]
  st[["ストレージ"]]
  cl(["端末"])
  rt --- l3 --- l2 --- sv
  fw --- lb --- db
  st --- cl

architecture 図では、形の代わりにアイコンを指定します。標準で使えるアイコンは次の5つです。

線種と矢印の凡例ルール

線の意味は図によって変わりやすいので、使った線だけを凡例に書いて図の隅に置きます。

矢印の向きは「データが流れる向き」と「接続を始める向き」の2通りの決め方があります。FWの許可設定と照らし合わせやすいのは接続を始める向きです。どちらにしたかを凡例に1行で書いておくと、読む人が迷いません。

凡例そのものもMermaidで描けます。

flowchart LR
  subgraph legend["凡例"]
    direction LR
    a1["A"] -->|"実線：通信（矢印は接続を始める向き）"| b1["B"]
    a2["A"] -.->|"点線：管理・監視・起動"| b2["B"]
    a3["A"] ==>|"太線：データの複製・専用の経路"| b3["B"]
    a4["A"] ---|"矢印なし：物理的な結線"| b4["B"]
  end

パターン1：Web三層構成のテンプレート

利用者からの通信をFWとLBで受け、Webサーバー、APサーバー、DBサーバーの3つの層で処理する構成です。

flowchart（subgraphでセグメントを囲む）

flowchart TB
  user(["利用者のPC・スマートフォン"])
  inet(("インターネット"))
  subgraph dmz["DMZ 192.0.2.0/24"]
    fw{{"FW fw01"}}
    lb[/"LB lb01 192.0.2.10"\]
  end
  subgraph websub["Webセグメント 10.0.1.0/24"]
    web1["web01 10.0.1.11"]
    web2["web02 10.0.1.12"]
  end
  subgraph apsub["APセグメント 10.0.2.0/24"]
    ap1["ap01 10.0.2.11"]
    ap2["ap02 10.0.2.12"]
  end
  subgraph dbsub["DBセグメント 10.0.3.0/24"]
    db[("db01 10.0.3.11")]
  end
  user -->|HTTPS 443| inet --> fw --> lb
  lb -->|HTTP 8080| web1 & web2
  web1 & web2 -->|HTTP 8081| ap1 & ap2
  ap1 & ap2 -->|PostgreSQL 5432| db

architecture図（アイコンで見せる）

architecture-beta
  group dmz(cloud)[DMZ]
  group inner(server)[内部ネットワーク]

  service inet(internet)[インターネット]
  service lb(server)[LB lb01] in dmz
  service web(server)[Web web01 web02] in inner
  service ap(server)[AP ap01 ap02] in inner
  service db(database)[DB db01] in inner
  service bk(disk)[バックアップ] in inner

  inet:R --> L:lb
  lb:R --> L:web
  web:R --> L:ap
  ap:R --> L:db
  db:B --> T:bk

architecture 図の線の書き方にはラベルの指定が無いため、プロトコルとポート番号は図の下に通信一覧の表として添えます。

番号  接続元 接続先 プロトコル   ポート
1   利用者 lb01    HTTPS   443/tcp
2   lb01    web01、web02 HTTP    8080/tcp
3   web01、web02 ap01、ap02   HTTP    8081/tcp
4   ap01、ap02   db01    PostgreSQL  5432/tcp

パターン2：バッチ連携のテンプレート

あるシステムが出力したファイルを、夜間のバッチで別のシステムへ取り込む構成です。線に番号を振って、処理の順番と時刻を書くと、流れが読み取りやすくなります。

flowchart

flowchart LR
  subgraph src["受注システム"]
    app1["order-ap01"]
  end
  subgraph hub["連携基盤 10.0.5.0/24"]
    fs[["ファイルサーバー file01"]]
    job["ジョブ管理 job01"]
    batch["バッチ batch01"]
  end
  subgraph dst["在庫システム"]
    db[("stock-db01")]
    app2["stock-ap01"]
  end
  app1 -->|"① SFTP 22 毎日 01:00 orders.csv"| fs
  job -.->|"② 起動 01:30"| batch
  fs -->|"③ 読み込み"| batch
  batch -->|"④ PostgreSQL 5432 取り込み"| db
  batch -.->|"⑤ 結果通知 HTTPS 443"| app2

実線はデータの受け渡し、点線は起動と通知です。ラベルに丸数字や空白を含めるときは、ラベル全体を二重引用符で囲みます。

architecture図

architecture-beta
  group src(server)[受注システム]
  group hub(cloud)[連携基盤]
  group dst(server)[在庫システム]

  service app1(server)[order ap01] in src
  service fs(disk)[ファイルサーバー file01] in hub
  service batch(server)[バッチ batch01] in hub
  service job(server)[ジョブ管理 job01] in hub
  service db(database)[stock db01] in dst

  app1:R --> L:fs
  fs:R --> L:batch
  job:B --> T:batch
  batch:R --> L:db

パターン3：冗長構成のテンプレート

LBを稼働と待機の2台、Webサーバーを2つのゾーンに1台ずつ、DBをプライマリとレプリカに分けた構成です。稼働・待機の別と、複製の向きを図から読めるようにします。

flowchart

flowchart TB
  inet(("インターネット"))
  subgraph front["フロント 192.0.2.0/24"]
    lb1[/"lb01 稼働"\]
    lb2[/"lb02 待機"\]
    vip(["仮想IP 192.0.2.10"])
  end
  subgraph zoneA["ゾーンA 10.0.1.0/24"]
    web1["web01"]
    db1[("db01 プライマリ")]
  end
  subgraph zoneB["ゾーンB 10.0.2.0/24"]
    web2["web02"]
    db2[("db02 レプリカ")]
  end
  inet -->|HTTPS 443| vip
  vip --> lb1
  vip -.-> lb2
  lb1 <-.->|死活監視| lb2
  lb1 --> web1 & web2
  web1 & web2 -->|5432| db1
  db1 ==>|レプリケーション 5432| db2

architecture図

1本の線を2つに分けたいときは junction（分岐点）を置きます。

architecture-beta
  group zonea(cloud)[ゾーンA]
  group zoneb(cloud)[ゾーンB]

  service inet(internet)[インターネット]
  service lb(server)[LB 仮想IP]
  junction j
  service web1(server)[web01] in zonea
  service db1(database)[db01 プライマリ] in zonea
  service web2(server)[web02] in zoneb
  service db2(database)[db02 レプリカ] in zoneb

  inet:R --> L:lb
  lb:R -- L:j
  j:T --> B:web1
  j:B --> T:web2
  web1:R --> L:db1
  web2:R --> L:db2
  db1:B --> T:db2

パターン4：拠点間接続のテンプレート

本社・支社・データセンターをVPNでつなぐ構成です。ネットワーク機器が主役なので、機器どうしは矢印なしの線（結線）でつなぎ、VPNは太い両向きの矢印で区別します。

flowchart

flowchart LR
  subgraph hq["本社 192.168.10.0/24"]
    pc1["PC 60台"]
    l2a["L2スイッチ hq-sw01"]
    l3a{{"L3スイッチ hq-l3-01"}}
    fwa{{"FW hq-fw01"}}
    rta(("ルーター hq-rt01"))
  end
  subgraph br["支社 192.168.20.0/24"]
    pc2["PC 15台"]
    l2b["L2スイッチ br-sw01"]
    rtb(("ルーター br-rt01"))
  end
  subgraph dc["データセンター 10.0.0.0/16"]
    rtc(("ルーター dc-rt01"))
    fwc{{"FW dc-fw01"}}
    srv["業務サーバー群"]
  end
  net(("インターネット"))
  pc1 --- l2a --- l3a --- fwa --- rta
  pc2 --- l2b --- rtb
  rtc --- fwc --- srv
  rta ---|"203.0.113.1"| net
  rtb ---|"203.0.113.65"| net
  rtc ---|"198.51.100.1"| net
  rta <==>|"IPsec VPN"| rtc
  rtb <==>|"IPsec VPN"| rtc

architecture図

architecture-beta
  group hq(server)[本社]
  group br(server)[支社]
  group dc(cloud)[データセンター]

  service pc1(server)[PC 60台] in hq
  service rta(server)[ルーター hq rt01] in hq
  service pc2(server)[PC 15台] in br
  service rtb(server)[ルーター br rt01] in br
  service net(internet)[インターネット VPN]
  service rtc(server)[ルーター dc rt01] in dc
  service srv(server)[業務サーバー群] in dc

  pc1:R -- L:rta
  pc2:R -- L:rtb
  rta:R <--> L:net
  rtb:T <--> B:net
  net:R <--> L:rtc
  rtc:R -- L:srv

flowchartとarchitecture図のどちらを使うか

詳細まで書く設計書の図は flowchart、全体像をひと目で伝える図は architecture 図、という使い分けが目安です。architecture 図は名前に beta が付いているとおり書き方が変わる可能性があるので、貼り付け先のMermaidの版で描画されるかを確かめてから使います。

記載項目チェックリスト（ホスト名・IP・ポート・プロトコル）

分類  記載項目    書き方の例   論理  物理  ネットワーク
ノード 役割  Web、AP、DB、バッチ   ○   ○   ○
ノード ホスト名    web01、db01  ○   ○   ○
ノード IPアドレス  10.0.1.11   －   －   ○
ノード 台数・冗長化  2台、稼働／待機、プライマリ／レプリカ ○   ○   ○
ノード OS・ミドルウェアと版 PostgreSQL 16   ○   －   －
ノード 機種・設置場所 ラック番号、ユニット位置    －   ○   －
囲み  セグメント名  DMZ、Webセグメント    ○   －   ○
囲み  サブネット   10.0.1.0/24 －   －   ○
囲み  拠点・ゾーン  本社、ゾーンA ○   ○   ○
線   プロトコル   HTTPS、SFTP、PostgreSQL   ○   －   ○
線   ポート番号   443/tcp、22/tcp、5432/tcp ○   －   ○
線   向き  接続を始める側から受ける側へ  ○   －   ○
線   ケーブル・インターフェース   ポート番号、ケーブルの種類   －   ○   ○
図全体 凡例  形と線の意味  ○   ○   ○
図全体 タイトル・対象範囲   備品予約システム 本番環境   ○   ○   ○
図全体 作成日・版・作成者   2026-10-05 第1.0版    ○   ○   ○

図に書き切れない項目は、図にはホスト名だけを書き、IPアドレスやポートは一覧表に分けると、図も表も読みやすくなります。ホスト一覧のひな形です。

ホスト名    役割  セグメント   IPアドレス  待ち受けポート 備考
lb01    LB  DMZ 192.0.2.10  443/tcp 稼働
web01   Web Webセグメント    10.0.1.11   8080/tcp    
web02   Web Webセグメント    10.0.1.12   8080/tcp    
ap01    AP  APセグメント 10.0.2.11   8081/tcp    
ap02    AP  APセグメント 10.0.2.12   8081/tcp    
db01    DB  DBセグメント 10.0.3.11   5432/tcp    PostgreSQL

システム構成図の書き方（6つの手順）

読みやすい構成図にするポイント

よくある質問

Q. システム構成図とネットワーク構成図は何が違いますか？ A. システム構成図は、システムを形づくる要素とつながりを表す図の総称です。そのうち、セグメントやIPアドレス、経路に焦点を当てたものがネットワーク構成図です。役割とデータの流れに焦点を当てたものは論理構成図と呼びます。

Q. 矢印はどちら向きに引けばよいですか？ A. 接続を始める側から受ける側へ引くと、FWの許可設定と対応させやすくなります。データが流れる向きで引く方法もあるので、どちらで描いたかを凡例に書きます。

Q. Mermaidで機器のアイコンは使えますか？ A. architecture 図では、標準で cloud・database・disk・internet・server の5つのアイコンが使えます。Mermaidの公式ドキュメントには、アイコンパックを登録して種類を増やす方法も書かれています。flowchart では、形と文字で機器を区別します。

Q. 例に使うIPアドレスは何を書けばよいですか？ A. 外部向けのアドレスの例には、文書用に予約されている 192.0.2.0/24、198.51.100.0/24、203.0.113.0/24（RFC 5737）を使うと、実在のアドレスと重なりません。

まとめ

• システム構成図は目的ごとに分ける。役割とつながりは論理構成図、機器と配線は物理構成図、セグメントとIPはネットワーク構成図
• Mermaidでは flowchart の subgraph でセグメントを囲む。アイコンで概要を見せたいときは architecture-beta
• 機器の形は図ごとに凡例で決める。同じ形を使うときはノードの文字に機器の種類を書く
• 線は実線＝通信、点線＝管理・監視、太線＝複製や専用の経路、矢印なし＝結線。矢印は接続を始める向き
• 通信の線にはプロトコルとポート番号を書く。architecture 図では通信一覧の表を添える
• 図にはホスト名、表にIPとポートと分けると、どちらも読みやすい
• 凡例・タイトル・作成日と版を付けて、いつ時点のどの環境の図かをはっきりさせる

参考・出典

• Mermaid「Architecture Diagrams Documentation」（group・service・junction・線の書き方、標準アイコン、v11.1.0以降）: https://mermaid.js.org/syntax/architecture.html
• Mermaid「Flowcharts Syntax」（ノードの形、線の種類、subgraph）: https://mermaid.js.org/syntax/flowchart.html
• RFC 5737「IPv4 Address Blocks Reserved for Documentation」: https://www.rfc-editor.org/rfc/rfc5737.html

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