使用代码块在你的 Hugo 站点中嵌入图表的 SVG 图像,使用免费的 Kroki 服务。与需要客户端渲染的 JavaScript 解决方案不同,这种方法在页面中嵌入 SVG 图像。1
性能
根据 @jmooring 的博客,你可以编辑你的站点配置来存储 getresource
缓存以优化性能。
1[caches]
2 [caches.getresource]
3 dir = ":resourceDir/_gen"
4 maxAge = -1
不要忘记将 resources
目录检入源代码控制。
图表类型
以下图表类型可用:
blockdiag
- BlockDiagbpmn
- BPMNbytefield
- Bytefieldseqdiag
- SeqDiagactdiag
- ActDiagnwdiag
- NwDiagpacketdiag
- PacketDiagrackdiag
- RackDiagc4plantuml
- C4 with PlantUMLd2
- D2dbml
- DBMLditaa
- Ditaaerd
- Erdexcalidraw
- Excalidrawgraphviz
- GraphVizmermaid
- Mermaidnomnoml
- Nomnomlpikchr
- Pikchrplantuml
- PlantUMLstructurizr
- Structurizrsvgbob
- Svgbobsymbolator
- Symbolatortikz
- TikZumlet
- UMletvega
- Vegavegalite
- Vega-Litewavedrom
- WaveDromwireviz
- WireViz
示例
D2
1```kroki {type=d2}
2# Actors
3hans: Hans Niemann
4
5defendants: {
6 mc: Magnus Carlsen
7 playmagnus: Play Magnus Group
8 chesscom: Chess.com
9 naka: Hikaru Nakamura
10
11 mc -> playmagnus: Owns majority
12 playmagnus <-> chesscom: Merger talks
13 chesscom -> naka: Sponsoring
14}
15
16# Accusations
17hans -> defendants: 'sueing for $100M'
18
19# Offense
20defendants.naka -> hans: Accused of cheating on his stream
21defendants.mc -> hans: Lost then withdrew with accusations
22defendants.chesscom -> hans: 72 page report of cheating
23```
Mermaid
1```kroki {type=mermaid flexoki=paper}
2sequenceDiagram
3 participant Alice
4 participant Bob
5 Alice->John: Hello John, how are you?
6 loop Healthcheck
7 John->John: Fight against hypochondria...
8 end
9 Note right of John: Rational thoughts prevail...
10 John-->Alice: Great!
11 John->Bob: How about you?
12 Bob-->John: Jolly good!
13```
更多示例
前往 Kroki 示例页面查看更多内容。