Create flowcharts with .NET, and then render the Mermaid code that can then be inserted into markdown or directly displayed in HTML with mermaid.js
Very simple example, to create a Left->Right graph (LR), with two nodes linked.
string direction = "LR";
List<Node> nodes = new()
{
new("node1", "This is node 1"),
new("node2", "This is node 2", Node.ShapeType.Hexagon),
new("node3", "This is node 3", Node.ShapeType.Rounded)
};
List<Link> links = new()
{
new Link("node1", "node2", "12s"),
new Link("node1", "node3", "3mins")
};
Flowchart flowchart = new(direction, nodes, links);
string result = flowchart.CalculateFlowchart();The mermaid result is below - which can be inserted into markdown in GitHub (blog announcement)
flowchart LR
node1[This is node 1]
node2{{This is node 2}}
node3(This is node 3)
node1--12s-->node2
node1--3mins-->node3
Which when rendered in mermaid, looks like this:
flowchart LR
node1[This is node 1]
node2{{This is node 2}}
node3(This is node 3)
node1--12s-->node2
node1--3mins-->node3
It's also possible to insert into HTML and rendor on the web. Here is a sample, referencing the mermaid.js CDN.
<h2>Production Graph</h2>
<body>
Here is a mermaid diagram:
<pre class="mermaid">
flowchart LR
node1[This is node 1]
node2{{This is node 2}}
node3(This is node 3)
node1--12s-->node2
node1--3mins-->node3
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}