熊莓

Kroki 图表

Published: | Updated: | 300 words | 2 mins

使用代码块在你的 Hugo 站点中嵌入图表的 SVG 图像,使用免费的 Kroki 服务。与需要客户端渲染的 JavaScript 解决方案不同,这种方法在页面中嵌入 SVG 图像。1

感谢 @jmooringKroki

性能

根据 @jmooring博客,你可以编辑你的站点配置来存储 getresource 缓存以优化性能。

1[caches]
2  [caches.getresource]
3    dir = ":resourceDir/_gen"
4    maxAge = -1

不要忘记将 resources 目录检入源代码控制。

图表类型

以下图表类型可用:

示例

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```
diagram

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```
diagram

更多示例

前往 Kroki 示例页面查看更多内容。

#Markdown   #Code   #Diagram   #Mermaid   #Kroki   #Plantuml   #D2   #C4  

通过邮件回复此帖 ↪