View MermaidJS Graph passing the code or URL

[brunobarretofreitas]

I would like to have a feature where I can pass the mermaidjs code through URL, so It can be displayed on the screen: Example: https://mermaidjs.github.io/mermaid-live-editor/#/view/?code=graph TD; A[Christmas] -->|Get money| B(Go shopping);

[jihchi]

FYI.

I've made a PR and service to support embed image from code (#52).

You can now directly use base64 encoded mermaid code and get the image from mermaid.ink service:

For example, get base64 encoded mermaid code from mermaid-live-editor:

c2VxdWVuY2VEaWFncmFtCiAgICBwYXJ0aWNpcGFudCBBbGljZQogICAgcGFydGljaXBhbnQgQm9iCiAgICBBbGljZS0-Sm9objogSGVsbG8gSm9obiwgaG93IGFyZSB5b3U_CiAgICBsb29wIEhlYWx0aGNoZWNrCiAgICAgICAgSm9obi0-Sm9objogRmlnaHQgYWdhaW5zdCBoeXBvY2hvbmRyaWEKICAgIGVuZAogICAgTm90ZSByaWdodCBvZiBKb2huOiBSYXRpb25hbCB0aG91Z2h0cyA8YnIvPnByZXZhaWwuLi4KICAgIEpvaG4tLT5BbGljZTogR3JlYXQhCiAgICBKb2huLT5Cb2I6IEhvdyBhYm91dCB5b3U_CiAgICBCb2ItLT5Kb2huOiBKb2xseSBnb29kIQ

append the code after https://mermaid.ink/img/, for example:

https://mermaid.ink/img/c2VxdWVuY2VEaWFncmFtCiAgICBwYXJ0aWNpcGFudCBBbGljZQogICAgcGFydGljaXBhbnQgQm9iCiAgICBBbGljZS0-Sm9objogSGVsbG8gSm9obiwgaG93IGFyZSB5b3U_CiAgICBsb29wIEhlYWx0aGNoZWNrCiAgICAgICAgSm9obi0-Sm9objogRmlnaHQgYWdhaW5zdCBoeXBvY2hvbmRyaWEKICAgIGVuZAogICAgTm90ZSByaWdodCBvZiBKb2huOiBSYXRpb25hbCB0aG91Z2h0cyA8YnIvPnByZXZhaWwuLi4KICAgIEpvaG4tLT5BbGljZTogR3JlYXQhCiAgICBKb2huLT5Cb2I6IEhvdyBhYm91dCB5b3U_CiAgICBCb2ItLT5Kb2huOiBKb2xseSBnb29kIQ

you will get the jpg image:

[theroyakash]

@jihchi How can I generate those base64 encoded strings. I mean what is the algorithm? just put the graph as a text inside base64 algorithms? Do I do this like

BASE64ENCODE(graph):
    encoded_string <- encode(graph)
    return encoded_string

BASE64ENCODE("""
Graph TD
    A[Christmas] -->|Get money| B(Go shopping);
""")

[theroyakash]

Oh sorry, I've solved this. Using python and mermaid.ink service like this:

import base64

graph = """
graph LR;
    A-- 2 --->B;
    A-->C;
    B-->D;
    C-- 3 -->D;
"""

graphbytes = graph.encode("ascii") 

base64_bytes = base64.b64encode(graphbytes) 
base64_string = base64_bytes.decode("ascii") 

print(f"Encoded string: {base64_string}")
import requests, io
from PIL import Image
import matplotlib.pyplot as plt
img = Image.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
plt.imshow(img)

This reconstructs the graph like:

[songz]

FYI for future peeps running into this issue, follow their serialize/de-serialize function

https://github.com/mermaid-js/mermaid-live-editor/blob/b5978e6faf7635e39452855fb4d062d1452ab71b/src/lib/util/serde.ts#L19

[Ziqi-Yang]

Basically, it is:

import { deflate } from 'pako';
import { fromUint8Array } from 'js-base64';

const formatJSON = (data: unknown): string => JSON.stringify(data, undefined, 2);
const serialize = (state: string): string => {
  const data = new TextEncoder().encode(state);
  const compressed = deflate(data, { level: 9 }); // zlib level 9
  return fromUint8Array(compressed, true); // url safe base64 encoding
}

const defaultState = {
  code: `flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
  `,
  mermaid: formatJSON({
    theme: 'default'
  }),
  autoSync: true,
  updateDiagram: true
};

const json = JSON.stringify(defaultState);
console.log(json)
const serialized = serialize(json);
console.log(`pako:${serialized}`);

[sakurawald]

Oh sorry, I've solved this. Using python and mermaid.ink service like this:

import base64

graph = """
graph LR;
    A-- 2 --->B;
    A-->C;
    B-->D;
    C-- 3 -->D;
"""

graphbytes = graph.encode("ascii") 

base64_bytes = base64.b64encode(graphbytes) 
base64_string = base64_bytes.decode("ascii") 

print(f"Encoded string: {base64_string}")
import requests, io
from PIL import Image
import matplotlib.pyplot as plt
img = Image.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
plt.imshow(img)

This reconstructs the graph like:

This works.

[cpelley]

Oh sorry, I've solved this. Using python and mermaid.ink service like this: ...

Thanks for sharing your solution. I have used your solution for graph visualisation within an ipython notebook prior to the version where they added support for native mermaid diagrams.