@paulstefko/mermaidgen v0.1.1

mermaidgen

This package provides a JavaScript API for generating flowcharts using the MermaidJS syntax. Each chart, node, and connection can be manipulated as a JavaScript object.

Example

In the following JavaScript code...

const chart1 = new FlowChart().direction("LR");

const class1 = new ClassDef("class1").color("white").fill("green");

const node1 = new ChartNode("node1").text("Node 1").class(class1);
const node2 = new ChartNode("node2").text("Node 2").shape("pill");

const link1 = new LinkDef().stroke("blue");
const connection1 = new Connection()
  .from(node1)
  .to(node2, true)
  .text("Leads to")
  .class(link1);

chart1.addConnection(connection1).addClass(class1);

chart1.render()

...chart1.render() produces the following Mermaid chart:

flowchart LR
node1[Node 1] -->|Leads to| node2([Node 2])

classDef class1 color:white,fill:green
class node1 class1

linkStyle 0 stroke:blue

flowchart LR
node1[Node 1] -->|Leads to| node2([Node 2])

classDef class1 color:white,fill:green
class node1 class1

linkStyle 0 stroke:blue

How to Use

The mermaidgen API is designed to let you create charts using object composition by chaining together various methods that generate charts, nodes, and connections.

To create an object, just use the new keyword, i.e. const node1 = new ChartNode("node1"). You can apply whatever values you want to this object on the same line, too. So, if you wanted to create a node called 'node1' with the text "Start", shaped like a hexagon, with a class of coreScene, you could type:

const node1 = new ChartNode("node1").text("Start").shape("hex").class("coreScene");

For the most part, order of these methods doesn't matter. The resulting object will be the same. (The order you add nodes or connections to a chart may affect how the chart is ultimately rendered.)