Extension:Kroki

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

More information about Kroki can be found at https://kroki.io.

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.

Available Diagram Types

The following diagram types are 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'
];

Installation

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

wfLoadExtension( 'Kroki' );

Editors

WikiEditor: To integrate the Kroki insert dialog into the WikiEditor, you also need to load the WikiEditor Extension by using wfLoadExtension( 'WikiEditor' );.

VisualEditor: Similarly, for integrating the Kroki insert dialog into the VisualEditor, the VisualEditor Extension must be loaded. This can be done with wfLoadExtension( 'VisualEditor' );. When using Kroki with the VisualEditor the Math Extension is required. Enable the Math extension in your LocalSetting.phpfile:

wfLoadExtension( 'Math' );

CodeEditor: The dialog boxes include a multiline text input field. If you load the CodeEditor Extension using wfLoadExtension( 'CodeEditor' );, you will achieve an enhanced editing experience.

Configuration

$wgKrokiServerEndpoint = "https://kroki.io";

In order to address privacy issues and optimize performance, you can modify the server endpoint URL for the Kroki Service. 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...">

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