Skip to main content

アーキテクチャ図

(Architecture Diagram)

サンプル​

@startuml
package "ユーザー側" {
  [Webブラウザ]
}
database データベース
cloud 外部API
package "サーバー側" {
  [Webブラウザ] --> [Webサーバー]
  [Webサーバー] --> [アプリケーションサーバー]
  [アプリケーションサーバー] --> データベース
  [アプリケーションサーバー] --> 外部API
}
@enduml
PlantUML diagram

全体の設定​

タイトル​

タイトルを定義できます。

title 新基盤構築計画
PlantUML diagram

ヘッダ​

ヘッダを定義できます。

header 新基盤構築計画
PlantUML diagram

フッタ​

フッタを定義できます。

footer フッタ
PlantUML diagram

キャプション​

キャプションを定義できます。

caption キャプション
PlantUML diagram

すべて組み合わせると...​

PlantUML diagram

コンポーネント​

[]で囲むか、componentに続けてコンポーネント名を記載する事でコンポーネントを定義できます。

[コンポーネント名]
PlantUML diagram
component コンポーネント名
PlantUML diagram

パッケージ​

アーキテクチャ図では、関連する要素の論理的なグループとしてパッケージを使うようです。

package Sample {
  component コンポーネント名
}
PlantUML diagram

ノード​

物理的または論理的な実行環境を表します。

node ノード名
PlantUML diagram

データストア​

database データストア
PlantUML diagram

クラウド​

cloud "クラウド"
PlantUML diagram

単方向の関連​

[ブラウザ] --> [サーバ]
PlantUML diagram

双方向の関連​

[ブラウザ] <-> [サーバ]
PlantUML diagram

抽象的な依存​

[ブラウザ] ..> [サーバ]
PlantUML diagram

ラベル​

[ブラウザ] --> [サーバ] : HTTP通信
PlantUML diagram

太線​

[ブラウザ] == [サーバ]
PlantUML diagram