Encode Diagrams

When using GET requests, your diagram must be encoded in the URL using a deflate + base64 algorithm. On this page you will learn how to encode a diagram using:

• Node.js
• JavaScript
• Python
• Java
• Kotlin
• Go
• PHP
• Tcl
• Elixir
• C#

💡 TIP
To decode a diagram (e.g. from Kroki log message) we recommend using Kroki CLI or one of the decoders listed on the Third Party Tools page.

Node.js

To compress our diagram with deflate algorithm, we are going to use pako -- a high speed zlib port to JavaScript. Once pako is installed, you can use the deflate method:

const pako = require("pako");

const diagramSource = `digraph G {
  Hello->World
}`;

const data = Buffer.from(diagramSource, "utf8"); // ①
const compressed = pako.deflate(data, { level: 9 }); // ②
const result = Buffer.from(compressed)
  .toString("base64") // ③
  .replace(/\+/g, "-")
  .replace(/\//g, "_"); // ④

console.log(result);

1. Create a Buffer from the diagram source using the default UTF-8 encoding
2. Compress data with deflate algorithm using a compression level of 9 (best compression).
3. Create a Buffer from the compressed data and encode to Base64
4. Replace + and / characters to make it "URL safe"

JavaScript

We recommend encoding your diagram as UTF-8. To do so, we can use TextEncoder:

new TextEncoder("utf-8").encode(diagramSource);

Unfortunately TextEncoder is not yet available on all browsers. To workaround this issue, we can define a function to encode our diagram:

function textEncode(str) {
  if (window.TextEncoder) {
    return new TextEncoder("utf-8").encode(str);
  }
  var utf8 = unescape(encodeURIComponent(str));
  var result = new Uint8Array(utf8.length);
  for (var i = 0; i < utf8.length; i++) {
    result[i] = utf8.charCodeAt(i);
  }
  return result;
}

The above code will use TextEncoder if it’s available and otherwise it will use a fallback implementation.

Now that our diagram is encoded as UTF-8 in a Uint8Array, we can use pako to compress it. As a reminder, pako is a high speed zlib port to JavaScript:

<script src="https://unpkg.com/pako@1.0.10/dist/pako_deflate.min.js"></script>

To compress our diagram diagram we are going to use the deflate method provided by pako:

var diagramSource = "digraph G { Hello->World }";

var data = textEncode(diagramSource); // ①
var compressed = pako.deflate(data, { level: 9, to: "string" }); // ②
var result = btoa(compressed) // ③
  .replace(/\+/g, "-")
  .replace(/\//g, "_"); // ④

console.log(result);

1. Encode the diagram as UTF8 in a Uint8Array (using the textEncode function declared above)
2. Compress data with deflate algorithm using a compression level of 9 (best compression). pako is available as a global variable.
3. Encode to Base64 using btoa global function
4. Replace + and / characters to make it "URL safe"

Python

Java

Kotlin

Go

PHP

Tcl

# assuming the diagram code is stored in the variable named `diagramSource`:
puts [string map {+ - / _} [binary encode base64 [zlib compress $diagramSource]]]

Also, see the Tcl package dia2kroki which has procedures to both decode and encode the diagram source code and a GUI to create diagrams with a live preview.

Elixir

C#

📌 NOTE
Please note that we cannot use we cannot use System.IO.Compression.DeflateStream because it does not include ZLIB header/trailer. To learn more, please read: https://yal.cc/cs-deflatestream-zlib/#code