Syntax
You can declare positional and named attributes when using the block or macro form.
Positional attributes
Block form
-
The first positional attribute specifies the diagram type.
-
The second optional positional attribute assigns a file name (i.e., target) to the generated diagram.
-
The third optional positional attribute specifies the image format.
[mermaid,abcd-flowchart,svg]
----
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
----In the above example, the diagram type is mermaid, the target is abcd-flowchart, and the image format is svg.
Named attributes
You can combine positional and named attributes:
.PlantUML example
[plantuml#diagAliceBob,alice-and-bob,svg,role=sequence]
----
alice -> bob
----In this example, an id is assigned using #diagAliceBob after the diagram type, and a role is defined using role=sequence.
With the macro form:
vegalite::chart.vlite[svg,role=chart,opts=interactive]A positional attribute declares the image format, and two named attributes define the role and opts.
Attributes
The following attributes are used by the built-in HTML 5 converter:
| Attribute | Description |
|---|---|
|
File name for the generated image |
|
Image width |
|
Image height |
|
Image format (default: |
|
Fallback image if the diagram cannot be rendered |
|
URL to link the image to |
|
Image float ( |
|
Image alignment |
|
CSS class(es) to apply to the image, in addition to the |
|
Block title, displayed as the figure caption |
|
Caption prefix displayed before the block title, replacing the automatic |
The image alt text is derived from title when set, then from target, and falls back to Diagram.
|
Options
The following options are available when using the SVG format:
| Option | Description |
|---|---|
|
Inline the SVG content directly in the HTML |
|
Make the SVG interactive (e.g., for Vega-Lite) |
|
Cancel any default options |
Options are defined using the options attribute (or opts for short):
[blockdiag,opts=inline]
----
blockdiag {
Kroki -> generates -> "Block diagrams";
Kroki [color = "greenyellow"];
"Block diagrams" [color = "pink"];
}
----|
To inline an SVG, the converter must be able to read its content.
When the |
Substitutions
Use the subs attribute to apply AsciiDoc substitutions to the diagram source before it is sent to the Kroki server.
For example, subs=attributes substitutes document attributes:
:node-color: greenyellow
[blockdiag,subs=attributes]
----
blockdiag {
Kroki -> generates -> "Block diagrams";
Kroki [color = "{node-color}"];
}
----
Do not include the specialcharacters substitution: it replaces <, >, and & with HTML entities, which would make the diagram source invalid.
|
Diagram-specific options
Any named attribute that is not a built-in attribute is forwarded to the Kroki server as a diagram-specific option (query parameter). This allows you to pass diagram type options supported by Kroki directly on the block or macro.
Consult the Kroki documentation for the available options per diagram type.
For example, Structurizr workspaces often define multiple views.
By default, only the last view is rendered.
Use the view-key option to specify which view to render:
[structurizr,view-key=SystemContext]
----
workspace {
model {
user = person "User"
system = softwareSystem "Software System"
user -> system "Uses"
}
views {
systemContext system "SystemContext" {
include *
}
}
}
----Supported diagram types
Kroki currently supports the following diagram libraries:
| Library | Block/macro name |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Output formats
Each diagram library supports one or more output formats: svg, png, jpeg, pdf, base64, and the text formats txt, atxt, and utxt.
Consult the Kroki documentation for the supported formats per library.
When a text format is requested, the diagram is rendered as a literal block containing its textual representation (e.g., ASCII art for a PlantUML sequence diagram) instead of an image:
[plantuml,format=txt]
----
alice -> bob
----