MediaWiki extensions manual

Kroki Release status: stableCategory:Stable extensions
Implementation	Tag Category:Tag extensions
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.1 (2025-01-24)
MediaWiki	Category:Extensions without MediaWiki version
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 . Category:Extensions in GitHub version control
Parameters $wgKrokiServerEndpoint
Tags ‎<kroki>
Hooks used ParserFirstCallInit Category:ParserFirstCallInit extensions OutputPageParserOutput Category:OutputPageParserOutput extensions EditPage::showEditForm:initial Category:EditPage::showEditForm:initial extensions SoftwareInfo Category:SoftwareInfo extensions

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' );
  $wgKrokiServerEndpoint = "https://kroki.io";
  

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

Configuration parameters

• $wgKrokiServerEndpoint 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 $wgKrokiServerEndpoint 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...">

$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'
];