Jump to content

Extension:Kroki

From mediawiki.org
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
$krokiServerEndpoint
<kroki>

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

[edit]
  • 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";
    
  • Yes Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Configuration parameters

[edit]
  • $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

[edit]

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

[edit]

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