In this post, I will try to incorporate kroki.io into this website.
edit: in summary, I couldn’t :)

Although that’s not a lot like me is it?!? Naaah…​ unfortunately my obstinate stubborn nature doesn’t allow me to give-up until I’ve exhausted every possibility of succeeding. So although not ideal –if you want to keep your site purely in .md format– this method of using kroki in your website is very easy to implement with the help of asciidoctor-kroki, and the pre-requisite jekyll-asciidoc plugins. At the same time this setup gains you the ability to blog and write in .adoc format, which I consider to be a plus (you can read all about the advantages and comparisons against markdown here).

Without further a due, let’s delve into few examples using the krokio.io syntax within a .adoc file.

Down below, you can see the code block and the generated diagram beneath it in pairs.

[graphviz]
....
digraph foo {
  graph [bgcolor=transparent]
  node [style=rounded]
  node1 [shape=box]
  node2 [fillcolor=yellow, style="rounded,filled", shape=diamond]
  node3 [shape=record, label="{ a | b | c }"]

  node1 -> node2 -> node3
}
....
Diagram

a block.diag example

Diagram

an svgbob example.

Diagram

a vegalite example;

Diagram

a nomnoml example;

Diagram