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 |
|
Alternative text description of the 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"];
}
----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 |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Each diagram library supports one or more output formats. Consult the Kroki documentation for the supported formats per library.