Kroki

プラン: Free、Premium、Ultimate
提供形態: GitLab Self-Managed、GitLab Dedicated

Krokiインテグレーションを使用すると、AsciiDoc、Markdown、reStructuredText、Textile内でdiagrams-as-コードを作成できます。

GitLabでKrokiを有効にする

管理者の設定からKrokiインテグレーションを有効にする必要があります。これを行うには、管理者アカウントでサインインし、次の手順に従います:

左側のサイドバーの下部で、管理者を選択します。
設定 > 一般に移動します。
Krokiセクションを展開します。
Krokiを有効にするチェックボックスを選択します。
Kroki URLを入力します（例: https://kroki.io）。

Krokiサーバー

Krokiを有効にすると、GitLabは図をKrokiのインスタンスに送信し、画像として表示します。無料のパブリッククラウドインスタンスhttps://kroki.ioを使用するか、独自のインフラストラクチャにKrokiをインストールすることができます。Krokiをインストールしたら、設定でKroki URLを更新して、インスタンスを指すようにしてください。

Krokiの図はGitLabに保存されないため、標準のGitLabアクセス制御およびその他のユーザー権限の制限は適用されません。

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モデル（PlantUMLを使用）
Structurizr（C4 モデルのダイアグラムに最適）
Svgbob
UMlet
Vega
Vega-Lite
WaveDrom

追加の図書ライブラリを使用する場合は、Krokiコンパニオンコンテナを開始する方法について、Krokiのインストールをお読みください。

図を作成する

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サーバーが正しく設定されている場合、ブロックの代わりに、優れた図がレンダリングされます:

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