Kroki

通过 Kroki 集成，你可以在 AsciiDoc、Markdown、reStructuredText 和 Textile 中创建代码即图表。

在极狐GitLab 中启用 Kroki#

你需要从 管理员 区域的设置中启用 Kroki 集成。使用管理员账户登录并按照以下步骤操作：

1. 在右上角，选择 管理员。
2. 进入 设置 > 通用。
3. 展开 Kroki 部分。
4. 勾选 启用 Kroki 复选框。
5. 输入 Kroki 地址，例如 https://kroki.io。

为防止浏览器将图表内容发送到外部 Kroki 服务，请使用 图表代理。

Kroki 服务器#

启用 Kroki 后，极狐GitLab 会将图表发送到 Kroki 实例以将其显示为图像。你可以使用免费的公共云实例 https://kroki.io，也可以在自己的基础设施上 安装 Kroki。 安装 Kroki 后，请确保在设置中更新 Kroki 地址 以指向你的实例。

Docker#

使用 Docker，运行如下容器：

shell
docker run -d --name kroki -p 8080:8000 yuzutech/kroki

Kroki 地址 是运行该容器的主机名。

yuzutech/kroki Docker 镜像开箱即支持大多数图表类型。完整列表请参阅 Kroki 安装文档。

支持的图表类型包括：

• Bytefield
• D2
• DBML
• Ditaa
• Erd
• GraphViz
• Nomnoml
• PlantUML
  • C4 model (通过 PlantUML)
• Structurizr (非常适合 C4 模型图表)
• Svgbob
• UMlet
• Vega
• Vega-Lite
• WaveDrom

如果你想使用其他图表库，请阅读 Kroki 安装文档 了解如何启动 Kroki 配套容器。

创建图表#

启用并配置 Kroki 集成后，你可以使用分隔块在 AsciiDoc 或 Markdown 文档中添加图表：

• Markdown

  markdown
  ```plantuml
  Bob -> Alice : hello
  Alice -> Bob : hi
  ```

• AsciiDoc

  plaintext
  [plantuml]
  ....
  Bob->Alice : hello
  Alice -> Bob : hi
  ....

• reStructuredText

  plaintext
  .. code-block:: plantuml
  
    Bob->Alice : hello
    Alice -> Bob : hi

• Textile

  plaintext
  bc[plantuml]. Bob->Alice : hello
  Alice -> Bob : hi

这些分隔块会被转换为 HTML 图片标签，其源指向 Kroki 实例。如果 Kroki 服务器配置正确，应该会渲染出漂亮的图表，而不是代码块：

Kroki 支持十多种图表库。以下是一些 AsciiDoc 示例：

GraphViz

plaintext
1[graphviz]
2....
3digraph finite_state_machine {
4  rankdir=LR;
5  node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
6  node [shape = circle];
7  LR_0 -> LR_2 [ label = "SS(B)" ];
8  LR_0 -> LR_1 [ label = "SS(S)" ];
9  LR_1 -> LR_3 [ label = "S($end)" ];
10  LR_2 -> LR_6 [ label = "SS(b)" ];
11  LR_2 -> LR_5 [ label = "SS(a)" ];
12  LR_2 -> LR_4 [ label = "S(A)" ];
13  LR_5 -> LR_7 [ label = "S(b)" ];
14  LR_5 -> LR_5 [ label = "S(a)" ];
15  LR_6 -> LR_6 [ label = "S(b)" ];
16  LR_6 -> LR_5 [ label = "S(a)" ];
17  LR_7 -> LR_8 [ label = "S(b)" ];
18  LR_7 -> LR_5 [ label = "S(a)" ];
19  LR_8 -> LR_6 [ label = "S(b)" ];
20  LR_8 -> LR_5 [ label = "S(a)" ];
21}
22....

C4 (基于 PlantUML)

plaintext
1[c4plantuml]
2....
3@startuml
4!include C4_Context.puml
5
6title System Context diagram for Internet Banking System
7
8Person(customer, "Banking Customer", "A customer of the bank, with personal bank accounts.")
9System(banking_system, "Internet Banking System", "Allows customers to check their accounts.")
10
11System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
12System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information.")
13
14Rel(customer, banking_system, "Uses")
15Rel_Back(customer, mail_system, "Sends e-mails to")
16Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
17Rel(banking_system, mainframe, "Uses")
18@enduml
19....

Nomnoml

plaintext
1[nomnoml]
2....
3[Pirate|eyeCount: Int|raid();pillage()|
4  [beard]--[parrot]
5  [beard]-:>[foul mouth]
6]
7
8[<abstract>Marauder]<:--[Pirate]
9[Pirate]- 0..7[mischief]
10[jollyness]->[Pirate]
11[jollyness]->[rum]
12[jollyness]->[singing]
13[Pirate]-> *[rum|tastiness: Int|swig()]
14[Pirate]->[singing]
15[singing]<->[rum]
16....