Skip to content

Basic Usage

IchiSamaFR edited this page Jun 17, 2026 · 1 revision

Basic Usage

Flowchart

using MermaidSharp.Diagrams;
using MermaidSharp.Enums;
using MermaidSharp.Models;

var flowchart = new FlowchartDiagram("LR");
flowchart.Nodes.AddRange(new[]
{
    new FlowNode("node1", "This is node 1"),
    new FlowNode("node2", "This is node 2", FlowNodeShapeType.Hexagon),
    new FlowNode("node3", "This is node 3", FlowNodeShapeType.Rounded)
});
flowchart.Links.AddRange(new[]
{
    new FlowLink("node1", "node2", "12s"),
    new FlowLink("node1", "node3", "3mins")
});
string result = flowchart.CalculateDiagram();

Result:

flowchart LR
    node1[This is node 1]
    node2{{This is node 2}}
    node3(This is node 3)
    node1--12s-->node2
    node1--3mins-->node3

Entity Relationship Diagram

using MermaidSharp.Diagrams;
using MermaidSharp.Enums;
using MermaidSharp.Models;

var diagram = new EntityRelationshipDiagram();
diagram.Nodes.AddRange(new[]
{
    new EntityRelationNode("User", columns: new List<EntityRelationColumn>
    {
        new EntityRelationColumn("Id", "int", RelationConstraintType.PrimaryKey),
        new EntityRelationColumn("Name", "string"),
        new EntityRelationColumn("Email", "string")
    }),
    new EntityRelationNode("Order", columns: new List<EntityRelationColumn>
    {
        new EntityRelationColumn("OrderId", "int", RelationConstraintType.PrimaryKey),
        new EntityRelationColumn("UserId", "int", RelationConstraintType.ForeignKey),
        new EntityRelationColumn("OrderDate", "datetime")
    })
});
diagram.Links.Add(new EntityRelationLink("User", "Order", RelationLinkType.OneOrMore, RelationLinkType.ZeroOrMore, "UserId"));
string result = diagram.CalculateDiagram();

Result:

erDiagram
    User {
        int Id PK
        string Name
        string Email
    }
    Order {
        int OrderId PK
        int UserId FK
        datetime OrderDate
    }
    User }|--o{ Order : "UserId"

Class Diagram

using MermaidSharp.Diagrams;
using MermaidSharp.Enums;
using MermaidSharp.Models;

var diagram = new ClassDiagram();
diagram.Nodes.AddRange(new[]
{
    new ClassNode("Animal", properties: new List<ClassProperty>
    {
        new ClassProperty("Name", "string", ClassPropertyVisibility.Public),
        new ClassProperty("Age", "int", ClassPropertyVisibility.Protected),
    }, methods: new List<ClassMethod>
    {
        new ClassMethod("Speak", visibility: ClassPropertyVisibility.Public),
        new ClassMethod("Sleep", visibility: ClassPropertyVisibility.Protected),
    }),
    new ClassNode("Dog", properties: new List<ClassProperty>
    {
        new ClassProperty("Breed", "string", ClassPropertyVisibility.Public),
    }, methods: new List<ClassMethod>
    {
        new ClassMethod("Fetch", visibility: ClassPropertyVisibility.Public),
    })
});
diagram.Links.Add(new ClassLink("Animal", "Dog", ClassLinkType.Inheritance, "extends"));
string result = diagram.CalculateDiagram();

Result:

classDiagram
    class Animal {
        +string Name
        #int Age
        +Speak()
        #Sleep()
    }
    class Dog {
        +string Breed
        +Fetch()
    }
    Animal<|--Dog : extends

Git Graph

using MermaidSharp.Diagrams;

var gitGraph = new GitGraph();
gitGraph
    .Commit("Initial commit")
    .Branch("develop")
    .Checkout("develop")
    .Commit("Add feature structure")
    .Branch("feature/login")
    .Checkout("feature/login")
    .Commit("Implement login UI")
    .Commit("Add authentication", "v0.1")
    .Checkout("develop")
    .Merge("feature/login")
    .Checkout("main")
    .Merge("develop", "v1.0");
string result = gitGraph.CalculateDiagram();

Result:

gitGraph
    commit id: "Initial commit"
    branch develop
    checkout develop
    commit id: "Add feature structure"
    branch feature/login
    checkout feature/login
    commit id: "Implement login UI"
    commit id: "Add authentication" tag: "v0.1"
    checkout develop
    merge feature/login
    checkout main
    merge develop tag: "v1.0"

Pie Chart

using MermaidSharp.Diagrams;

var diagram = new PieChartDiagram("Pet Adoption", showData: true);
diagram
    .AddSlice("Dogs", 386)
    .AddSlice("Cats", 85)
    .AddSlice("Birds", 35)
    .AddSlice("Fish", 40);
string result = diagram.CalculateDiagram();

Result:

pie showData
    title Pet Adoption
    "Dogs" : 386
    "Cats" : 85
    "Birds" : 35
    "Fish" : 40

Quadrant Chart

using MermaidSharp.Diagrams;

var chart = new QuadrantChartDiagram();
chart.XAxisLeft = "Low";
chart.XAxisRight = "High";
chart.YAxisBottom = "Bottom";
chart.YAxisTop = "Top";
chart.Quadrant1 = "Q1";
chart.Quadrant2 = "Q2";
chart.Quadrant3 = "Q3";
chart.Quadrant4 = "Q4";
chart.Points.Add(new QuadrantChartPoint { Label = "A", X = 0.1, Y = 0.9, Color = "#ff0000", Radius = 10 });
chart.Points.Add(new QuadrantChartPoint { Label = "B", X = 0.5, Y = 0.5, Color = "#00ff00", Radius = 8 });
chart.Points.Add(new QuadrantChartPoint { Label = "C", X = 0.9, Y = 0.1, Color = "#0000ff", Radius = 12 });
chart.Points.Add(new QuadrantChartPoint { Label = "D", X = 0.3, Y = 0.7 });
chart.Points.Add(new QuadrantChartPoint { Label = "E", X = 0.7, Y = 0.3, Color = "#aaaaaa" });
string result = chart.CalculateDiagram();

Result:

quadrantChart
    x-axis Low --> High
    y-axis Bottom --> Top
    quadrant-1 Q1
    quadrant-2 Q2
    quadrant-3 Q3
    quadrant-4 Q4
    A: [0.1, 0.9] color: #ff0000, radius: 10
    B: [0.5, 0.5] color: #00ff00, radius: 8
    C: [0.9, 0.1] color: #0000ff, radius: 12
    D: [0.3, 0.7]
    E: [0.7, 0.3] color: #aaaaaa

XY Chart

using MermaidSharp.Diagrams;
using MermaidSharp.Enums;

var xyChart = new XYChartDiagram("Sales Over Time", "Month", "Sales");
xyChart.XAxis.Labels.AddRange(new[] { "Jan", "Feb", "Mar" });

var lineSeries = xyChart.AddSeries(XYSeriesType.Line);
lineSeries.SetPoint("Jan", 120);
lineSeries.SetPoint("Feb", 150);
lineSeries.SetPoint("Mar", 170);

var barSeries = xyChart.AddSeries(XYSeriesType.Bar);
barSeries.SetPoint("Jan", 140);
barSeries.SetPoint("Feb", 160);
barSeries.SetPoint("Mar", 180);

string result = xyChart.CalculateDiagram();

Result:

---
title: Sales Over Time
---
xychart
    x-axis "Month" ["Jan", "Feb", "Mar"]
    y-axis "Sales"
    line [120, 150, 170]
    bar [140, 160, 180]

Clone this wiki locally