github.com/asciidoctor/asciidoctor-kroki @v0.18.1
Chat with this repoWhat it actually does AI analysis from the code graph — generated when you open this
README
🖍 Asciidoctor Kroki Extension
An extension for Asciidoctor.js to convert diagrams to images using Kroki!
Install
Node.js
Install the dependencies:
$ npm i asciidoctor asciidoctor-kroki
Create a file named kroki.js with following content and run it:
const asciidoctor = require('@asciidoctor/core')()
const kroki = require('asciidoctor-kroki')
const input = 'plantuml::hello.puml[svg,role=sequence]'
kroki.register(asciidoctor.Extensions) // <1>
console.log(asciidoctor.convert(input, { safe: 'safe' }))
const registry = asciidoctor.Extensions.create()
kroki.register(registry) // <2>
console.log(asciidoctor.convert(input, { safe: 'safe', extension_registry: registry }))
<1> Register the extension in the global registry
<2> Register the extension in a dedicated registry
Browser
Install the dependencies:
$ npm i asciidoctor asciidoctor-kroki
Create a file named kroki.html with the following content and open it in your browser:
<html lang="en">
<head>
<title>Asciidoctor x Kroki</title>
<meta charset="utf-8">
<script src="https://github.com/asciidoctor/asciidoctor-kroki/raw/v0.18.1/node_modules/@asciidoctor/core/dist/browser/asciidoctor.js"></script>
<script src="https://github.com/asciidoctor/asciidoctor-kroki/raw/v0.18.1/node_modules/asciidoctor-kroki/dist/browser/asciidoctor-kroki.js"></script>
</head>
<body>
<script>
const input = `Let's take an example with a _GraphViz_ "Hello World":
[graphviz]
....
digraph G {
Hello->World
}
....`
const asciidoctor = Asciidoctor()
const registry = asciidoctor.Extensions.create()
AsciidoctorKroki.register(registry) // <1>
const result = asciidoctor.convert(input, { safe: 'safe', extension_registry: registry })
document.getElementById('content').innerHTML = result
</script>
</body>
</html>
<1> Register the extension in a dedicated registry
❗ IMPORTANT:
If you want to reference a diagram file in a browser environment you will need to define the base directory using the base_dir option.
In addition, you will also need to provide an implementation to read a binary file synchronously for a given path.
You can find an implementation based on XMLHttpRequest in the source code: https://github.com/ggrossetie/asciidoctor-kroki/blob/9585b969014a1894d0c9fb76df10e1e8c66ce2b2/test/browser/test.js#L2-L34.
Once httpGet is defined, here's how we should configure the extension:
const registry = asciidoctor.Extensions.create()
AsciidoctorKroki.register(registry, {
vfs: {
read: (path, encoding = 'utf8') => httpGet(path, encoding),
exists: (_) => false,
add: (_) => { /* no-op */ }
}
})
const input = 'plantuml::hello.puml[svg,role=sequence]'
asciidoctor.convert(input, { safe: 'safe', base_dir: window.location.origin, extension_registry: registry })
Ruby
Install the dependency:
$ gem install asciidoctor-kroki
Require the library using the --require (or -r) option from the Asciidoctor CLI:
$ asciidoctor -r asciidoctor-kroki doc.adoc
Antora Integration
If you are using Antora, you can integrate Kroki in your documentation site.
-
Install the extension in your playbook project:
$ npm i asciidoctor-kroki
-
Register the extension in your playbook file:
yaml asciidoc: extensions: - asciidoctor-krokihttps://docs.antora.org/antora/2.3/playbook/configure-asciidoc/#extensions
-
Enjoy!
💡 TIP:
You can use the kroki-fetch-diagram option to download the images from Kroki at build time.
In other words, while viewing pages you won't rely on Kroki anymore.
However, in Antora, this is not currently compatible with inline SVG images.
asciidoc:
attributes:
kroki-fetch-diagram: true
Usage
In your AsciiDoc document, you can either write your diagram inline or, alternatively, you can make a reference to the diagram file using macro form or with the include directive.
Here's an example where we declare a GraphViz diagram directly in our AsciiDoc document using the block syntax:
[graphviz]
....
digraph foo {
node [style=rounded]
node1 [shape=box]
node2 [fillcolor=yellow, style="rounded,filled", shape=diamond]
node3 [shape=record, label="{ a | b | c }"]
node1 -> node2 -> node3
}
....
In the example below, we are using the vegalite macro to reference a file named chart.vlite:
vegalite::chart.vlite[svg,role=chart,opts=interactive]
Finally, we can use the include directive to reference a diagram file:
[plantuml,alice-bob,svg,role=sequence]
....
include::alice-bob.puml[]
....
References and includes with Antora
If you use this Asciidoctor Kroki Extension in combination with Antora, all references and includes MUST use Antora Resource IDs. The .puml-files are best placed in the partials-directory of the modules.
Block macros
vegalite::partial$chart.vlite[svg,role=chart,opts=interactive]
Includes
[plantuml,alice-bob,svg,role=sequence]
----
include::partial$alice-bob.puml[]
----
Syntax
You can declare positional and named attributes when using the block or the macro form.
Positional attributes
When using the block form:
- The first positional attribute specifies the diagram type (see below for a complete list).
- The second optional positional attribute assigns a file name (i.e. target) to the generated diagram. Currently, the value of this attribute is ignored, and an auto-generated hash will be used as file name for caching purposes (see #48).
- The third optional positional attribute specifies the image format.
Example:
[mermaid,abcd-flowchart,svg]
....
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
....
In the above example,
the diagram type is mermaid,
the file name (i.e. target) is abcd-flowchart,
and the image format is svg.
When using the macro form:
- The first optional positional attribute specifies the image format.
Example:
vegalite::chart.vlite[svg]
In the above example,
the diagram type is vegalite,
the target is chart.vlite,
and the image format is svg.
Named attributes
You can also use both positional and named attributes. Here's an example:
.PlantUML example
[plantuml#diagAliceBob,alice-and-bob,svg,role=sequence]
....
alice -> bob
....
As you can see, we specified an id using the syntax #diagAliceBob just after the diagram type, and we are also using a named attribute to assign a role using role=sequence.
Here's another example using the macro form:
vegalite::chart.vlite[svg,role=chart,opts=interactive]
We are using a positional attribute to declare the image format and two named attributes to define the role and options.
Attributes
It's important to note that not all attributes are used in all converters. Here's a list of all attributes used in the built-in HTML 5 converter:
targetwidthheightformat(defaultsvg)fallbacklinkfloatalignroletitle(used to define an alternative text description of the diagram)
Options
In addition, the following options are available when using the SVG format:
inlineinteractivenone(used for cancelling defaults)
Options can be defined using options attribute (or opts for short):
[blockdiag,opts=inline]
....
blockdiag {
Kroki -> generates -> "Block diagrams";
Kroki [color = "greenyellow"];
"Block diagrams" [color = "pink"];
}
....
Supported diagram types
Kroki currently supports the following diagram libraries:
- ActDiag:
actdiag - BlockDiag:
blockdiag - BPMN:
bpmn - Bytefield:
bytefield - C4 (PlantUML):
c4plantuml - D2:
d2 - DBML:
dbml - Ditaa:
ditaa - ERD:
erd - Excalidraw:
excalidraw - GraphViz:
graphviz - Mermaid:
mermaid - Nomnoml:
nomnoml - NwDiag:
nwdiag - PacketDiag:
packetdiag - Pikchr:
pikchr - PlantUML:
plantuml - RackDiag:
rackdiag - SeqDiag:
seqdiag - SVGBob:
svgbob - Symbolator:
symbolator - UMLet:
umlet - Vega:
vega - Vega-Lite:
vegalite - WaveDrom:
wavedrom - Structurizr:
structurizr - Diagrams.net:
diagramsnet(only available via Using Your Own Kroki)
Each diagram libraries support one or more output formats. Consult the Kroki documentation to find out which formats are supported.
Configuration
| Attribute name | Description | Default value |
|---|---|---|
kroki-server-url |
The URL of the Kroki server (see "Using Your Own Kroki") | https://kroki.io |
kroki-fetch-diagram |
Define if we should download (and save on the disk) the images from the Kroki server. |
This feature is not available when running in the browser. | false
| kroki-http-method | Define how we should get the image from the Kroki server. Possible values:
- `get`: always use GET requests
- `post`: always use POST requests
- `adaptive`: use a POST request if the URI length is longer than `kroki-max-uri-length` (default 4000) characters, otherwise use a GET request
| adaptive |
| kroki-plantuml-include | A file that will be included at the top of all PlantUML diagrams as if !include file was used. This can be useful when you want to define a common skin for all your diagrams. The value can be a path or a URL. | |
| kroki-plantuml-include-paths | Search path(s) that will be used to resolve !include file additionally to current diagram directory, similar to PlantUML property plantuml.include.path. Please use directory delimiter ; (Windows) or : (Unix) for multiple paths, e.g.: "c:/docu/styles;c:/docu/library" or "~/docu/styles:~/docu/library" | |
| kroki-max-uri-length | Define the max URI length before using a POST request when using adaptive HTTP method (kroki-http-method) | 4000
❗ IMPORTANT:
kroki-fetch-diagram and kroki-plantuml-include are only available when safe mode is server or lower.
If you want to learn more about Asciidoctor safe modes: https://docs.asciidoctor.org/asciidoctor/latest/safe-modes/
Default configuration
By default, images are generated as SVG when possible.
To alter this, set the kroki-default-format attribute:
:kroki-default-format: png
You can unset this with :kroki-default-format!: or :kroki-default-format: svg.
ℹ️ NOTE: An AsciiDoc attribute can be defined
Core symbols most depended-on inside this repo
Shape
Languages
Modules by API surface
For agents
$ claude mcp add asciidoctor-kroki \
-- python -m otcore.mcp_server <graph>