Mermaid アーキテクチャ図のチートシート

サービスと、そのサービスが属するグループ、そしてサービス間のエッジ。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

サービス

丸括弧がアイコンを、角括弧がラベルを選び、id はほかの行が指す先です。

architecture-beta
  service web(server)[Web app]
  service db(database)[Database]
  service cache(disk)[Cache]

グループはサービスを入れる箱です。in キーワードでサービスを中に入れます。

architecture-beta
  group api(cloud)[API]
  service web(server)[Web] in api
  service db(database)[DB] in api

コロン前の文字がエッジの出発側、コロン後の文字が到着側を示します。

architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  service c(server)[Service C]
  a:R --> L:b
  a:B --> T:c

交差点は複数のエッジが集まる点です。専用の箱は描きません。

architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  junction hub
  a:R -- L:hub
  hub:R -- L:b