概要
このサイトは静的サイトジェネレーターHugoを利用しています。
Mermaidダイアグラムを表示したいので調べてみました。
環境
- hugo v0.103.0+extended darwin/arm64
- デプロイ先はAzure Static Web Apps
- workflow fileにenv指定なし
方法
組み込み方はHugoの公式にありました。
https://gohugo.io/content-management/diagrams/#mermaid-diagrams
v0.93.0以降で使えるようです。
コードブロックに書けるのがありがたいです。
%%{init: {'theme': 'dark'}}%%
sequenceDiagram
autonumber
participant A as Alice
participant B as Bob
A->>B:Hi Bob
B-->>A:Hi Alice
シーケンス図便利なんですよね。 素晴らしい！
デザインも変更できます。
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0', 'fontSize': '20px', 'lineColor':'#778899','textColor':'#778899'}}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
おすすめです。