Generating MermaidJS Programmatically in Python

Introduction

MermaidJS is a great tool to generate diagrams in markdown. It supports various types of diagrams like flowcharts, sequence diagrams, gantt charts, etc.

However, sometimes you may want to generate these diagrams programmatically. In this article, we will see how to generate MermaidJS markup in Python.

What are the examples of when you want to generate MermaidJS markup programmatically?

• you try to visualize your call graph in your code
• you want to generate a sequence diagram from your logs
• you want to generate a flowchart from your business process
• you want to show a graph of how your domain entities are connected

Generating MermaidJS markup in Python

Let’s take a look at some real example.

For example, you have a json with a list of companies; and each company can have a parent company, and you want to visualize this hierarchy.

json = """ {
    "companies": [{
            "name": "Company A",
            "parent": ""
        },
        {
            "name": "Company B",
            "parent": "Company A"
        }, {
            "name": "Company C",
            "parent": "Company A"
        }, {
            "name": "Company D",
            "parent": "Company B"
        }, {
            "name": "Company E",
            "parent": "Company B"
        }, {
            "name": "Company F",
            "parent": "Company C"
        }, {
            "name": "Company G",
            "parent": "Company C"
        }, {
            "name": "Company H",
            "parent": "Company D"
        }, {
            "name": "Company I",
            "parent": "Company D"
        }, {
            "name": "Company J",
            "parent": "Company E"
        }, {
            "name": "Company K",
            "parent": "Company E"
        }, {
            "name": "Company L",
            "parent": "Company F"
        }, {
            "name": "Company M",
            "parent": "Company F"
        }, {
            "name": "Company N",
            "parent": "Company G"
        }, {
            "name": "Company O",
            "parent": "Company G"
        }
    ]
} """

You might want to generate mermaidJS markup, and then send it to the browser to visualize it.

First let’s parse the json:

import json
companies = json.loads(companies_json)["companies"]

Then we’ll use an open source library called mermaid-builder: https://pypi.org/project/mermaid-builder/

from mermaid_builder.flowchart import Chart, Node chart = Chart("companies")

Given that company names have special symbols (like spaces), we want to use safe syntax, and create Node object

for company in companies:
    chart.add_node(Node(company["name"]))
    if company["parent"]:
        chart.add_link_between(src=Node(company["parent"]), dest=Node(company["name"]))

Finally, we can generate the mermaidJS markup:

print(str(chart))

This will generate the following markup:

---
title: companies
---
flowchart TD
  CompanyA(Company A)
  CompanyB(Company B)
  CompanyC(Company C)
  CompanyD(Company D)
  CompanyE(Company E)
  CompanyF(Company F)
  CompanyG(Company G)
  CompanyH(Company H)
  CompanyI(Company I)
  CompanyJ(Company J)
  CompanyK(Company K)
  CompanyL(Company L)
  CompanyM(Company M)
  CompanyN(Company N)
  CompanyO(Company O)
  CompanyA --> CompanyB
  CompanyA --> CompanyC
  CompanyB --> CompanyD
  CompanyB --> CompanyE
  CompanyC --> CompanyF
  CompanyC --> CompanyG
  CompanyD --> CompanyH
  CompanyD --> CompanyI
  CompanyE --> CompanyJ
  CompanyE --> CompanyK
  CompanyF --> CompanyL
  CompanyF --> CompanyM
  CompanyG --> CompanyN
  CompanyG --> CompanyO

which can be previewed in the MermaidJS playground

final picture

final result

Next steps:

1. you can check our MermaidJs cheatsheets:
2. explore a MermaidJS playground
3. check some MermaidJS examples
4. some comparison with graphql

This article was originally published in DevToolsDaily blog

Originally published at https://www.devtoolsdaily.com on June 13, 2024.