Extension: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: Note: |
$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 yourextensions/
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
[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/.