Kroki 图表
- 引入于 13.7 版本
- 对 reStructuredText 和 Textile 文档的支持引入于 13.12
在极狐GitLab 中启用并配置 Kroki 集成后,您可以使用它在 AsciiDoc、Markdown、reStructuredText 和 Textile 文档中创建图表。
Kroki 服务器
启用 Kroki 后,极狐GitLab 会将图表发送到 Kroki 实例,来将它们显示为图像。
您可以使用免费的公共云实例 https://kroki.io
,也可以在自己的基础架构上安装 Kroki。
安装 Kroki 后,请确保更新服务器 URL 指向您的实例。
Docker
使用 Docker,通过以下命令运行一个容器:
docker run -d --name kroki -p 8080:8000 yuzutech/kroki
Kroki URL 是运行容器的服务器的主机名。
yuzutech/kroki
镜像包含以下开箱即用的图表库:
- Bytefield
- Ditaa
- Erd
- GraphViz
- Nomnoml
-
PlantUML
- C4 model (with PlantUML)
- Svgbob
- UMlet
- Vega
- Vega-Lite
- WaveDrom
如果您想使用其他图表库,请阅读 Kroki 安装,了解如何启动 Kroki 配套容器。
在极狐GitLab 中启用 Kroki
您需要从管理中心的设置中启用 Kroki 集成。 请使用管理员帐户登录并按照以下步骤操作:
- 在顶部栏上,选择 主菜单 > 管理员。
- 转到 设置 > 通用。
- 展开 Kroki 部分。
- 选中 启用 Kroki 复选框。
- 输入 Kroki URL。
创建图表
启用和配置 Kroki 集成后,您可以开始使用分隔块,将图表添加到 AsciiDoc 或 Markdown 文档中:
-
Markdown
```plantuml Bob -> Alice : hello Alice -> Bob : hi ```
-
AsciiDoc
[plantuml] .... Bob->Alice : hello Alice -> Bob : hi ....
-
reStructuredText
.. code-block:: plantuml Bob->Alice : hello Alice -> Bob : hi
-
Textile
bc[plantuml]. Bob->Alice : hello Alice -> Bob : hi
上面的代码块被转换为一个 HTML 图像标签,其中 source 指向 Kroki 实例。如果正确配置了 Kroki 服务器,应该会呈现一个漂亮的图表而不是代码块:
Kroki 支持十几个图表库。以下是 AsciiDoc 的一些示例:
GraphViz
[graphviz]
....
digraph finite_state_machine {
rankdir=LR;
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
node [shape = circle];
LR_0 -> LR_2 [ label = "SS(B)" ];
LR_0 -> LR_1 [ label = "SS(S)" ];
LR_1 -> LR_3 [ label = "S($end)" ];
LR_2 -> LR_6 [ label = "SS(b)" ];
LR_2 -> LR_5 [ label = "SS(a)" ];
LR_2 -> LR_4 [ label = "S(A)" ];
LR_5 -> LR_7 [ label = "S(b)" ];
LR_5 -> LR_5 [ label = "S(a)" ];
LR_6 -> LR_6 [ label = "S(b)" ];
LR_6 -> LR_5 [ label = "S(a)" ];
LR_7 -> LR_8 [ label = "S(b)" ];
LR_7 -> LR_5 [ label = "S(a)" ];
LR_8 -> LR_6 [ label = "S(b)" ];
LR_8 -> LR_5 [ label = "S(a)" ];
}
....
C4 (based on PlantUML)
[c4plantuml]
....
@startuml
!include C4_Context.puml
title System Context diagram for Internet Banking System
Person(customer, "Banking Customer", "A customer of the bank, with personal bank accounts.")
System(banking_system, "Internet Banking System", "Allows customers to check their accounts.")
System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information.")
Rel(customer, banking_system, "Uses")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
Rel(banking_system, mainframe, "Uses")
@enduml
....
Nomnoml
[nomnoml]
....
[Pirate|eyeCount: Int|raid();pillage()|
[beard]--[parrot]
[beard]-:>[foul mouth]
]
[<abstract>Marauder]<:--[Pirate]
[Pirate]- 0..7[mischief]
[jollyness]->[Pirate]
[jollyness]->[rum]
[jollyness]->[singing]
[Pirate]-> *[rum|tastiness: Int|swig()]
[Pirate]->[singing]
[singing]<->[rum]
....