Mermaid ドキュメント

Appearance

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

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

例 ​

Code:
mermaid

構文 ​

アーキテクチャの基本要素は、グループ、サービス、エッジ、およびジャンクションです。

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

アーキテクチャ図を開始するには、キーワード architecture-beta を使用し、その後にグループ、サービス、エッジ、ジャンクションを続けます。各基本要素は任意の順序で宣言できますが、識別子が別のコンポーネントによって以前に宣言されていることを確認する必要があります。

グループ ​

グループを宣言するための構文は次の通りです：

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 へ進むエッジを作成します。

なお、groupId をエッジの指定に使用することはできず、{group} 修飾子はグループ内のサービスのみに使用できます。

ジャンクション ​

ジャンクションは、エッジ間の潜在的な4方向の分岐として機能する特別なタイプのノードです。

ジャンクションを宣言するための構文は次の通りです：

junction {junction id} (in {parent id})?
Code:
mermaid

アイコン ​

デフォルトでは、アーキテクチャ図は以下のアイコンをサポートしています：cloud、database、disk、internet、server。 ユーザーは iconify.design で利用可能な200,000以上のアイコンを使用するか、手順に従ってカスタムアイコンを追加できます here。

アイコンがインストールされた後、アーキテクチャ図で使うことができ、フォーマット "name:icon-name" を使用します。ここで、name はアイコンパックを登録するときに使う値です。

Code:
mermaid