Kroki diagrams

Published: 2023-10-28 00:00:00 | Updated: 2025-07-20 00:29:10 | 6000 words | 29 mins

Use a fenced code block to embed an SVG image of a diagram in your Hugo site using the free Kroki service. Unlike JavaScript solutions that require client-side rendering, this approach embeds an SVG image in your page.¹

Thanks for @jmooring and Kroki.

Performance

According to @jmooring’s blog, you could edit your site configuration to store getresource cache to optimize performance.

1[caches]
2  [caches.getresource]
3    dir = ":resourceDir/_gen"
4    maxAge = -1

And don’t forget to check the resources directory into source control.

Diagram types

The following diagram types are available:

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

Examples

D2

 1```kroki {type=d2}
 2# Actors
 3hans: Hans Niemann
 4
 5defendants: {
 6  mc: Magnus Carlsen
 7  playmagnus: Play Magnus Group
 8  chesscom: Chess.com
 9  naka: Hikaru Nakamura
10
11  mc -> playmagnus: Owns majority
12  playmagnus <-> chesscom: Merger talks
13  chesscom -> naka: Sponsoring
14}
15
16# Accusations
17hans -> defendants: 'sueing for $100M'
18
19# Offense
20defendants.naka -> hans: Accused of cheating on his stream
21defendants.mc -> hans: Lost then withdrew with accusations
22defendants.chesscom -> hans: 72 page report of cheating
23```

Mermaid

 1```kroki {type=mermaid flexoki=paper}
 2sequenceDiagram
 3  participant Alice
 4  participant Bob
 5  Alice->John: Hello John, how are you?
 6  loop Healthcheck
 7    John->John: Fight against hypochondria...
 8  end
 9  Note right of John: Rational thoughts prevail...
10  John-->Alice: Great!
11  John->Bob: How about you?
12  Bob-->John: Jolly good!
13```

PlantUML

 1```kroki {type=plantuml}
 2@startmindmap
 3skinparam monochrome true
 4+ OS
 5++ Ubuntu
 6+++ Linux Mint
 7+++ Kubuntu
 8+++ Lubuntu
 9+++ KDE Neon
10++ LMDE
11++ SolydXK
12++ SteamOS
13++ Raspbian
14-- Windows 95
15-- Windows 98
16-- Windows NT
17--- Windows 8
18--- Windows 10
19@endmindmap
20```

Excalidraw

Code

  1```kroki {type=excalidraw}
  2{
  3  "type": "excalidraw",
  4  "version": 2,
  5  "source": "https://excalidraw.com",
  6  "elements": [
  7    {
  8      "type": "rectangle",
  9      "version": 175,
 10      "versionNonce": 279344008,
 11      "isDeleted": false,
 12      "id": "2ZYh24ed28FJ0yE-S3YNY",
 13      "fillStyle": "hachure",
 14      "strokeWidth": 1,
 15      "strokeStyle": "solid",
 16      "roughness": 1,
 17      "opacity": 100,
 18      "angle": 0,
 19      "x": 580,
 20      "y": 140,
 21      "strokeColor": "#000000",
 22      "backgroundColor": "#15aabf",
 23      "width": 80,
 24      "height": 19.999999999999996,
 25      "seed": 521916552,
 26      "groupIds": [],
 27      "strokeSharpness": "sharp",
 28      "boundElementIds": [
 29        "Be1y2yzhV3Zd4nwCro__8"
 30      ]
 31    },
 32    {
 33      "type": "rectangle",
 34      "version": 180,
 35      "versionNonce": 164784376,
 36      "isDeleted": false,
 37      "id": "bO0OVt6m7LowYpq22ePCA",
 38      "fillStyle": "hachure",
 39      "strokeWidth": 1,
 40      "strokeStyle": "solid",
 41      "roughness": 1,
 42      "opacity": 100,
 43      "angle": 0,
 44      "x": 660,
 45      "y": 140,
 46      "strokeColor": "#000000",
 47      "backgroundColor": "#4c6ef5",
 48      "width": 120,
 49      "height": 19.999999999999996,
 50      "seed": 1303206904,
 51      "groupIds": [],
 52      "strokeSharpness": "sharp",
 53      "boundElementIds": [
 54        "KaCO9-QjUenSyCuuanoTo"
 55      ]
 56    },
 57    {
 58      "type": "rectangle",
 59      "version": 183,
 60      "versionNonce": 27181704,
 61      "isDeleted": false,
 62      "id": "jz0Huq9-s6pNxDw0RqHcR",
 63      "fillStyle": "hachure",
 64      "strokeWidth": 1,
 65      "strokeStyle": "solid",
 66      "roughness": 1,
 67      "opacity": 100,
 68      "angle": 0,
 69      "x": 780,
 70      "y": 140,
 71      "strokeColor": "#000000",
 72      "backgroundColor": "#fab005",
 73      "width": 180,
 74      "height": 19.999999999999996,
 75      "seed": 861962120,
 76      "groupIds": [],
 77      "strokeSharpness": "sharp",
 78      "boundElementIds": [
 79        "74ifmqmu0vN0NK0_0FwPm"
 80      ]
 81    },
 82    {
 83      "type": "rectangle",
 84      "version": 192,
 85      "versionNonce": 2123008504,
 86      "isDeleted": false,
 87      "id": "UnmNTmwJtm6moubcGtSgB",
 88      "fillStyle": "hachure",
 89      "strokeWidth": 1,
 90      "strokeStyle": "solid",
 91      "roughness": 1,
 92      "opacity": 100,
 93      "angle": 0,
 94      "x": 960,
 95      "y": 140,
 96      "strokeColor": "#000000",
 97      "backgroundColor": "#fa5252",
 98      "width": 80,
 99      "height": 19.999999999999996,
100      "seed": 277814520,
101      "groupIds": [],
102      "strokeSharpness": "sharp",
103      "boundElementIds": [
104        "1v60NED2criGG-wo9-oQL"
105      ]
106    },
107    {
108      "type": "rectangle",
109      "version": 202,
110      "versionNonce": 1823814024,
111      "isDeleted": false,
112      "id": "of76J4WOJHnHi0L61Vst_",
113      "fillStyle": "hachure",
114      "strokeWidth": 1,
115      "strokeStyle": "solid",
116      "roughness": 1,
117      "opacity": 100,
118      "angle": 0,
119      "x": 1040,
120      "y": 140,
121      "strokeColor": "#000000",
122      "backgroundColor": "#be4bdb",
123      "width": 180,
124      "height": 19.999999999999996,
125      "seed": 1496796808,
126      "groupIds": [],
127      "strokeSharpness": "sharp",
128      "boundElementIds": [
129        "jjuPzyRneMv3f65lps_6a"
130      ]
131    },
132    {
133      "type": "rectangle",
134      "version": 193,
135      "versionNonce": 1234602744,
136      "isDeleted": false,
137      "id": "SlvbjeV-9lXbcrlKib-hj",
138      "fillStyle": "hachure",
139      "strokeWidth": 1,
140      "strokeStyle": "solid",
141      "roughness": 1,
142      "opacity": 100,
143      "angle": 0,
144      "x": 1220,
145      "y": 140,
146      "strokeColor": "#000000",
147      "backgroundColor": "#868e96",
148      "width": 60,
149      "height": 19.999999999999996,
150      "seed": 1938865656,
151      "groupIds": [],
152      "strokeSharpness": "sharp",
153      "boundElementIds": [
154        "5QQzhw_uqk_rBaW2wMriT"
155      ]
156    },
157    {
158      "type": "text",
159      "version": 81,
160      "versionNonce": 1188901129,
161      "isDeleted": false,
162      "id": "vrdt3JfbD2Xwz4K4TWScI",
163      "fillStyle": "hachure",
164      "strokeWidth": 1,
165      "strokeStyle": "solid",
166      "roughness": 1,
167      "opacity": 100,
168      "angle": 0,
169      "x": 840,
170      "y": -60,
171      "strokeColor": "#000000",
172      "backgroundColor": "#868e96",
173      "width": 190,
174      "height": 45,
175      "seed": 1499217288,
176      "groupIds": [],
177      "strokeSharpness": "sharp",
178      "boundElementIds": [],
179      "fontSize": 36,
180      "fontFamily": 1,
181      "text": "JavaScript",
182      "baseline": 32,
183      "textAlign": "left",
184      "verticalAlign": "top"
185    },
186    {
187      "type": "arrow",
188      "version": 343,
189      "versionNonce": 1369065096,
190      "isDeleted": false,
191      "id": "Be1y2yzhV3Zd4nwCro__8",
192      "fillStyle": "hachure",
193      "strokeWidth": 1,
194      "strokeStyle": "solid",
195      "roughness": 1,
196      "opacity": 100,
197      "angle": 0,
198      "x": 597.5075333823274,
199      "y": 299,
200      "strokeColor": "#000000",
201      "backgroundColor": "#868e96",
202      "width": 40,
203      "height": 139,
204      "seed": 666255096,
205      "groupIds": [],
206      "strokeSharpness": "round",
207      "boundElementIds": [],
208      "startBinding": {
209        "focus": -0.41953339688473495,
210        "gap": 1,
211        "elementId": "UxgtvUBaIPnDWJZ9kUQH8"
212      },
213      "endBinding": {
214        "focus": -0.11111111111111113,
215        "gap": 1,
216        "elementId": "2ZYh24ed28FJ0yE-S3YNY"
217      },
218      "points": [
219        [
220          0,
221          0
222        ],
223        [
224          -17.507533382327438,
225          -59
226        ],
227        [
228          22.492466617672562,
229          -139
230        ]
231      ],
232      "lastCommittedPoint": null,
233      "startArrowhead": null,
234      "endArrowhead": "arrow"
235    },
236    {
237      "type": "text",
238      "version": 81,
239      "versionNonce": 690339976,
240      "isDeleted": false,
241      "id": "UxgtvUBaIPnDWJZ9kUQH8",
242      "fillStyle": "hachure",
243      "strokeWidth": 1,
244      "strokeStyle": "solid",
245      "roughness": 1,
246      "opacity": 100,
247      "angle": 0,
248      "x": 580,
249      "y": 300,
250      "strokeColor": "#000000",
251      "backgroundColor": "#868e96",
252      "width": 94,
253      "height": 45,
254      "seed": 84626568,
255      "groupIds": [],
256      "strokeSharpness": "sharp",
257      "boundElementIds": [
258        "Be1y2yzhV3Zd4nwCro__8"
259      ],
260      "fontSize": 36,
261      "fontFamily": 1,
262      "text": "Fetch",
263      "baseline": 32,
264      "textAlign": "left",
265      "verticalAlign": "top"
266    },
267    {
268      "type": "rectangle",
269      "version": 60,
270      "versionNonce": 897215480,
271      "isDeleted": false,
272      "id": "-Lq0agjWQ31TR_Av5Z4HW",
273      "fillStyle": "hachure",
274      "strokeWidth": 1,
275      "strokeStyle": "solid",
276      "roughness": 1,
277      "opacity": 100,
278      "angle": 0,
279      "x": 520,
280      "y": -60,
281      "strokeColor": "#000000",
282      "backgroundColor": "transparent",
283      "width": 820,
284      "height": 540,
285      "seed": 495165432,
286      "groupIds": [],
287      "strokeSharpness": "sharp",
288      "boundElementIds": [
289        "jjuPzyRneMv3f65lps_6a"
290      ]
291    },
292    {
293      "type": "arrow",
294      "version": 537,
295      "versionNonce": 1626949112,
296      "isDeleted": false,
297      "id": "KaCO9-QjUenSyCuuanoTo",
298      "fillStyle": "hachure",
299      "strokeWidth": 1,
300      "strokeStyle": "solid",
301      "roughness": 1,
302      "opacity": 100,
303      "angle": 0,
304      "x": 721.0588599991052,
305      "y": 60.17790458606555,
306      "strokeColor": "#000000",
307      "backgroundColor": "#868e96",
308      "width": 1.0588599991051524,
309      "height": 79.82209541393445,
310      "seed": 637565832,
311      "groupIds": [],
312      "strokeSharpness": "round",
313      "boundElementIds": [],
314      "startBinding": null,
315      "endBinding": {
316        "focus": 0,
317        "gap": 1,
318        "elementId": "bO0OVt6m7LowYpq22ePCA"
319      },
320      "points": [
321        [
322          0,
323          0
324        ],
325        [
326          -1.0588599991051524,
327          39.82209541393445
328        ],
329        [
330          -1.0588599991051524,
331          79.82209541393445
332        ]
333      ],
334      "lastCommittedPoint": null,
335      "startArrowhead": null,
336      "endArrowhead": "arrow"
337    },
338    {
339      "type": "text",
340      "version": 112,
341      "versionNonce": 358083143,
342      "isDeleted": false,
343      "id": "4hEOdlcwK6AHyVhjc-MXS",
344      "fillStyle": "hachure",
345      "strokeWidth": 1,
346      "strokeStyle": "solid",
347      "roughness": 1,
348      "opacity": 100,
349      "angle": 0,
350      "x": 660,
351      "y": 20,
352      "strokeColor": "#000000",
353      "backgroundColor": "#868e96",
354      "width": 103,
355      "height": 45,
356      "seed": 352116984,
357      "groupIds": [],
358      "strokeSharpness": "sharp",
359      "boundElementIds": [],
360      "fontSize": 36,
361      "fontFamily": 1,
362      "text": "Parse",
363      "baseline": 32,
364      "textAlign": "left",
365      "verticalAlign": "top"
366    },
367    {
368      "type": "arrow",
369      "version": 534,
370      "versionNonce": 983577992,
371      "isDeleted": false,
372      "id": "74ifmqmu0vN0NK0_0FwPm",
373      "fillStyle": "hachure",
374      "strokeWidth": 1,
375      "strokeStyle": "solid",
376      "roughness": 1,
377      "opacity": 100,
378      "angle": 0,
379      "x": 841.6574209245741,
380      "y": 219,
381      "strokeColor": "#000000",
382      "backgroundColor": "#868e96",
383      "width": 43.15128973100309,
384      "height": 59.174989629909305,
385      "seed": 1853344392,
386      "groupIds": [],
387      "strokeSharpness": "round",
388      "boundElementIds": [],
389      "startBinding": {
390        "focus": 0.09211398277003865,
391        "gap": 1,
392        "elementId": "K4so-arfr0JX0NJx8vd7T"
393      },
394      "endBinding": {
395        "focus": -0.2163077865936296,
396        "gap": 1,
397        "elementId": "jz0Huq9-s6pNxDw0RqHcR"
398      },
399      "points": [
400        [
401          0,
402          0
403        ],
404        [
405          -1.6574209245741258,
406          1
407        ],
408        [
409          41.493868806428964,
410          -58.174989629909305
411        ]
412      ],
413      "lastCommittedPoint": null,
414      "startArrowhead": null,
415      "endArrowhead": "arrow"
416    },
417    {
418      "type": "text",
419      "version": 118,
420      "versionNonce": 1185705864,
421      "isDeleted": false,
422      "id": "K4so-arfr0JX0NJx8vd7T",
423      "fillStyle": "hachure",
424      "strokeWidth": 1,
425      "strokeStyle": "solid",
426      "roughness": 1,
427      "opacity": 100,
428      "angle": 0,
429      "x": 640,
430      "y": 220,
431      "strokeColor": "#000000",
432      "backgroundColor": "#868e96",
433      "width": 366,
434      "height": 45,
435      "seed": 765854200,
436      "groupIds": [],
437      "strokeSharpness": "sharp",
438      "boundElementIds": [
439        "74ifmqmu0vN0NK0_0FwPm"
440      ],
441      "fontSize": 36,
442      "fontFamily": 1,
443      "text": "Compile and Optimize",
444      "baseline": 32,
445      "textAlign": "left",
446      "verticalAlign": "top"
447    },
448    {
449      "type": "arrow",
450      "version": 791,
451      "versionNonce": 1724761848,
452      "isDeleted": false,
453      "id": "1v60NED2criGG-wo9-oQL",
454      "fillStyle": "hachure",
455      "strokeWidth": 1,
456      "strokeStyle": "solid",
457      "roughness": 1,
458      "opacity": 100,
459      "angle": 0,
460      "x": 960,
461      "y": 320,
462      "strokeColor": "#000000",
463      "backgroundColor": "#868e96",
464      "width": 80,
465      "height": 160,
466      "seed": 1764571528,
467      "groupIds": [],
468      "strokeSharpness": "round",
469      "boundElementIds": [],
470      "startBinding": {
471        "focus": -0.1637630662020906,
472        "gap": 1,
473        "elementId": "dviXudWNxiHYQMZfqHWsH"
474      },
475      "endBinding": {
476        "focus": 0.07692307692307691,
477        "gap": 1,
478        "elementId": "UnmNTmwJtm6moubcGtSgB"
479      },
480      "points": [
481        [
482          0,
483          0
484        ],
485        [
486          80,
487          -40
488        ],
489        [
490          40,
491          -160
492        ]
493      ],
494      "lastCommittedPoint": null,
495      "startArrowhead": null,
496      "endArrowhead": "arrow"
497    },
498    {
499      "type": "text",
500      "version": 194,
501      "versionNonce": 473574648,
502      "isDeleted": false,
503      "id": "dviXudWNxiHYQMZfqHWsH",
504      "fillStyle": "hachure",
505      "strokeWidth": 1,
506      "strokeStyle": "solid",
507      "roughness": 1,
508      "opacity": 100,
509      "angle": 0,
510      "x": 720,
511      "y": 320,
512      "strokeColor": "#000000",
513      "backgroundColor": "#868e96",
514      "width": 484,
515      "height": 45,
516      "seed": 1988297464,
517      "groupIds": [],
518      "strokeSharpness": "sharp",
519      "boundElementIds": [
520        "1v60NED2criGG-wo9-oQL"
521      ],
522      "fontSize": 36,
523      "fontFamily": 1,
524      "text": "Re-optimize and Deoptimize",
525      "baseline": 32,
526      "textAlign": "left",
527      "verticalAlign": "top"
528    },
529    {
530      "type": "arrow",
531      "version": 708,
532      "versionNonce": 185615496,
533      "isDeleted": false,
534      "id": "jjuPzyRneMv3f65lps_6a",
535      "fillStyle": "hachure",
536      "strokeWidth": 1,
537      "strokeStyle": "solid",
538      "roughness": 1,
539      "opacity": 100,
540      "angle": 0,
541      "x": 1140,
542      "y": 80,
543      "strokeColor": "#000000",
544      "backgroundColor": "#868e96",
545      "width": 20,
546      "height": 60,
547      "seed": 1767688328,
548      "groupIds": [],
549      "strokeSharpness": "round",
550      "boundElementIds": [],
551      "startBinding": {
552        "focus": -0.3021784319542362,
553        "gap": 14.800415739789742,
554        "elementId": "qhkjvI1VmWZdnKvU5QKZK"
555      },
556      "endBinding": {
557        "focus": 0.15789473684210528,
558        "gap": 1,
559        "elementId": "of76J4WOJHnHi0L61Vst_"
560      },
561      "points": [
562        [
563          0,
564          0
565        ],
566        [
567          -20,
568          20
569        ],
570        [
571          0,
572          60
573        ]
574      ],
575      "lastCommittedPoint": null,
576      "startArrowhead": null,
577      "endArrowhead": "arrow"
578    },
579    {
580      "type": "text",
581      "version": 213,
582      "versionNonce": 2105884296,
583      "isDeleted": false,
584      "id": "qhkjvI1VmWZdnKvU5QKZK",
585      "fillStyle": "hachure",
586      "strokeWidth": 1,
587      "strokeStyle": "solid",
588      "roughness": 1,
589      "opacity": 100,
590      "angle": 0,
591      "x": 1080,
592      "y": 20.19958426021026,
593      "strokeColor": "#000000",
594      "backgroundColor": "#868e96",
595      "width": 139,
596      "height": 45,
597      "seed": 2115494904,
598      "groupIds": [],
599      "strokeSharpness": "sharp",
600      "boundElementIds": [
601        "jjuPzyRneMv3f65lps_6a"
602      ],
603      "fontSize": 36,
604      "fontFamily": 1,
605      "text": "Execute",
606      "baseline": 32,
607      "textAlign": "left",
608      "verticalAlign": "top"
609    },
610    {
611      "type": "arrow",
612      "version": 707,
613      "versionNonce": 543827960,
614      "isDeleted": false,
615      "id": "5QQzhw_uqk_rBaW2wMriT",
616      "fillStyle": "hachure",
617      "strokeWidth": 1,
618      "strokeStyle": "solid",
619      "roughness": 1,
620      "opacity": 100,
621      "angle": 0,
622      "x": 1220,
623      "y": 240,
624      "strokeColor": "#000000",
625      "backgroundColor": "#868e96",
626      "width": 20,
627      "height": 80,
628      "seed": 2059564936,
629      "groupIds": [],
630      "strokeSharpness": "round",
631      "boundElementIds": [],
632      "startBinding": {
633        "focus": 0.7391304347826086,
634        "gap": 2,
635        "elementId": "C6fyzTg2FHAmrRYfC_THm"
636      },
637      "endBinding": {
638        "focus": 0.3333333333333333,
639        "gap": 1,
640        "elementId": "SlvbjeV-9lXbcrlKib-hj"
641      },
642      "points": [
643        [
644          0,
645          0
646        ],
647        [
648          20,
649          -40
650        ],
651        [
652          20,
653          -80
654        ]
655      ],
656      "lastCommittedPoint": null,
657      "startArrowhead": null,
658      "endArrowhead": "arrow"
659    },
660    {
661      "type": "text",
662      "version": 227,
663      "versionNonce": 2002374136,
664      "isDeleted": false,
665      "id": "C6fyzTg2FHAmrRYfC_THm",
666      "fillStyle": "hachure",
667      "strokeWidth": 1,
668      "strokeStyle": "solid",
669      "roughness": 1,
670      "opacity": 100,
671      "angle": 0,
672      "x": 1160,
673      "y": 220,
674      "strokeColor": "#000000",
675      "backgroundColor": "#868e96",
676      "width": 58,
677      "height": 45,
678      "seed": 1651025144,
679      "groupIds": [],
680      "strokeSharpness": "sharp",
681      "boundElementIds": [
682        "5QQzhw_uqk_rBaW2wMriT"
683      ],
684      "fontSize": 36,
685      "fontFamily": 1,
686      "text": "GC",
687      "baseline": 32,
688      "textAlign": "left",
689      "verticalAlign": "top"
690    }
691  ],
692  "appState": {
693    "viewBackgroundColor": "#ffffff",
694    "gridSize": 20
695  }
696}
697```

BlockDiag

 1```kroki {type=blockdiag}
 2blockdiag {
 3  Kroki -> generates -> "Block diagrams";
 4  Kroki -> is -> "very easy!";
 5
 6  Kroki [color = "greenyellow"];
 7  "Block diagrams" [color = "pink"];
 8  "very easy!" [color = "orange"];
 9}
10```

PacketDiag

 1```kroki {type=packetdiag color="#878580"}
 2packetdiag {
 3  colwidth = 32;
 4  node_height = 72;
 5
 6  0-15: Source Port;
 7  16-31: Destination Port;
 8  32-63: Sequence Number;
 9  64-95: Acknowledgment Number;
10  96-99: Data Offset;
11  100-105: Reserved;
12  106: URG [rotate = 270];
13  107: ACK [rotate = 270];
14  108: PSH [rotate = 270];
15  109: RST [rotate = 270];
16  110: SYN [rotate = 270];
17  111: FIN [rotate = 270];
18  112-127: Window;
19  128-143: Checksum;
20  144-159: Urgent Pointer;
21  160-191: (Options and Padding);
22  192-223: data [colheight = 3];
23}
24```

C4 with PlantUML

 1```kroki {type=c4plantuml}
 2!include <C4/C4_Context>
 3
 4title System Context diagram for Internet Banking System
 5
 6Person(customer, "Banking Customer", "A customer of the bank, with personal bank accounts.")
 7System(banking_system, "Internet Banking System", "Allows customers to check their accounts.")
 8
 9System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
10System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information.")
11
12Rel(customer, banking_system, "Uses")
13Rel_Back(customer, mail_system, "Sends e-mails to")
14Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
15Rel(banking_system, mainframe, "Uses")
16```

Bytefield

Code

 1```kroki {type=bytefield flexoki=150}
 2(defattrs :bg-green {:fill "#a0ffa0"})
 3(defattrs :bg-yellow {:fill "#ffffa0"})
 4(defattrs :bg-pink {:fill "#ffb0a0"})
 5(defattrs :bg-cyan {:fill "#a0fafa"})
 6(defattrs :bg-purple {:fill "#e4b5f7"})
 7
 8(defn draw-group-label-header
 9  [span label]
10  (draw-box (text label [:math {:font-size 12}]) {:span span :borders #{} :height 14}))
11
12(defn draw-remotedb-header
13  [kind args]
14  (draw-column-headers)
15  (draw-group-label-header 5 "start")
16  (draw-group-label-header 5 "TxID")
17  (draw-group-label-header 3 "type")
18  (draw-group-label-header 2 "args")
19  (draw-group-label-header 1 "tags")
20  (next-row 18)
21
22  (draw-box 0x11 :bg-green)
23  (draw-box 0x872349ae [{:span 4} :bg-green])
24  (draw-box 0x11 :bg-yellow)
25  (draw-box (text "TxID" :math) [{:span 4} :bg-yellow])
26  (draw-box 0x10 :bg-pink)
27  (draw-box (hex-text kind 4 :bold) [{:span 2} :bg-pink])
28  (draw-box 0x0f :bg-cyan)
29  (draw-box (hex-text args 2 :bold) :bg-cyan)
30  (draw-box 0x14 :bg-purple)
31
32  (draw-box (text "0000000c" :hex [[:plain {:font-weight "light" :font-size 16}] " (12)"]) [{:span 4} :bg-purple])
33  (draw-box (hex-text 6 2 :bold) [:box-first :bg-purple])
34  (doseq [val [6 6 3 6 6 6 6 3]]
35    (draw-box (hex-text val 2 :bold) [:box-related :bg-purple]))
36  (doseq [val [0 0]]
37    (draw-box val [:box-related :bg-purple]))
38  (draw-box 0 [:box-last :bg-purple]))
39
40(draw-remotedb-header 0x4702 9)
41
42(draw-box 0x11)
43(draw-box 0x2104 {:span 4})
44(draw-box 0x11)
45(draw-box 0 {:span 4})
46(draw-box 0x11)
47(draw-box (text "length" [:math] [:sub 1]) {:span 4})
48(draw-box 0x14)
49
50(draw-box (text "length" [:math] [:sub 1]) {:span 4})
51(draw-gap "Cue and loop point bytes")
52
53(draw-box nil :box-below)
54(draw-box 0x11)
55(draw-box 0x36 {:span 4})
56(draw-box 0x11)
57(draw-box (text "num" [:math] [:sub "hot"]) {:span 4})
58(draw-box 0x11)
59(draw-box (text "num" [:math] [:sub "cue"]) {:span 4})
60
61(draw-box 0x11)
62(draw-box (text "length" [:math] [:sub 2]) {:span 4})
63(draw-box 0x14)
64(draw-box (text "length" [:math] [:sub 2]) {:span 4})
65(draw-gap "Unknown bytes" {:min-label-columns 6})
66(draw-bottom)
67```

SeqDiag

 1```kroki {type=seqdiag}
 2seqdiag {
 3  browser  -> webserver [label = "GET /index.html"];
 4  browser <-- webserver;
 5  browser  -> webserver [label = "POST /blog/comment"];
 6  webserver  -> database [label = "INSERT comment"];
 7  webserver <-- database;
 8  browser <-- webserver;
 9}
10```

ActDiag

 1```kroki {type=actdiag}
 2actdiag {
 3  write -> convert -> image
 4
 5  lane user {
 6    label = "User"
 7    write [label = "Writing reST"];
 8    image [label = "Get diagram IMAGE"];
 9  }
10  lane actdiag {
11    convert [label = "Convert reST to Image"];
12  }
13}
14```

NwDiag

 1```kroki {type=nwdiag}
 2nwdiag {
 3  network dmz {
 4    address = "210.x.x.x/24"
 5
 6    web01 [address = "210.x.x.1"];
 7    web02 [address = "210.x.x.2"];
 8  }
 9  network internal {
10    address = "172.x.x.x/24";
11
12    web01 [address = "172.x.x.1"];
13    web02 [address = "172.x.x.2"];
14    db01;
15    db02;
16  }
17}
18```

GraphViz

Code

  1```kroki {type=graphviz}
  2digraph "unix" {
  3  graph [ fontname = "Helvetica-Oblique",
  4          fontsize = 36,
  5          label = "\n\n\n\nObject Oriented Graphs\nStephen North, 3/19/93",
  6          size = "6,6" ];
  7  node [ shape = polygon,
  8         sides = 4,
  9         distortion = "0.0",
 10         orientation = "0.0",
 11         skew = "0.0",
 12         color = white,
 13         style = filled,
 14         fontname = "Helvetica-Outline" ];
 15  "5th Edition" [sides=9, distortion="0.936354", orientation=28, skew="-0.126818", color=salmon2];
 16  "6th Edition" [sides=5, distortion="0.238792", orientation=11, skew="0.995935", color=deepskyblue];
 17  "PWB 1.0" [sides=8, distortion="0.019636", orientation=79, skew="-0.440424", color=goldenrod2];
 18  LSX [sides=9, distortion="-0.698271", orientation=22, skew="-0.195492", color=burlywood2];
 19  "1 BSD" [sides=7, distortion="0.265084", orientation=26, skew="0.403659", color=gold1];
 20  "Mini Unix" [distortion="0.039386", orientation=2, skew="-0.461120", color=greenyellow];
 21  Wollongong [sides=5, distortion="0.228564", orientation=63, skew="-0.062846", color=darkseagreen];
 22  Interdata [distortion="0.624013", orientation=56, skew="0.101396", color=dodgerblue1];
 23  "Unix/TS 3.0" [sides=8, distortion="0.731383", orientation=43, skew="-0.824612", color=thistle2];
 24  "PWB 2.0" [sides=6, distortion="0.592100", orientation=34, skew="-0.719269", color=darkolivegreen3];
 25  "7th Edition" [sides=10, distortion="0.298417", orientation=65, skew="0.310367", color=chocolate];
 26  "8th Edition" [distortion="-0.997093", orientation=50, skew="-0.061117", color=turquoise3];
 27  "32V" [sides=7, distortion="0.878516", orientation=19, skew="0.592905", color=steelblue3];
 28  V7M [sides=10, distortion="-0.960249", orientation=32, skew="0.460424", color=navy];
 29  "Ultrix-11" [sides=10, distortion="-0.633186", orientation=10, skew="0.333125", color=darkseagreen4];
 30  Xenix [sides=8, distortion="-0.337997", orientation=52, skew="-0.760726", color=coral];
 31  "UniPlus+" [sides=7, distortion="0.788483", orientation=39, skew="-0.526284", color=darkolivegreen3];
 32  "9th Edition" [sides=7, distortion="0.138690", orientation=55, skew="0.554049", color=coral3];
 33  "2 BSD" [sides=7, distortion="-0.010661", orientation=84, skew="0.179249", color=blanchedalmond];
 34  "2.8 BSD" [distortion="-0.239422", orientation=44, skew="0.053841", color=lightskyblue1];
 35  "2.9 BSD" [distortion="-0.843381", orientation=70, skew="-0.601395", color=aquamarine2];
 36  "3 BSD" [sides=10, distortion="0.251820", orientation=18, skew="-0.530618", color=lemonchiffon];
 37  "4 BSD" [sides=5, distortion="-0.772300", orientation=24, skew="-0.028475", color=darkorange1];
 38  "4.1 BSD" [distortion="-0.226170", orientation=38, skew="0.504053", color=lightyellow1];
 39  "4.2 BSD" [sides=10, distortion="-0.807349", orientation=50, skew="-0.908842", color=darkorchid4];
 40  "4.3 BSD" [sides=10, distortion="-0.030619", orientation=76, skew="0.985021", color=lemonchiffon2];
 41  "Ultrix-32" [distortion="-0.644209", orientation=21, skew="0.307836", color=goldenrod3];
 42  "PWB 1.2" [sides=7, distortion="0.640971", orientation=84, skew="-0.768455", color=cyan];
 43  "USG 1.0" [distortion="0.758942", orientation=42, skew="0.039886", color=blue];
 44  "CB Unix 1" [sides=9, distortion="-0.348692", orientation=42, skew="0.767058", color=firebrick];
 45  "USG 2.0" [distortion="0.748625", orientation=74, skew="-0.647656", color=chartreuse4];
 46  "CB Unix 2" [sides=10, distortion="0.851818", orientation=32, skew="-0.020120", color=greenyellow];
 47  "CB Unix 3" [sides=10, distortion="0.992237", orientation=29, skew="0.256102", color=bisque4];
 48  "Unix/TS++" [sides=6, distortion="0.545461", orientation=16, skew="0.313589", color=mistyrose2];
 49  "PDP-11 Sys V" [sides=9, distortion="-0.267769", orientation=40, skew="0.271226", color=cadetblue1];
 50  "USG 3.0" [distortion="-0.848455", orientation=44, skew="0.267152", color=bisque2];
 51  "Unix/TS 1.0" [distortion="0.305594", orientation=75, skew="0.070516", color=orangered];
 52  "TS 4.0" [sides=10, distortion="-0.641701", orientation=50, skew="-0.952502", color=crimson];
 53  "System V.0" [sides=9, distortion="0.021556", orientation=26, skew="-0.729938", color=darkorange1];
 54  "System V.2" [sides=6, distortion="0.985153", orientation=33, skew="-0.399752", color=darkolivegreen4];
 55  "System V.3" [sides=7, distortion="-0.687574", orientation=58, skew="-0.180116", color=lightsteelblue1];
 56  "5th Edition" -> "6th Edition";
 57  "5th Edition" -> "PWB 1.0";
 58  "6th Edition" -> LSX;
 59  "6th Edition" -> "1 BSD";
 60  "6th Edition" -> "Mini Unix";
 61  "6th Edition" -> Wollongong;
 62  "6th Edition" -> Interdata;
 63  Interdata -> "Unix/TS 3.0";
 64  Interdata -> "PWB 2.0";
 65  Interdata -> "7th Edition";
 66  "7th Edition" -> "8th Edition";
 67  "7th Edition" -> "32V";
 68  "7th Edition" -> V7M;
 69  "7th Edition" -> "Ultrix-11";
 70  "7th Edition" -> Xenix;
 71  "7th Edition" -> "UniPlus+";
 72  V7M -> "Ultrix-11";
 73  "8th Edition" -> "9th Edition";
 74  "1 BSD" -> "2 BSD";
 75  "2 BSD" -> "2.8 BSD";
 76  "2.8 BSD" -> "Ultrix-11";
 77  "2.8 BSD" -> "2.9 BSD";
 78  "32V" -> "3 BSD";
 79  "3 BSD" -> "4 BSD";
 80  "4 BSD" -> "4.1 BSD";
 81  "4.1 BSD" -> "4.2 BSD";
 82  "4.1 BSD" -> "2.8 BSD";
 83  "4.1 BSD" -> "8th Edition";
 84  "4.2 BSD" -> "4.3 BSD";
 85  "4.2 BSD" -> "Ultrix-32";
 86  "PWB 1.0" -> "PWB 1.2";
 87  "PWB 1.0" -> "USG 1.0";
 88  "PWB 1.2" -> "PWB 2.0";
 89  "USG 1.0" -> "CB Unix 1";
 90  "USG 1.0" -> "USG 2.0";
 91  "CB Unix 1" -> "CB Unix 2";
 92  "CB Unix 2" -> "CB Unix 3";
 93  "CB Unix 3" -> "Unix/TS++";
 94  "CB Unix 3" -> "PDP-11 Sys V";
 95  "USG 2.0" -> "USG 3.0";
 96  "USG 3.0" -> "Unix/TS 3.0";
 97  "PWB 2.0" -> "Unix/TS 3.0";
 98  "Unix/TS 1.0" -> "Unix/TS 3.0";
 99  "Unix/TS 3.0" -> "TS 4.0";
100  "Unix/TS++" -> "TS 4.0";
101  "CB Unix 3" -> "TS 4.0";
102  "TS 4.0" -> "System V.0";
103  "System V.0" -> "System V.2";
104  "System V.2" -> "System V.3";
105}
106```

Pikchr

Code

 1```kroki {type=pikchr}
 2scale = 0.8
 3fill = white
 4linewid *= 0.5
 5circle "C0" fit
 6circlerad = previous.radius
 7arrow
 8circle "C1"
 9arrow
10circle "C2"
11arrow
12circle "C4"
13arrow
14circle "C6"
15circle "C3" at dist(C2,C4) heading 30 from C2
16arrow
17circle "C5"
18arrow from C2 to C3 chop
19C3P: circle "C3'" at dist(C4,C6) heading 30 from C6
20arrow right from C3P.e
21C5P: circle "C5'"
22arrow from C6 to C3P chop
23
24box height C3.y-C2.y \
25    width (C5P.e.x-C0.w.x)+linewid \
26    with .w at 0.5*linewid west of C0.w \
27    behind C0 \
28    fill 0xc6e2ff thin color gray
29box same width previous.e.x - C2.w.x \
30    with .se at previous.ne \
31    fill 0x9accfc
32"trunk" below at 2nd last box.s
33"feature branch" above at last box.n
34
35circle "C0" at 3.7cm south of C0
36arrow
37circle "C1"
38arrow
39circle "C2"
40arrow
41circle "C4"
42arrow
43circle "C6"
44circle "C3" at dist(C2,C4) heading 30 from C2
45arrow
46circle "C5"
47arrow
48circle "C7"
49arrow from C2 to C3 chop
50arrow from C6 to C7 chop
51
52box height C3.y-C2.y \
53    width (C7.e.x-C0.w.x)+1.5*C1.radius \
54    with .w at 0.5*linewid west of C0.w \
55    behind C0 \
56    fill 0xc6e2ff thin color gray
57box same width previous.e.x - C2.w.x \
58    with .se at previous.ne \
59    fill 0x9accfc
60"trunk" below at 2nd last box.s
61"feature branch" above at last box.n
62```

Erd

 1```kroki {type=erd}
 2[Person]
 3*name
 4height
 5weight
 6+birth_location_id
 7
 8[Location]
 9*id
10city
11state
12country
13
14Person *--1 Location
15```

Vega

Code

 1```kroki {type=vega flexoki=paper}
 2{
 3  "$schema": "https://vega.github.io/schema/vega/v5.json",
 4  "width": 800,
 5  "height": 400,
 6  "padding": 0,
 7
 8  "data": [
 9    {
10      "name": "table",
11      "values": [
12        "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.",
13        "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.",
14        "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."
15      ],
16      "transform": [
17        {
18          "type": "countpattern",
19          "field": "data",
20          "case": "upper",
21          "pattern": "[\\w']{3,}",
22          "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)"
23        },
24        {
25          "type": "formula", "as": "angle",
26          "expr": "[-45, 0, 45][~~(random() * 3)]"
27        },
28        {
29          "type": "formula", "as": "weight",
30          "expr": "if(datum.text=='VEGA', 600, 300)"
31        }
32      ]
33    }
34  ],
35
36  "scales": [
37    {
38      "name": "color",
39      "type": "ordinal",
40      "domain": {"data": "table", "field": "text"},
41      "range": ["#d5a928", "#652c90", "#939597"]
42    }
43  ],
44
45  "marks": [
46    {
47      "type": "text",
48      "from": {"data": "table"},
49      "encode": {
50        "enter": {
51          "text": {"field": "text"},
52          "align": {"value": "center"},
53          "baseline": {"value": "alphabetic"},
54          "fill": {"scale": "color", "field": "text"}
55        },
56        "update": {
57          "fillOpacity": {"value": 1}
58        },
59        "hover": {
60          "fillOpacity": {"value": 0.5}
61        }
62      },
63      "transform": [
64        {
65          "type": "wordcloud",
66          "size": [800, 400],
67          "text": {"field": "text"},
68          "rotate": {"field": "datum.angle"},
69          "font": "Helvetica Neue, Arial",
70          "fontSize": {"field": "datum.count"},
71          "fontWeight": {"field": "datum.weight"},
72          "fontSizeRange": [12, 56],
73          "padding": 2
74        }
75      ]
76    }
77  ]
78}
79```

Vega-Lite

Code

  1```kroki {type=vegalite}
  2{
  3  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  4  "description": "A diverging stacked bar chart for sentiments towards a set of eight questions, displayed as percentages with neutral responses straddling the 0% mark",
  5  "data": {
  6    "values": [
  7      {"question": "Question 1", "type": "Strongly disagree", "value": 24, "percentage": 0.7},
  8      {"question": "Question 1", "type": "Disagree", "value": 294, "percentage": 9.1},
  9      {"question": "Question 1", "type": "Neither agree nor disagree", "value": 594, "percentage": 18.5},
 10      {"question": "Question 1", "type": "Agree", "value": 1927, "percentage": 59.9},
 11      {"question": "Question 1", "type": "Strongly agree", "value": 376, "percentage": 11.7},
 12      {"question": "Question 2", "type": "Strongly disagree", "value": 2, "percentage": 18.2},
 13      {"question": "Question 2", "type": "Disagree", "value": 2, "percentage": 18.2},
 14      {"question": "Question 2", "type": "Neither agree nor disagree", "value": 0, "percentage": 0},
 15      {"question": "Question 2", "type": "Agree", "value": 7, "percentage": 63.6},
 16      {"question": "Question 2", "type": "Strongly agree", "value": 11, "percentage": 0},
 17      {"question": "Question 3", "type": "Strongly disagree", "value": 2, "percentage": 20},
 18      {"question": "Question 3", "type": "Disagree", "value": 0, "percentage": 0},
 19      {"question": "Question 3", "type": "Neither agree nor disagree", "value": 2, "percentage": 20},
 20      {"question": "Question 3", "type": "Agree", "value": 4, "percentage": 40},
 21      {"question": "Question 3", "type": "Strongly agree", "value": 2, "percentage": 20},
 22      {"question": "Question 4", "type": "Strongly disagree", "value": 0, "percentage": 0},
 23      {"question": "Question 4", "type": "Disagree", "value": 2, "percentage": 12.5},
 24      {"question": "Question 4", "type": "Neither agree nor disagree", "value": 1, "percentage": 6.3},
 25      {"question": "Question 4", "type": "Agree", "value": 7, "percentage": 43.8},
 26      {"question": "Question 4", "type": "Strongly agree", "value": 6, "percentage": 37.5},
 27      {"question": "Question 5", "type": "Strongly disagree", "value": 0, "percentage": 0},
 28      {"question": "Question 5", "type": "Disagree", "value": 1, "percentage": 4.2},
 29      {"question": "Question 5", "type": "Neither agree nor disagree", "value": 3, "percentage": 12.5},
 30      {"question": "Question 5", "type": "Agree", "value": 16, "percentage": 66.7},
 31      {"question": "Question 5", "type": "Strongly agree", "value": 4, "percentage": 16.7},
 32      {"question": "Question 6", "type": "Strongly disagree", "value": 1, "percentage": 6.3},
 33      {"question": "Question 6", "type": "Disagree", "value": 1, "percentage": 6.3},
 34      {"question": "Question 6", "type": "Neither agree nor disagree", "value": 2, "percentage": 12.5},
 35      {"question": "Question 6", "type": "Agree", "value": 9, "percentage": 56.3},
 36      {"question": "Question 6", "type": "Strongly agree", "value": 3, "percentage": 18.8},
 37      {"question": "Question 7", "type": "Strongly disagree", "value": 0, "percentage": 0},
 38      {"question": "Question 7", "type": "Disagree", "value": 0, "percentage": 0},
 39      {"question": "Question 7", "type": "Neither agree nor disagree", "value": 1, "percentage": 20},
 40      {"question": "Question 7", "type": "Agree", "value": 4, "percentage": 80},
 41      {"question": "Question 7", "type": "Strongly agree", "value": 0, "percentage": 0},
 42      {"question": "Question 8", "type": "Strongly disagree", "value": 0, "percentage": 0},
 43      {"question": "Question 8", "type": "Disagree", "value": 0, "percentage": 0},
 44      {"question": "Question 8", "type": "Neither agree nor disagree", "value": 0, "percentage": 0},
 45      {"question": "Question 8", "type": "Agree", "value": 0, "percentage": 0},
 46      {"question": "Question 8", "type": "Strongly agree", "value": 2, "percentage": 100}
 47    ]
 48  },
 49  "transform": [
 50    {
 51      "calculate": "if(datum.type === 'Strongly disagree',-2,0) + if(datum.type==='Disagree',-1,0) + if(datum.type =='Neither agree nor disagree',0,0) + if(datum.type ==='Agree',1,0) + if(datum.type ==='Strongly agree',2,0)",
 52      "as": "q_order"
 53    },
 54    {
 55      "calculate": "if(datum.type === 'Disagree' || datum.type === 'Strongly disagree', datum.percentage,0) + if(datum.type === 'Neither agree nor disagree', datum.percentage / 2,0)",
 56      "as": "signed_percentage"
 57    },
 58    {"stack": "percentage", "as": ["v1", "v2"], "groupby": ["question"]},
 59    {
 60      "joinaggregate": [
 61        {
 62          "field": "signed_percentage",
 63          "op": "sum",
 64          "as": "offset"
 65        }
 66      ],
 67      "groupby": ["question"]
 68    },
 69    {"calculate": "datum.v1 - datum.offset", "as": "nx"},
 70    {"calculate": "datum.v2 - datum.offset", "as": "nx2"}
 71  ],
 72  "mark": "bar",
 73  "encoding": {
 74    "x": {
 75      "field": "nx",
 76      "type": "quantitative",
 77      "axis": {
 78        "title": "Percentage"
 79      }
 80    },
 81    "x2": {"field": "nx2"},
 82    "y": {
 83      "field": "question",
 84      "type": "nominal",
 85      "axis": {
 86        "title": "Question",
 87        "offset": 5,
 88        "ticks": false,
 89        "minExtent": 60,
 90        "domain": false
 91      }
 92    },
 93    "color": {
 94      "field": "type",
 95      "type": "nominal",
 96      "legend": {
 97        "title": "Response"
 98      },
 99      "scale": {
100        "domain": ["Strongly disagree", "Disagree", "Neither agree nor disagree", "Agree", "Strongly agree"],
101        "range": ["#c30d24", "#f3a583", "#cccccc", "#94c6da", "#1770ab"],
102        "type": "ordinal"
103      }
104    }
105  }
106}
107```

Ditaa

 1```kroki {type=ditaa}
 2                          +-------------+
 3                          |             |
 4                          | Exponential |
 5                          |             |
 6                          +-------------+
 7                                 |
 8                          lambda |
 9                                 v
10+-------------+           +-------------+           +-------------+
11|             |   tau     |             |   lambda  |             |
12|  Lognormal  |---------->|    Gamma    |<----------| Poisson     |
13|             |           |             |---+       |             |
14+-------------+           +-------------+   |       +-------------+
15      |                         ^ ^         | beta
16      |                   tau   | |         |
17      | tau                     | +---------+
18      |                   +-------------+
19      +------------------>|             |
20                          |     Normal  |
21                          |             |----+
22                          +-------------+    |
23                                     ^       | mu
24                                     |       |
25                                     +-------+
26```

DBML

 1```kroki {type=dbml}
 2Table users {
 3  id integer
 4  username varchar
 5  role varchar
 6  created_at timestamp
 7}
 8
 9Table posts {
10  id integer [primary key]
11  title varchar
12  body text [note: 'Content of the post']
13  user_id integer
14  status post_status
15  created_at timestamp
16}
17
18Enum post_status {
19  draft
20  published
21  private [note: 'visible via URL only']
22}
23
24Ref: posts.user_id > users.id // many-to-one
25```

TikZ

Code

 1```kroki {type=tikz flexoki=paper}
 2\documentclass{article}
 3\usepackage{tikz}
 4\usepackage{tikz-3dplot}
 5\usetikzlibrary{math}
 6\usepackage[active,tightpage]{preview}
 7\PreviewEnvironment{tikzpicture}
 8\setlength\PreviewBorder{0.125pt}
 9%
10% File name: directional-angles.tex
11% Description:
12% The directional angles of a vector are geometrically represented.
13%
14% Date of creation: July, 25th, 2021.
15% Date of last modification: October, 9th, 2022.
16% Author: Efra�n Soto Apolinar.
17% https://www.aprendematematicas.org.mx/author/efrain-soto-apolinar/instructing-courses/
18% Source: page 11 of the
19% Glosario Ilustrado de Matematicas Escolares.
20% https://tinyurl.com/5udm2ufy
21%
22% Terms of use:
23% According to TikZ.net
24% https://creativecommons.org/licenses/by-nc-sa/4.0/
25% Your commitment to the terms of use is greatly appreciated.
26%
27\begin{document}
28  \tdplotsetmaincoords{80}{120}
29  %
30  \begin{tikzpicture}[tdplot_main_coords,scale=0.75]
31    % Indicate the components of the vector in rectangular coordinates
32    \pgfmathsetmacro{\ux}{4}
33    \pgfmathsetmacro{\uy}{4}
34    \pgfmathsetmacro{\uz}{3}
35    % Length of each axis
36    \pgfmathsetmacro{\ejex}{\ux+0.5}
37    \pgfmathsetmacro{\ejey}{\uy+0.5}
38    \pgfmathsetmacro{\ejez}{\uz+0.5}
39    \pgfmathsetmacro{\umag}{sqrt(\ux*\ux+\uy*\uy+\uz*\uz)} % Magnitude of vector $\vec{u}$
40    % Compute the angle $\theta$
41    \pgfmathsetmacro{\angthetax}{pi*atan(\uy/\ux)/180}
42    \pgfmathsetmacro{\angthetay}{pi*atan(\ux/\uz)/180}
43    \pgfmathsetmacro{\angthetaz}{pi*atan(\uz/\uy)/180}
44    % Compute the angle $\phi$
45    \pgfmathsetmacro{\angphix}{pi*acos(\ux/\umag)/180}
46    \pgfmathsetmacro{\angphiy}{pi*acos(\uy/\umag)/180}
47    \pgfmathsetmacro{\angphiz}{pi*acos(\uz/\umag)/180}
48    % Compute rho sin(phi) to simplify computations
49    \pgfmathsetmacro{\costz}{cos(\angthetax r)}
50    \pgfmathsetmacro{\sintz}{sin(\angthetax r)}
51    \pgfmathsetmacro{\costy}{cos(\angthetay r)}
52    \pgfmathsetmacro{\sinty}{sin(\angthetay r)}
53    \pgfmathsetmacro{\costx}{cos(\angthetaz r)}
54    \pgfmathsetmacro{\sintx}{sin(\angthetaz r)}
55    % Coordinate axis
56    \draw[thick,->] (0,0,0) -- (\ejex,0,0) node[below left] {$x$};
57    \draw[thick,->] (0,0,0) -- (0,\ejey,0) node[right] {$y$};
58    \draw[thick,->] (0,0,0) -- (0,0,\ejez) node[above] {$z$};
59    % Projections of the components in the axis
60    \draw[gray,very thin,opacity=0.5] (0,0,0) -- (\ux,0,0) -- (\ux,\uy,0) -- (0,\uy,0) -- (0,0,0);	% face on the plane z = 0
61    \draw[gray,very thin,opacity=0.5] (0,0,\uz) -- (\ux,0,\uz) -- (\ux,\uy,\uz) -- (0,\uy,\uz) -- (0,0,\uz);	% face on the plane z = \uz
62    \draw[gray,very thin,opacity=0.5] (0,0,0) -- (0,0,\uz) -- (\ux,0,\uz) -- (\ux,0,0) -- (0,0,0);	% face on the plane y = 0
63    \draw[gray,very thin,opacity=0.5] (0,\uy,0) -- (0,\uy,\uz) -- (\ux,\uy,\uz) -- (\ux,\uy,0) -- (0,\uy,0);	% face on the plane y = \uy
64    \draw[gray,very thin,opacity=0.5] (0,0,0) -- (0,\uy,0) -- (0,\uy,\uz) -- (0,0,\uz) -- (0,0,0); % face on the plane x = 0
65    \draw[gray,very thin,opacity=0.5] (\ux,0,0) -- (\ux,\uy,0) -- (\ux,\uy,\uz) -- (\ux,0,\uz) -- (\ux,0,0); % face on the plane x = \ux
66    % Arc indicating the angle $\alpha$
67    % (angle formed by the vector $\vec{v}$ and the $x$ axis)
68    \draw[red,thick] plot[domain=0:\angphix,smooth,variable=\t] ({cos(\t r)},{sin(\t r)*\costx},{sin(\t r)*\sintx});
69    % Arc indicating the angle $\beta$
70    % (angle formed by the vector $\vec{v}$ and the $y$ axis)
71    \draw[red,thick] plot[domain=0:\angphiy,smooth,variable=\t] ({sin(\t r)*\sinty},{cos(\t r)},{sin(\t r)*\costy});
72    % Arc indicating the angle $\gamma$
73    % (angle formed by the vector $\vec{v}$ and the $z$ axis)
74    \draw[red,thick] plot[domain=0:\angphiz,smooth,variable=\t] ({sin(\t r)*\costz},{sin(\t r)*\sintz},{cos(\t r)});
75    % Vector $\vec{u}$
76    \draw[blue,thick,->] (0,0,0) -- (\ux,\uy,\uz) node [below right] {$\vec{u}$};
77    % Nodes indicating the direction angles
78    \pgfmathsetmacro{\xa}{1.85*cos(0.5*\angphix r)}
79    \pgfmathsetmacro{\ya}{1.85*sin(0.5*\angphix r)*\costx}
80    \pgfmathsetmacro{\za}{1.85*sin(0.5*\angphiz r)*\sintx}
81    \node[red] at (\xa,\ya,\za) {\footnotesize$\alpha$};
82    %
83    \pgfmathsetmacro{\xb}{1.5*sin(0.5*\angphiy r)*\sinty}
84    \pgfmathsetmacro{\yb}{1.5*cos(0.5*\angphiy r)}
85    \pgfmathsetmacro{\zb}{1.5*sin(0.5*\angphiy r)*\costy}
86    \node[red] at (\xb,\yb,\zb) {\footnotesize$\beta$};
87    %
88    \pgfmathsetmacro{\xc}{1.5*sin(0.5*\angphiz r)*\costz}
89    \pgfmathsetmacro{\yc}{1.5*sin(0.5*\angphiz r)*\sintz}
90    \pgfmathsetmacro{\zc}{1.5*cos(0.5*\angphiz r)}
91    \node[red] at (\xc,\yc,\zc) {\footnotesize$\gamma$};
92    %
93  \end{tikzpicture}
94  %
95\end{document}
96```

WaveDrom

1```kroki {type=wavedrom}
2{ signal: [
3  { name: "clk",         wave: "p.....|..." },
4  { name: "Data",        wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
5  { name: "Request",     wave: "0.1..0|1.0" },
6  {},
7  { name: "Acknowledge", wave: "1.....|01." }
8]}
9```

WireViz

 1```kroki {type=wireviz}
 2connectors:
 3  X1:
 4    type: D-Sub
 5    subtype: female
 6    pinlabels: [DCD, RX, TX, DTR, GND, DSR, RTS, CTS, RI]
 7  X2:
 8    type: Molex KK 254
 9    subtype: female
10    pinlabels: [GND, RX, TX]
11
12cables:
13  W1:
14    gauge: 0.25 mm2
15    length: 0.2
16    color_code: DIN
17    wirecount: 3
18    shield: true
19
20connections:
21  -
22    - X1: [5,2,3]
23    - W1: [1,2,3]
24    - X2: [1,3,2]
25  -
26    - X1: 5
27    - W1: s
28```

More Examples

Go to the Kroki examples page.

https://www.veriphor.com/articles/diagrams/ ↩︎

#Markdown #Code #Diagram #Mermaid #Kroki #Plantuml #D2 #C4