アーキテクチャ図のドキュメント (v11.1.0以降)

mermaid-jsのコンテキストでは、アーキテクチャ図は、クラウドまたはCI/CDデプロイメント内で一般的に見られるサービスとリソース間の関係を示すために使用されます。アーキテクチャ図では、サービス（ノード）はエッジで接続されています。関連するサービスは、グループ内に配置して、それらがどのように編成されているかをより明確に示すことができます。

例

構文

アーキテクチャの構成要素は、`グループ`、`サービス`、`エッジ`、`ジャンクション`です。

サポートコンポーネントの場合、アイコンはアイコン名を`()`で囲むことで宣言され、ラベルはテキストを`[]`で囲むことで宣言されます。

アーキテクチャ図を開始するには、キーワード`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]

アイコン`database`を使用し、ラベル`My Database`を持つ、`database1`として識別されるサービスを作成します。

サービスがグループに属している場合、オプションの`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はアイコンパックの登録時に使用される値です。