Encode Diagrams
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') (1)
const compressed = pako.deflate(data, { level: 9 }) (2)
const result = Buffer.from(compressed)
.toString('base64') (3)
.replace(/\+/g, '-').replace(/\//g, '_') (4)
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) (1)
var compressed = pako.deflate(data, { level: 9, to: 'string' }) (2)
var result = btoa(compressed) (3)
.replace(/\+/g, '-').replace(/\//g, '_') (4)
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
import sys;
import base64;
import zlib;
print(base64.urlsafe_b64encode(zlib.compress(sys.stdin.read(), 9)))
Java
package main;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Base64;
import java.util.zip.Deflater;
public class Encode {
public static byte[] encode(String decoded) throws IOException {
return Base64.getUrlEncoder().encode(compress(decoded.getBytes()));
}
private static byte[] compress(byte[] source) throws IOException {
Deflater deflater = new Deflater(Deflater.BEST_COMPRESSION);
deflater.setInput(source);
deflater.finish();
byte[] buffer = new byte[2048];
int compressedLength = deflater.deflate(buffer);
byte[] result = new byte[compressedLength];
System.arraycopy(buffer, 0, result, 0, compressedLength);
return result;
}
}
Kotlin
package main
import java.util.Base64
import java.util.zip.Deflater
object Encode {
fun encode(decoded: String): String =
String(Base64.getUrlEncoder().encode(compress(decoded.toByteArray())), Charsets.UTF_8)
private fun compress(source: ByteArray): ByteArray {
val deflater = Deflater()
deflater.setInput(source)
deflater.finish()
val bytesCompressed = ByteArray(Short.MAX_VALUE.toInt())
val numberOfBytesAfterCompression = deflater.deflate(bytesCompressed)
val returnValues = ByteArray(numberOfBytesAfterCompression)
System.arraycopy(bytesCompressed, 0, returnValues, 0, numberOfBytesAfterCompression)
return returnValues
}
}
Go
package main
import (
"bytes"
"compress/zlib"
"encoding/base64"
"github.com/pkg/errors"
)
// Encode takes a string and returns an encoded string in deflate + base64 format
func Encode(input string) (string, error) {
var buffer bytes.Buffer
writer, err := zlib.NewWriterLevel(&buffer, 9)
if err != nil {
return "", errors.Wrap(err, "fail to create the writer")
}
_, err = writer.Write([]byte(input))
writer.Close()
if err != nil {
return "", errors.Wrap(err, "fail to create the payload")
}
result := base64.URLEncoding.EncodeToString(buffer.Bytes())
return result, nil
}
PHP
<?php
function base64url_encode($data) {
return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
}
function encode($data) {
return base64url_encode(gzcompress($data));
}
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.