{{< details >}}

  • Tier: 基础版, 专业版, 旗舰版
  • Offering: 私有化部署

{{< /details >}}

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

在极狐GitLab 中启用 Kroki

你需要在 管理员 区域的设置中启用 Kroki 集成。要做到这一点，请使用管理员账户登录并按照以下步骤操作：

  1. 在左侧边栏底部，选择 管理员。
  2. 前往 设置 > 常规。
  3. 展开 Kroki 部分。
  4. 选择 启用 Kroki 复选框。
  5. 输入 Kroki URL，例如 https://kroki.io。

Kroki 服务器

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

{{< alert type=”note” >}}

Kroki 图表不存储在极狐GitLab 上，因此标准的极狐GitLab 访问控制和其他用户权限限制不适用。

{{< /alert >}}

Docker

使用 Docker，运行如下的容器：

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

Kroki URL 是运行容器的服务器的主机名。

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

支持的图表类型包括：

  • Bytefield
  • D2
  • DBML
  • Ditaa
  • Erd
  • GraphViz
  • Nomnoml
  • PlantUML
    • C4 model (with PlantUML)
  • Structurizr (great for C4 Model diagrams)
  • Svgbob
  • UMlet
  • Vega
  • Vega-Lite
  • WaveDrom

创建图表

启用并配置 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

上述块将转换为源指向 Kroki 实例的 HTML 图像标签。如果 Kroki 服务器正确配置，这应该会渲染出一个漂亮的图表而不是块：

A PlantUML diagram rendered from example code.

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)" ];
}
....

A GraphViz diagram generated from example code.

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
....

A C4 PlantUML diagram generated from example code.

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]
....

A Nomnoml diagram generated from example code.