Mermaid Python Integration Work for only certain types of diagrams

[WhySeeYC]

Hi 👋 community, I have loved the function of mermaid and would like to try to integrate it with Python plotting in Jupyter Notebook in vs code. However, it seems that the integration only work for certain type of diagrams: Here is the code:

import base64
from IPython.display import Image, display
import matplotlib.pyplot as plt

def mm(graph):
  graphbytes = graph.encode("ascii")
  base64_bytes = base64.b64encode(graphbytes)
  base64_string = base64_bytes.decode("ascii")
  display(Image(url="https://mermaid.ink/img/" + base64_string))

mm("""
gantt
    title Year1 Project Plan
    dateFormat  YYYY-MM-DD
    section Year1
    Literature Review: WP1, 2021-10-01, 120d
    Preliminary Data Exploration: WP2, after WP1,  120d
    Model and Algorithm Design: after WP2,  120d
""")

I have tried to test the example syntax for various diagram provided by the documentation.	The ones that work with this integration syntax	The ones that NOT work with this integration syntax
flowchart, sequence diagram, state diagram, pie chart.	class diagram, Entity Relationship Diagrams, user journey, Gantt chart, requirement diagram

Would somebody kindly help me with the integration? I would like to make the Gantt chart work. Here are the specs of my system:

• MacOS Big Sur: 11.6.2
• vs code: Version: 1.63.2
• Python: 3.8.2
• vs code Jupyter extension: v2021.11.1001550889

Am programming rookie 🐓 so please kindly suggest a step forward. If this likely is an jupyter issue, it will highly be appreciated to be pointed to where to seek for help as well. 🙏

[devova]

I assume there are some characters that are not allowed (reserved). I use MermaidJS for dynamic flowcharts, based on DB data, and have special escaping f-n

def safe(text: str) -> str:
    return text.replace('(', '<').replace(')', '>').replace("'", '`').replace('"', '`').replace('[', '<')\
        .replace(']', '>').replace('@', '*').replace('|', '/').replace('{', '<').replace('}', '>')

[rdemetrescu]

this is a good candidate for str.maketrans and str.translate :)

safe_table = str.maketrans({
    '(': '<',
    ')': '>',
    "'": '`',
    '"': '`',
    '[': '<',
    ']': '>',
    '@': '*',
    '|': '/',
    '{': '<',
    '}': '>',
})

# later...
print("... your unsafe string ...".translate(safe_table))

[WhySeeYC]

Hi @rdemetrescu and @devova, thank you so much for the response! I really appreciate it. However, I tried with the str.maketrans function and replace out those characters and re-run my defined mermaid string. It still only shows the preview icon. Further on, I checked whether the original string and translated string are the same, and it showed that they are actually the same (Please see screenshot). So I am not sure whether this implies the problem is at the encoding and decoding step.

[harper357]

I am also having this problem.

When I try to display the tutorial gantt:

gantt  
    title A Gantt Diagram  
    dateFormat  YYYY-MM-DD  
    section Section  
    A task           :a1, 2014-01-01, 30d  
    Another task     :after a1  , 20d  
    section Another  
    Task in sec      :2014-01-12  , 12d  
    another task      : 24d  

Using the python code, the url is :https://mermaid.ink/img/CmdhbnR0ICAKICAgIHRpdGxlIEEgR2FudHQgRGlhZ3JhbSAgCiAgICBkYXRlRm9ybWF0ICBZWVlZLU1NLUREICAKICAgIHNlY3Rpb24gU2VjdGlvbiAgCiAgICBBIHRhc2sgICAgICAgICAgIDphMSwgMjAxNC0wMS0wMSwgMzBkICAKICAgIEFub3RoZXIgdGFzayAgICAgOmFmdGVyIGExICAsIDIwZCAgCiAgICBzZWN0aW9uIEFub3RoZXIgIAogICAgVGFzayBpbiBzZWMgICAgICA6MjAxNC0wMS0xMiAgLCAxMmQgIAogICAgYW5vdGhlciB0YXNrICAgICAgOiAyNGQgIAo=

but if I use the live editor to generate the same gantt, I get: https://mermaid.live/edit#pako:eNpdUD2LwzAM_StCcwJx2slbIfSmTu1y4EXESmsusUuiDEfpfz_5cFqoMFh-H3pYD-yTZ7R4pSgC4CJoSZCR4QBf_2AX6DrTtJGehI9pnkjl31r16VR33cYu3EtIEc7lLvABhJYfeJclU0HbmH3dGD0V7Br_EsckN57fFkuD6JsMQDb5z7DNUOBL9oWY6RK2BZk2TzDtawJ9RoGFdq80VjixfjJ4Xc4jix2qcmKHVlvPA62jOHTxqVJaJZ1_Y49W5pUrXO95S2VxaAcaF37-AXkQZ9Y

MacOS Big Sur: 12.3 JupyterLab: Version: 3.6.2 Python: 3.9.6

[vaghawan]

Does anybody knows how to create live link for the graph generated? All examples I found were creating links for mermaid.ink, but I saw the show-me plugin in ChatGPT generating a editable mermaid.live link with the generated graph. Any help would be appreciated. I tried passing the base64 string, it doesn't work.

Thanks

[vaghawan]

For anyone coming across, the following works for me,

def mermaid_editor_link(code):
    mermaid_editor_json = {
        "code": code,
        "mermaid": {"theme": "default"},
        "updateEditor": False
    }

    mermaid_editor_json_string = json.dumps(mermaid_editor_json)
    buffer = base64.b64encode(mermaid_editor_json_string.encode()).decode()

    return 'https://mermaid.live/edit#' + buffer

[ouhammmourachid]

to avoid this problem I suggest using a library in Python that act as an interface for the meamaidjs mermaid-py it work like this :