マーメイド

マーメイドダイアグラムは、remark-mermaid ↗とmermaid ↗を使用して追加されます。

flowchart LR
accTitle: トンネルダイアグラム
accDescr: このダイアグラムの例には、3つのトンネルルートがあります。トンネル1と2は最優先で、トンネル3は二次的です。

subgraph Cloudflare
direction LR
B[Cloudflare <br/> データセンター]
C[Cloudflare <br/> データセンター]
D[Cloudflare <br/> データセンター]
end

A((ユーザー)) --> Cloudflare --- E[Anycast IP]
E[Anycast IP] --> F[/トンネル 1 / <br/> 優先度 1/] --> I{{顧客 <br/> データセンター/ <br/> ネットワーク 1}}
E[Anycast IP] --> G[/トンネル 2 / <br/> 優先度 1/] --> J{{顧客 <br/> データセンター/ <br/> ネットワーク 2}}
E[Anycast IP] --> H[/トンネル 3 / <br/> 優先度 2/] --> K{{顧客 <br/> データセンター/ <br/> ネットワーク 3}}

```mermaid
flowchart LR
accTitle: トンネルダイアグラム
accDescr: このダイアグラムの例には、3つのトンネルルートがあります。トンネル1と2は最優先で、トンネル3は二次的です。

subgraph Cloudflare
direction LR
B[Cloudflare <br/> データセンター]
C[Cloudflare <br/> データセンター]
D[Cloudflare <br/> データセンター]
end

A((ユーザー)) --> Cloudflare --- E[Anycast IP]
E[Anycast IP] --> F[/トンネル 1 / <br/> 優先度 1/] --> I{{顧客 <br/> データセンター/ <br/> ネットワーク 1}}
E[Anycast IP] --> G[/トンネル 2 / <br/> 優先度 1/] --> J{{顧客 <br/> データセンター/ <br/> ネットワーク 2}}
E[Anycast IP] --> H[/トンネル 3 / <br/> 優先度 2/] --> K{{顧客 <br/> データセンター/ <br/> ネットワーク 3}}
```