Mermaid live Code Renderer with python

Mermaid.live Code Renderer

Antonio Formato
4 min readFeb 21, 2024

Lately, I’ve been exploring the capabilities of Mermaid.js. Mermaid stands out as a JavaScript-based tool for diagramming and charting, known for its ability to interpret Markdown-inspired text definitions to create dynamic and customizable diagrams.

Personally, I frequently rely on mermaid.live, a Live Editor, to effortlessly generate, modify, and refine my charts.

In a recent project, TI Mindmap, I encountered the necessity of allowing users to edit code to rectify errors or dynamically alter the diagram. This requirement prompted me to develop a Python procedure that takes Markdown-inspired text definitions as input and generates a URL pointing to the Mermaid.live service — an invaluable solution for streamlining the editing process and enhancing user experience.

You can access the app at this link: https://encode-mermaid-diagram.streamlit.app

https://encode-mermaid-diagram.streamlit.app

Code:

Here is the Python code I created to publish this app on Streamlit. You can reuse the code in your scripts or Jupyter notebooks. I hope it can be helpful.

import streamlit as st
import base64
import json
import zlib

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

def pako_deflate(data):
compress = zlib.compressobj(9…

--

--