Pako encode live diagram urls via Python

[dvulanov]

Hello,

I really appreciate the functionality of the mermaid live editor. For me, I'm generating my urls via python. I can encode64 graphs, but would also like to be able to encode larger graphs using pako.

Does anyone know the python implementation of pako (zlib) that's compatible with mermaid live?

Many thanks for any help,
Dan

[dvulanov]

I managed to figure it out with help from stackoverflow and debugging in the browser. Hopefully this helps someone else:

import base64
import json
import zlib

def js_string_to_byte(data):
    return bytes(data, 'ascii')

def js_bytes_to_string(data):
    return data.decode('ascii')

def js_btoa(data):
    return base64.b64encode(data)

def pako_deflate(data):
    compress = zlib.compressobj(9, zlib.DEFLATED, 15, 8,zlib.Z_DEFAULT_STRATEGY)
    compressed_data = compress.compress(data)
    compressed_data += compress.flush()
    return compressed_data

def genPakoLink(graphMarkdown: str):
    jGraph = {
            "code": graphMarkdown,
            "mermaid": {"theme": "default"}
        }
    byteStr = js_string_to_byte(json.dumps(jGraph))
    deflated = pako_deflate(byteStr)
    dEncode = js_btoa(deflated)
    link = 'http://mermaid.live/view#pako:' + js_bytes_to_string(dEncode)
    return link

[zeekoe]

While I'm doing Java now I tried to copy this implementation and it doesn't seem to work. Does mermaid still use Base64? It looks like some other character encoding.

[dvulanov]

Mermaid does use base64. If you are only encoding base64 and not then zipping, you need to switch the url encoding variable from #pako to #base64

[zeekoe]

#base64 should be good enough for me, thanks for the suggestion!

This doesn't work though:

https://mermaid.live/view#base64:Z3JhcGggTFIKRU5EX0VYRUNVVEVEKCgiZW5kIikpClBST0NFU1NfU1RBUlQoKCJzdGFydCIpKQpQUk9DRVNTX1NUQVJUIC0tPiBFTkRfRVhFQ1VURUQ=

An online base64 decoder does seem to make correct text out of it. Could you spot the error?

[zeekoe]

Got it! There were two problems:

• The main one is that the encoded data should be a json string containing more than just the graph definition
• The second one (where my confusion came from) is that a different Base64 character set is being used than the most used one; see https://stackoverflow.com/questions/13195143/range-of-valid-character-for-a-base-64-encoding

A snippet of Java code that works for me:

import java.io.IOException;
import java.nio.charset.StandardCharsets;
import java.util.Arrays;
import java.util.Base64;
import java.util.zip.Deflater;


class MermaidCodeThingy {
  public static void main(String[] args) throws IOException {
    String simpl = "{\"code\":\"graph LR\\nEND_EXECUTED((\\\"end\\\"))\\nPROCESS_START((\\\"start\\\"))\\nPROCESS_START --> END_EXECUTED\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"dark\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":false,\"editorMode\":\"code\"}";

    String base64String = Base64.getEncoder().encodeToString(simpl.getBytes(StandardCharsets.UTF_8));
    String url = "https://mermaid.live/view#base64:" + base64String.replace("/", "_").replace("+", "-");
    System.out.println(url);

    // And now compressed
    byte[] output = new byte[10000];
    Deflater compresser = new Deflater();
    compresser.setInput(simpl.getBytes(StandardCharsets.UTF_8));
    compresser.finish();
    int compressedDataLength = compresser.deflate(output);
    compresser.end();

    String compressedBase64String = Base64.getEncoder().encodeToString(Arrays.copyOfRange(output, 0, compressedDataLength));
    String url2 = "https://mermaid.live/view#pako:" + compressedBase64String.replace("/", "_").replace("+", "-");
    System.out.println(url2);
  }
}