---

Macro Compatibility

---

Usage

See https://kroki.io/#support for examples of Kroki images you can insert.

---

Parameter	Type	Presence	Purpose	Options	Default
value	String	Mandatory	The value. See Kroki documentation for support.	N/A	N/A
imageHeightCm	Double	Conditional	The image height in centimetres. If set, then 'imageWidthCm' must also be.	N/A	N/A
imageWidthCm	Double	Conditional	The image width in centimetres. If set, then 'imageHeightCm' must also be.	N/A	N/A
clipBottom	Double	Optional	The number of pixels to clip from the bottom.	N/A	N/A
clipLeft	Double	Optional	The number of pixels to clip from the left.	N/A	N/A
clipRight	Double	Optional	The number of pixels to clip from the right.	N/A	N/A
clipTop	Double	Optional	The number of pixels to clip from the top.	N/A	N/A
comment	String	Optional	Add a comment to make your document template more readable. The comment is discarded in the output document.	N/A	N/A
description	String	Optional	The description for visually-impaired users. This text also displays when the user hovers the mouse over the image in Word or a PDF viewer.	N/A	N/A
errorOnOverflow	Boolean	Optional	Should NCalc expression evaluation throw error on Overflow	true false	true
failureText	String	Optional	The text to display should the macro fail to execute. Note that a poorly-specified macro (e.g. omitting mandatory parameters) will still result in an error message.	N/A	N/A
fileExtension	String	Optional	Force the file extension (used by the renderer). You can specify it with or without the initial period e.g. both png and .png are valid. Supported: svg, png, jpg, jpeg, gif, webp, tiff, bmp	N/A	svg
hAlign	PowerPointImageHorizontalAlign	Optional	For PowerPoint only, the ability to horizontally align images produced by macros, with vertical lines.	Center Left Right	N/A
horizontalPositionAlignment	HorizontalPositionAlignment	Optional	The horizontal position alignment.	Left Inline Center Right Inside Outside	Left
horizontalPositionRelativeTo	HorizontalPositionRelativeTo	Optional	What the horizontal position is relative to.	Inline Margin Column Page InsideMargin OutsideMargin LeftMargin RightMargin	Inline
if	String	Optional	The condition that must be true in order for the macro to be executed/evaluated. Must either evaluate to true or false, for example: "3+5=8" or "contains('abcd', 'z').	N/A	true
mode	MacroMode	Optional	The mode in which variables are stored. In the legacy mode (default for Schedules), the variable created is a string and formatted. In the normal mode (default for Report Studio), the output variable is stored as a strongly-typed object, e.g. an Int32 or a List etc., rather than a formatted string.	Legacy Normal	Legacy
obfuscation	ObfuscationType	Optional	Obfuscation type. Use obfuscation to write reports where sensitive data is hidden. When used, ReportMagic guarantees that the same input string will map to the same output string for the whole of the report (but the next time the report runs, it will most likely map to a different value). If you use obfuscation, the property in your macro will not show up and instead, you will see a fake item of the obfuscation type chosen.	None UkTown DeviceName Company IpAddress PrivateIpAddress	None
opacityPercent	Double	Optional	The image opacity (0 is transparent, 100 is solid).	From 0 to 100	100
options	String	Optional	The diagram options. For example size^640x480;no-transparency	N/A	N/A
pageHeightPercent	Double	Optional	The page height percentage.	From 0 to 300	N/A
pageWidthPercent	Double	Optional	The page width percentage.	From 0 to 300	N/A
title	String	Optional	The image title for visually-impaired users.	N/A	N/A
titleHeadingLevel	Int32	Optional	The title heading level. Don't specify if no heading is required.	N/A	N/A
type	Kroki.KrokiType	Optional	The diagram type.	AutoDetect Blockdiag Bpmn Bytefield Seqdiag Actdiag Nwdiag Packetdiag Rackdiag C4plantuml Ditaa Erd Excalidraw Graphviz Mermaid Momnoml Pikchr Plantuml Structurizr Svgbob Vega Vegalite Wavedrom	AutoDetect
vAlign	PowerPointImageVerticalAlign	Optional	For PowerPoint only, the ability to vertically align images produced by macros, with horizontal lines.	Bottom Middle Top	N/A
verticalPositionAlignment	VerticalPositionAlignment	Optional	The Vertical position alignment.	Top Inline Center Bottom Inside Outside	Top
verticalPositionRelativeTo	VerticalPositionRelativeTo	Optional	What the vertical position is relative to.	Inline Page Paragraph Margin BottomMargin InsideMargin OutsideMargin TopMargin	Inline
warning	String	Optional	If specified, adds a warning message for this macro. This is processed as an NCalc, and the warning message will ALWAYS be present and will be the value of the evaluated NCalc expression.	N/A	N/A
wrapping	Wrapping	Optional	Image wrapping.	Inline BehindText	Inline

---

Examples (9)

Example 1:

[Kroki.Image: value=`digraph G {Hello->World}`, pageWidthPercent=10]

---

Example 2:

[Kroki.Image: value=`digraph { rankdir=LR; Start[label="Start here",color="blue",fillcolor="yellow"]; a -> b -> c -> a [label="adv.",weight=3.0;color=red,penwidth=3.0]; d -> c -> d; Start -> c; Start -> a; { rank=same; a, Start } }`, pageWidthPercent=100]

---

Example 3:

[Kroki.Image: value=`digraph {

rankdir=LR;

r1[label="Router 1"];

r2[label="Router 2 (failed)",color="red"];

s1[label="Switch 1"];

s2[label="Switch 2"];

s3[label="Switch 3"];

s4[label="Switch 4 (failed)",color="red"];

vmha[label="VM Host A"];

vmhb[label="VM Host B",color="red"];

VM5[color="red"];

VM6[color="red"];

VM7[color="red"];

VM8[color="red"];

VM9[color="red"];

VM10[color="red"];

Internet -> r1;

Internet -> r2;

r1 -> s1;

r2 -> s2;

s1 -> s2 ->s1;

s1 -> s3;

s2 -> s3;

s1 -> s4;

s3 -> vmha;

s4 -> vmhb;

vmha -> VM1;

vmha -> VM2;

vmha -> VM3;

vmha -> VM4;

vmha -> VM5;

vmhb -> VM6;

vmhb -> VM7;

vmhb -> VM8;

vmhb -> VM9;

vmhb -> VM10;

{ rank=same; s1, s2 }

{ rank=same; s3, s4 }

}`, pageWidthPercent=100]

---

Example 4:

[Kroki.Image: value=`blockdiag {
Kroki -> generates -> "Block diagrams";
Kroki -> is -> "very easy!";
Kroki [color = "lightblue"];
"Block diagrams" [color = "pink"];
"very easy!" [color = "orange"];
}`,
pageWidthPercent=100]

---

Example 5:

[=: `'@startmindmap\nskinparam monochrome reverse\n+ OS\n++ Ubuntu\n+++ Linux Mint\n+++ Kubuntu\n+++ Lubuntu\n+++ KDE Neon\n++ LMDE\n++ SolydXK\n++ SteamOS\n++ Raspbian\n-- Windows 95\n-- Windows 98\n-- Windows NT\n--- Windows 8\n--- Windows 10\n@endmindmap'`, =>MindMapValue]
[Kroki.Image: value={=MindMapValue}, pageWidthPercent=100]

---

Example 6:

[=: `'nwdiag {\n  network dmz {\n    address = "210.x.x.x/24"\n\n    web01 [address = "210.x.x.1"];\n    web02 [address = "210.x.x.2"];\n  }\n  network internal {\n    address = "172.x.x.x/24";\n\n    web01 [address = "172.x.x.1"];\n    web02 [address = "172.x.x.2"];\n    db01;\n    db02;\n  }\n}'`, =>NetworkDiagram]

[Kroki.Image: value={=NetworkDiagram}, pageWidthPercent=100]

---

Example 7:

[=: `'@startuml\n!include C4_Container.puml\n\nLAYOUT_TOP_DOWN()\nLAYOUT_WITH_LEGEND()\n\ntitle Container diagram for Internet Banking System\n\nPerson(customer, Customer, "A customer of the bank, with personal bank accounts")\n\nSystem_Boundary(c1, "Internet Banking") {\n    Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")\n    Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")\n    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")\n    ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")\n    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")\n}\n\nSystem_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")\nSystem_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")\n\nRel(customer, web_app, "Uses", "HTTPS")\nRel(customer, spa, "Uses", "HTTPS")\nRel(customer, mobile_app, "Uses")\n\nRel_Neighbor(web_app, spa, "Delivers")\nRel(spa, backend_api, "Uses", "async, JSON/HTTPS")\nRel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")\nRel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC")\n\nRel_Back(customer, email_system, "Sends e-mails to")\nRel_Back(email_system, backend_api, "Sends e-mails USING", "sync, SMTP")\nRel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")\n@enduml'`, =>DiagramCode]
[Kroki.Image: value={=DiagramCode}, pageWidthPercent=100]

---

Example 8:

[=: `'{\n  "$schema": "https://vega.github.io/schema/vega/v5.json",\n  "width": 800,\n  "height": 400,\n  "padding": 0,\n\n  "data": [\n    {\n      "name": "table",\n      "values": [\n        "Declarative visualization grammars can accelerate development, facilitate retargeting across platforms, and allow language-level optimizations. However, existing declarative visualization languages are primarily concerned with visual encoding, and rely on imperative event handlers for interactive behaviors. In response, we introduce a model of declarative interaction design for data visualizations. Adopting methods from reactive programming, we model low-level events as composable data streams from which we form higher-level semantic signals. Signals feed predicates and scale inversions, which allow us to generalize interactive selections at the level of item geometry (pixels) into interactive queries over the data domain. Production rules then use these queries to manipulate the visualization�s appearance. To facilitate reuse and sharing, these constructs can be encapsulated as named interactors: standalone, purely declarative specifications of interaction techniques. We assess our model�s feasibility and expressivity by instantiating it with extensions to the Vega visualization grammar. Through a diverse range of examples, we demonstrate coverage over an established taxonomy of visualization interaction techniques.",\n        "We present Reactive Vega, a system architecture that provides the first robust and comprehensive treatment of declarative visual and interaction design for data visualization. Starting from a single declarative specification, Reactive Vega constructs a dataflow graph in which input data, scene graph elements, and interaction events are all treated as first-class streaming data sources. To support expressive interactive visualizations that may involve time-varying scalar, relational, or hierarchical data, Reactive Vega�s dataflow graph can dynamically re-write itself at runtime by extending or pruning branches in a data-driven fashion. We discuss both compile- and run-time optimizations applied within Reactive Vega, and share the results of benchmark studies that indicate superior interactive performance to both D3 and the original, non-reactive Vega system.",\n        "We present Vega-Lite, a high-level grammar that enables rapid specification of interactive data visualizations. Vega-Lite combines a traditional grammar of graphics, providing visual encoding rules and a composition algebra for layered and multi-view displays, with a novel grammar of interaction. Users specify interactive semantics by composing selections. In Vega-Lite, a selection is an abstraction that defines input event processing, points of interest, and a predicate function for inclusion testing. Selections parameterize visual encodings by serving as input data, defining scale extents, or by driving conditional logic. The Vega-Lite compiler automatically synthesizes requisite data flow and event handling logic, which users can override for further customization. In contrast to existing reactive specifications, Vega-Lite selections decompose an interaction design into concise, enumerable semantic units. We evaluate Vega-Lite through a range of examples, demonstrating succinct specification of both customized interaction methods and common techniques such as panning, zooming, and linked selection."\n      ],\n      "transform": [\n        {\n          "type": "countpattern",\n          "field": "data",\n          "case": "upper",\n          "pattern": "[\\\\w\']{3,}",\n          "stopwords": "(i|me|my|myself|we|us|our|ours|ourselves|you|your|yours|yourself|yourselves|he|him|his|himself|she|her|hers|herself|it|its|itself|they|them|their|theirs|themselves|what|which|who|whom|whose|this|that|these|those|am|is|are|was|were|be|been|being|have|has|had|having|do|does|did|doing|will|would|should|can|could|ought|i\'m|you\'re|he\'s|she\'s|it\'s|we\'re|they\'re|i\'ve|you\'ve|we\'ve|they\'ve|i\'d|you\'d|he\'d|she\'d|we\'d|they\'d|i\'ll|you\'ll|he\'ll|she\'ll|we\'ll|they\'ll|isn\'t|aren\'t|wasn\'t|weren\'t|hasn\'t|haven\'t|hadn\'t|doesn\'t|don\'t|didn\'t|won\'t|wouldn\'t|shan\'t|shouldn\'t|can\'t|cannot|couldn\'t|mustn\'t|let\'s|that\'s|who\'s|what\'s|here\'s|there\'s|when\'s|where\'s|why\'s|how\'s|a|an|the|and|but|if|or|because|as|until|while|of|at|by|for|with|about|against|between|into|through|during|before|after|above|below|to|from|up|upon|down|in|out|on|off|over|under|again|further|then|once|here|there|when|where|why|how|all|any|both|each|few|more|most|other|some|such|no|nor|not|only|own|same|so|than|too|very|say|says|said|shall)"\n        },\n        {\n          "type": "formula", "as": "angle",\n          "expr": "[-45, 0, 45][~~(random() * 3)]"\n        },\n        {\n          "type": "formula", "as": "weight",\n          "expr": "if(datum.text==\'VEGA\', 600, 300)"\n        }\n      ]\n    }\n  ],\n\n  "scales": [\n    {\n      "name": "color",\n      "type": "ordinal",\n      "domain": {"data": "table", "field": "text"},\n      "range": ["#d5a928", "#652c90", "#939597"]\n    }\n  ],\n\n  "marks": [\n    {\n      "type": "text",\n      "from": {"data": "table"},\n      "encode": {\n        "enter": {\n          "text": {"field": "text"},\n          "align": {"value": "center"},\n          "baseline": {"value": "alphabetic"},\n          "fill": {"scale": "color", "field": "text"}\n\n       },\n        "update": {\n          "fillOpacity": {"value": 1}\n        },\n        "hover": {\n          "fillOpacity": {"value": 0.5}\n        }\n      },\n      "transform": [\n        {\n          "type": "wordcloud",\n          "size": [800, 400],\n          "text": {"field": "text"},\n          "rotate": {"field": "datum.angle"},\n          "font": "Helvetica Neue, Arial",\n          "fontSize": {"field": "datum.count"},\n          "fontWeight": {"field": "datum.weight"},\n          "fontSizeRange": [12, 56],\n          "padding": 2\n        }\n      ]\n    }\n  ]\n}'`, =>DiagramCode]
[Kroki.Image: value={=DiagramCode}, pageWidthPercent=100]

---

Example 9:

[Kroki.Image: value=`rackdiag { 16U; 1: UPS [2U]; 3: DB Server; 4: Web Server; 5: Web Server; 6: Web Server; 7: Load Balancer; 8: L3 Switch;}`]