Extension:Kroki

MediaWiki extensions manual

Kroki Release status: stable
Implementation	Tag
Description	Turn text into dynamic visuals: Use Kroki to create a variety of diagrams seamlessly integrated into your wiki pages.
Author(s)	(CptLausebaertalk)
Latest version	1.0.0 (2024-06-08)
MediaWiki
Database changes	No
License	GNU General Public License 3.0
Download	GitHub: project page git repository URL [help ] commit history Note: No localisation updates are provided by translatewiki.net .
Parameters $krokiServerEndpoint
Tags <kroki>
Hooks used ParserFirstCallInit OutputPageParserOutput EditPage::showEditForm:initial SoftwareInfo

The Kroki extension leverages the unified API offered by kroki.io to create diagrams directly from textual descriptions.

The diagrams, stored in the text form, can be version-controlled and saved directly in your wiki pages.

Moreover, they can be quickly updated or replaced when needed. The images will not be managed in the MediaWiki database.

This extension provide a dialog for WikiEditor and also for the VisualEditor.

Installation

• Download and place the file(s) in a directory called Kroki in your extensions/ folder.
• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'Kroki' );
  $krokiServerEndpoint = "https://kroki.io";
  

•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Configuration parameters

• $krokiServerEndpoint sets the endpoint to use.

The default value is https://kroki.io. In order to address privacy issues and optimize performance, you should modify the server endpoint URL for the Kroki Service and use your own instance of kroki.

This can be done by adjusting the $krokiServerEndpoint in the LocalSettings.php file.

For setting up the service on your own, official Docker images are available at "https://github.com/yuzutech/kroki".

Refer to the Kroki Documentation for more details on setup process: Kroki Documentation

Usage

This extension adds the <kroki> tag.

The `lang` attribute defines the diagram type to be used for rendering the content provided.

An example in wikitext looks like this:

<kroki lang="blockdiag">
blockdiag {
  Kroki -> generates -> "Block diagrams";
  Kroki -> is -> "very easy!";

  Kroki [color = "greenyellow"];
  "Block diagrams" [color = "pink"];
  "very easy!" [color = "orange"];
}
</kroki>

The code above will render an image with SVG content formatted as a data URL.

<img src="data:image/svg+xml;base64,PHN2ZyB2aW...">

Available Diagram Types

The following diagram types are currently supported:

$diagramTypes = [
  'blockdiag',
  'bpmn',
  'bytefield',
  'seqdiag',
  'actdiag',
  'nwdiag',
  'packetdiag',
  'rackdiag',
  'c4plantuml',
  'd2',
  'dbml',
  'ditaa',
  'erd',
  'excalidraw',
  'graphviz',
  'mermaid',
  'nomnoml',
  'pikchr',
  'plantuml',
  'structurizr',
  'svgbob',
  'symbolator',
  'tikz',
  'vega',
  'vegalite',
  'wavedrom',
  'wireviz'
];

For additional information, refer to the Kroki documentation at https://docs.kroki.io/kroki/.