架構圖文件 (v11.1.0+)

在 mermaid-js 的環境中，架構圖用於展示雲端或 CI/CD 部署中常見的服務與資源之間的關係。在架構圖中，服務（節點）由邊連接。相關的服務可以放置在群組中，以更好地說明它們的組織方式。

範例

語法

架構的建構區塊是 groups、services、edges 和 junctions。

為了支援元件，圖示藉由將圖示名稱用 () 包圍來宣告，而標籤則藉由將文字用 [] 包圍來宣告。

要開始架構圖，請使用關鍵字 architecture-beta，後面接著您的群組、服務、邊和交點。雖然這 3 個建構區塊可以依任何順序宣告，但必須注意確保識別符號先前已由另一個元件宣告。

群組

宣告群組的語法是

group {group id}({icon name})[{title}] (in {parent id})?

放在一起

group public_api(cloud)[Public API]

建立一個識別為 public_api 的群組，使用圖示 cloud，並帶有標籤 Public API。

此外，可以使用可選的 in 關鍵字將群組放置在群組內

group private_api(cloud)[Private API] in public_api

服務

宣告服務的語法是

service {service id}({icon name})[{title}] (in {parent id})?

放在一起

service database1(database)[My Database]

建立識別為 database1 的服務，使用圖示 database，並帶有標籤 My Database。

如果服務屬於群組，則可以透過可選的 in 關鍵字將其放置在其中

service database1(database)[My Database] in private_api

邊

宣告邊的語法是

{serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?

邊的方向

邊從服務的哪一側出來，是透過將冒號 (:) 新增至連接到箭頭的服務的一側，並新增 L|R|T|B 來指定的

例如

db:R -- L:server

在服務 db 和 server 之間建立一個邊，邊從 db 的右側和 server 的左側出來。

db:T -- L:server

在服務 db 和 server 之間建立一個 90 度邊，邊從 db 的頂部和 server 的左側出來。

箭頭

可以透過在左側的方向之前新增 <，和/或在右側的方向之後新增 >，將箭頭新增至邊的每一側。

例如

subnet:R --> L:gateway

建立一個箭頭指向 gateway 服務的邊

從群組出來的邊

若要讓邊從群組指向另一個群組或另一個群組中的服務，可以在 serviceId 之後新增 {group} 修飾符。

例如

service server[Server] in groupOne
service subnet[Subnet] in groupTwo

server{group}:B --> T:subnet{group}

建立一個從 groupOne 旁邊的 server 出來，並進入 groupTwo 旁邊的 subnet 的邊。

重要的是要注意，groupId 不能用於指定邊，而且 {group} 修飾符只能用於群組中的服務。

交點

交點是一種特殊的節點，它充當邊之間潛在的 4 向分割。

宣告交點的語法是

junction {junction id} (in {parent id})?

圖示

預設情況下，架構圖支援下列圖示：cloud、database、disk、internet、server。使用者可以使用 iconify.design 中提供的 200,000 多個圖示中的任何一個，或透過遵循此處的步驟新增自己的自訂圖示。

安裝圖示後，可以使用 "name:icon-name" 格式在架構圖中使用它們，其中 name 是註冊圖示包時使用的值。