HugoテーマのBeautifulhugoでは、シーケンス図作成ライブラリのmermaid.jsが既に組み込まれてますので、ショートタグを指定して、mermaidの書式で記述するだけで、シーケンス図が表示されますね。
もし、テーマに組み込まれていない場合には、 「Hugoにmermaidを組み込んでみた 」の記事を参考にしてみると良いでしょう。
簡単なサンプル
graph LR
A[ローカル] -->|git push| B(GitLab.com)
B --> C{Netlify}
ガントチャート
公式から引用
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
Basic sequence diagram
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?