クロキ

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 Dockerイメージには、いくつかのダイアグラム・ライブラリが最初から含まれています。完全なリストについては、asciidoctor-kroki READMEを参照してください。サポートされているライブラリは以下のとおりです：

追加のダイアグラム・ライブラリを使用したい場合は、Krokiコンパニオン・コンテナの起動方法について、Krokiのインストールをお読みください。

GitLabでKrokiを有効にします。

管理エリアの設定からKrokiインテグレーションを有効にする必要があります。そのためには、管理者アカウントでサインインし、以下の手順に従ってください：

  1. 左のサイドバーで、Search を選択するか、次のページに進んでください。
  2. Admin Areaを選択します。
  3. 設定 > 一般に進みます。
  4. Kroki」セクションを展開します。
  5. クロキを有効にするチェックボックスを選択します。
  6. KrokiのURLを入力します。

ダイアグラムの作成

Krokiインテグレーションを有効にして設定すると、区切りブロックを使ってAsciiDocやMarkdownドキュメントにダイアグラムを追加することができます：

  • マークダウン

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

  • アスキードック

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

  • reStructuredText

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

  • テキスタイル

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

上記のブロックは、ソースがKrokiインスタンスを指すHTML画像タグに変換されます。Krokiサーバーが正しく設定されていれば、ブロックの代わりに美しいダイアグラムがレンダリングされるはずです：

PlantUML diagram

Krokiは12以上のダイアグラム・ライブラリをサポートしています。以下は 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)" ];
}
....

GraphViz diagram

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

C4 PlantUML diagram

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

Diagram