Flowchart

Original mermaid js flowchart documentation

All Flowcharts are composed of nodes, the geometric shapes and edges, the arrows or lines. The mermaid code defines the way that these nodes and edges are made and interact.

To create flowchart call static Create method as follows:

var chart = FlowChart.Create(Orientation.TopToBottom);
var cat = chart.TextNode("Cat", Shape.Circle);
var dog = chart.TextNode("Dog", Shape.Trapezoid);
chart.Link(cat, dog, Link.Open, "hates");

string mermaidSyntax = chart.Render();

Defining nodes

Flowchart only support text nodes. To create a text node call TextNode method and pass a title (optional) and node shape type

var cat = chart.TextNode("Cat", Shape.Circle);
var dog = chart.TextNode("Dog", Shape.Trapezoid);

Creating subgraphs

To create a subgraph call SubGraph method of chart with specific title (optional) and orientation

var house = chart.SubGraph("House", Orientation.TopToBottom);

Subgraphs also have methods to create inner subgraphs, nodes, etc.

var kitchen = house.TextNode("Kitchen", Shape.RoundEdges);
var bedroom = house.TextNode("Bedroom", Shape.RoundEdges);

Linking

To link nodes or subgraphs use Link method of chart or subgraphs with link members, link style and text (optional)

chart.Link(cat, kitchen, Link.Open, "prefers");
chart.Link(dog, bedroom, Link.Cross, "not allowed");

Interaction

Supported interactions:

1. Call function on click
2. Make function call on click
3. Set hyperlink for nodes

Call function on click

To call function on node click use OnClick method of chart.Interaction property Example: show cat node id to user

chart.Interaction.OnClick(cat, "alert", "my tooltip");

Make function call on click

To make custom function call on click use OnClickCall method of chart.Interation property Example: say "meow" to user when clicking cat node

chart.Interaction.OnClickCall(cat, "alert(\"meow\")", "tooltip");

Set hyperlink for nodes

To add hyperlink to a node use Hyperlink method of chart.Interaction property Example: open GitHub in new tab when clicking cat node

chart.Interaction.Hyperlink(cat, new Uri("https://github.com"), "tooltip", HyperlinkTarget.Blank);

Styling

Supported styling:

1. Define default node style
2. Define and set specific CSS class to a node
3. Set node style with CSS

Define default node style

To define default node style use DefaultStyle property of chart.Styling property

chart.Styling.DefaultStyle = "color:pink,background-color:black";

Set css class to a node

To define and set specific CSS class for specific node use AddClass/SetClass methods of chart.Styling property

var myClass = chart.Styling.AddClass("color:#bff");
chart.Styling.SetClass(kitchen, myClass);

Set node style with CSS

To set node style with css use Set method of chart.Styling property

chart.Styling.Set(cat, "fill: #bff");

Generating markdown

string markdownSyntax = chart.Render();