Generating MermaidJS Flow Chart Diagrams Programmatically in JavaScript

Introduction

MermaidJS is a powerful, open-source JavaScript library that makes it easy to create flowcharts, sequence diagrams, Gantt charts, and other types of visual representations directly within your web application or documentation. It allows developers and non-technical users alike to create clear and interactive diagrams using a simple, human-readable syntax. By incorporating MermaidJS into your projects, you can improve communication, simplify complex concepts, and streamline project management.

In this article, we'll discuss how to generate MermaidJS flow chart diagrams programmatically in JavaScript. We'll start by learning about the different shapes and edges available in MermaidJS and then delve into how to construct these elements and combine them to create a comprehensive flowchart.

Creating Nodes with Different Shapes

MermaidJS offers a variety of shapes for nodes in your flowchart, which can be used to represent different entities or stages in your process. The following are some of the examples of how the syntax would look like for the nodes.

1. node with round edges: id(label)
2. database node: id[(label)]
3. circle node: id((label))

etc

Connecting Nodes with Edges

After creating your nodes, you'll want to connect them with edges to represent the flow of your process. MermaidJS provides several types of edges to help you visually convey different relationships between nodes:

1. Arrow: -->
2. Dashed arrow: -.->
3. Thick arrow: ==>

To connect two nodes, you simply write the unique identifiers of the nodes you want to connect, followed by the edge type. For example, to connect nodes A and B with an arrow, you would write:

graph LR
  A[Node A] --> B[Node B]

Generating Flowcharts Programmatically in JavaScript

As you can see the challenge with MermaidJS markdown is node and arrow shapes are not simply defined as attributes (like in GraphViz), they are special markdown.

So we need to implement some code to convert node and edge types into markdown.

Generate node shape markdown

function getNodeShapeSyntax(node) {
  switch (node.shape) {
    case 'rect':
      return `[${node.label}]`;
    case 'circ':
      return `(${node.label})`;
    case 'roundrect':
      return `[{${node.label}}]`;
    case 'diamond':
      return `{{${node.label}}}`;
    default:
      return `[${node.label}]`;
  }
}

Generate arrow shape

function getArrowTypeSyntax(edge) {
  switch (edge.type) {
    case 'arrow':
      return '-->';
    case 'dashed':
      return '-.->';
    case 'thick':
      return '==>';
    default:
      return '-->';
  }
}

Full code to generate mermaidJS markdown in javascript

function generateMermaidSyntax() {
  const nodes = [
    { id: 'A', shape: 'roundrect', label: 'Node A' },
    { id: 'B', shape: 'diamond', label: 'Node B' },
    { id: 'C', shape: 'circ', label: 'Node C' },
    { id: 'D', shape: 'rect', label: 'Node D' },
  ];

  const edges = [
    { from: 'A', to: 'B', type: 'arrow' },
    { from: 'B', to: 'C', type: 'dashed' },
    { from: 'C', to: 'D', type: 'thick' },
  ];

  let mermaidSyntax = 'graph LR\n';

  nodes.forEach(node => {
    const nodeSyntax = getNodeShapeSyntax(node);
    mermaidSyntax += `${node.id}${nodeSyntax}\n`;
  });

  edges.forEach(edge => {
    const arrowSyntax = getArrowTypeSyntax(edge);
    mermaidSyntax += `${edge.from}${arrowSyntax}${edge.to}\n`;
  });

  return mermaidSyntax;
}

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