Kroki Plugin for Lume - Wiki

Welcome to the wiki of Kroki Plugin for Lume.

Description

This plugin takes code blocks¹ containing diagram descriptions and replaces them with an <img/> of the diagram. The diagrams are generated by a Kroki server.

Installation

This plugin can be installed through an HTTP import:

import lume from "lume/mod.ts";
import kroki from "https://code.fosterhangdaan.com/foster/lume-plugin-kroki/raw/tag/v1.0.1/mod.ts";

const site = lume();

site.use(kroki());

export default site;

Options

server: URL of the Kroki server.
- type: string
- default: "https://kroki.io"
enabledDiagrams: A list of diagrams to be converted; diagrams not on the list will be untouched. See the Supported Diagrams section for the list of diagram names.
- type: string[]
- default: By default, all supported diagrams are enabled.
format: The preferred output format.
- type: string
- default: "svg"

Self-hosted Kroki Server

To use your own self-hosted Kroki server, set the server option:

site.use(kroki({
  server: "https://kroki.mydomain.com",
}));

Enable Certain Diagrams

To enable only Mermaid, PlantUML, and C4 with PlantUML diagrams:

site.use(kroki({
  enabledDiagrams: [
    "C4 with PlantUML",
    "Mermaid",
    "PlantUML",
  ],
}));

Change Default Format

To set the default output format to PNG:

site.use(kroki({
  format: "png",
}));

Note

Diagrams which do not support the output format will fall-back to "svg".

Usage

Code blocks with the appropriate language label will be converted to an image. Specifying the language of a code block depends on the template engine—examples are provided in this section. Refer to the supported diagrams section for a list of diagram languages.

Markdown

For Markdown, specify the diagram language after the starting triple backticks:

```plantuml
@startuml
May -> Foster: Hi
Foster -> May: Hello
@enduml
```

HTML-Like Template Engines Such as Vento and JSX

Template engines which have HTML-like syntax can specify the language using the class or className attribute:

<pre>
  <code class="language-plantuml">
    @startuml
    Alice -> Bob: Hi
    Bob -> Alice: Hi
    @enduml
  </code>
</pre>

Note

The language name must be prefixed with language-.

Supported Diagrams

A table of supported diagrams—each with their available output formats and language names.

Name	Language	Formats
ActDiag	actdiag	svg, png
BPMN	bpmn	svg
BlockDiag	blockdiag	svg, png
Bytefield	bytefield	svg
C4 with PlantUML	c4plantuml	svg, png
D2	d2	svg
DBML	dbml	svg
Ditaa	ditaa	svg, png
Erd	erd	svg, png, jpeg
Excalidraw	excalidraw	svg
GraphViz	graphviz	svg, png, jpeg
Mermaid	mermaid	svg, png
Nomnoml	nomnoml	svg
NwDiag	nwdiag	svg, png
PacketDiag	packetdiag	svg, png
Pikchr	pikchr	svg
PlantUML	plantuml	svg, png
RackDiag	rackdiag	svg, png
SeqDiag	seqdiag	svg, png
Structurizr	structurizr	svg, png
Svgbob	svgbob	svg
Symbolator	symbolator	svg
TikZ	tikz	svg, png, jpeg
UMlet	umlet	svg, png, jpeg
Vega	vega	svg, png
Vega-Lite	vegalite	svg, png
WaveDrom	wavedrom	svg
WireViz	wireviz	svg, png

<pre><code></code></pre> for HTML, and triple backticks for Markdown. ↩︎

Home

Content

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the page GNU Free Documentation License.