From MermaidJS to .NET: Bringing Text-Based Diagrams into Your WinForms Apps

Text-based diagramming has become a favorite among developers for its speed, simplicity, and readability. By describing diagrams using plain text, teams can create, version, and share visual structures without relying on drag-and-drop editors or design tools.

In this blog, we’ll explore how text-based diagrams can be rendered directly inside WinForms applications using MermaidJS and FlexDiagram. We’ll show how MermaidJS syntax can be parsed and transformed into fully interactive diagrams, enabling developers to bring text-defined visuals into traditional .NET desktop environments.

Topics in this blog include:

• What is MermaidJS?
• Generate Text-Based Diagrams with FlexDiagram
• How to Visualize Existing MermaidJS Diagrams In Desktop Applications
• How to Quickly Render an Entire Diagram From a C# String in .NET

Ready to get started? Download ComponentOne Today!

What is MermaidJS?

MermaidJS allows developers to define diagrams using plain text that describe nodes, relationships, and flow, which are then rendered visually. Because it’s text-based, diagrams can be:

• Stored in source control
• Generated dynamically
• Edited without visual designers
• Embedded in documentation and applications

It’s widely used in developer tools, documentation platforms, and CI/CD workflows. By bridging MermaidJS and .NET, we can unlock a powerful hybrid workflow for defining diagrams in enterprise desktop applications. It’s an ideal solution for documentation tools, workflow editors, and any app that needs fast, flexible diagram creation without sacrificing control or performance.

Generate Text-Based Diagrams with FlexDiagram

ComponentOne FlexDiagram is a powerful .NET Windows Forms control that turns flat or hierarchical data into highly visual, interactive diagrams. It supports seamless diagram creation using the industry-standard format defined by MermaidJS. This simple, text-based format enables you to generate diagrams instantly within your .NET app with FlexDiagram doing the rendering.

You can integrate existing Mermaid content or empower end users to create diagrams using simple text-based markup. Let’s explore both use cases.

How to Visualize Existing MermaidJS Diagrams In Your Desktop Applications

Any desktop application whose users need to understand structure, flow, or dependencies can benefit dramatically from diagrams to improve clarity, usability, and decision-making. Examples include documentation tools, workflow editors, infrastructure monitors, decision support systems, training, simulation, and modeling software.

You may already have diagrams defined using MermaidJS and need to visualize them in your .NET application. With FlexDiagram, you can load a text resource file with one line of code by using the LoadMermaidGraph method. The C# code sample below first demonstrates how to load the file from your application resources.

// .NET C# code to load text resource file
var filename = "decision-tree.mermaid";
var asm = Assembly.GetExecutingAssembly();
var stream = asm.GetManifestResourceStream($"{asm.GetName().Name}.Resources.{filename}");
var text = "";
if (stream != null)
{
    using (var sr = new StreamReader(stream))
        text = sr.ReadToEnd();
}

FlexDiagram diagram = new FlexDiagram();
diagram.LoadMermaidGraph(text);

diagram.Header.Content = "Decision Tree";
this.Controls.Add(diagram);

At runtime, the diagram displays as below:

Let’s take a look at the “decision-tree.mermaid” text file that was used to generate this diagram. Observe how the syntax is used to determine the labels, shapes, and connections.

flowchart TD
    Application[Credit Application<br/>Received] --> CreditScore{Credit Score<br/>Assessment}
    
    CreditScore -->|Score ≥ 750| IncomeCheck1[Income Verification<br/>High Credit Score Path]
    CreditScore -->|Score 650-749| IncomeCheck2[Income Verification<br/>Medium Credit Score Path]
    CreditScore -->|Score < 650| IncomeCheck3[Income Verification<br/>Low Credit Score Path]
    
    IncomeCheck1 --> DTI1{Debt-to-Income<br/>Ratio ≤ 36%?}
    DTI1 -->|Yes| AutoApprove[Automatic Approval<br/>Standard Terms]
    DTI1 -->|No| ManualReview1[Manual Review<br/>Adjusted Terms]
    
    IncomeCheck2 --> DTI2{Debt-to-Income<br/>Ratio ≤ 28%?}
    DTI2 -->|Yes| AIAnalysis[AI Enhanced Analysis<br/>Alternative Data]
    DTI2 -->|No| ManualReview2[Manual Review<br/>Higher Interest Rate]
    
    AIAnalysis --> AIDecision{AI Risk<br/>Assessment}
    AIDecision -->|Low Risk| Approve2[Approval with<br/>Standard Terms]
    AIDecision -->|Medium Risk| Approve3[Approval with<br/>Adjusted Terms]
    AIDecision -->|High Risk| SpecialProduct[Specialized Product<br/>Offering]
    
    IncomeCheck3 --> DTI3{Debt-to-Income<br/>Ratio ≤ 20%?}
    DTI3 -->|Yes| Collateral{Collateral<br/>Available?}
    DTI3 -->|No| Reject1[Application Rejected<br/>Alternative Products Suggested]
    
    Collateral -->|Yes| SecuredLoan[Secured Loan<br/>Approval]
    Collateral -->|No| Reject2[Application Rejected<br/>Rebuild Credit Guidance]
    
    ManualReview1 --> FinalDecision1{Manual Review<br/>Decision}
    ManualReview2 --> FinalDecision2{Manual Review<br/>Decision}
    
    FinalDecision1 -->|Approve| Approve4[Approved with<br/>Conditions]
    FinalDecision1 -->|Deny| Reject3[Application Denied]
    FinalDecision2 -->|Approve| Approve5[Approved with<br/>Higher Rate]
    FinalDecision2 -->|Deny| Reject4[Application Denied]

If your text file supports Unicode characters, you can even use these characters to add icons and symbols to the diagram.

How to Quickly Render an Entire Diagram From a C# String in .NET

Even if you don’t already use MermaisJS syntax for your diagrams, you can take advantage of this feature with FlexDiagram and use the format to load entire diagrams from a simple string!

Below is a truncated example of the diagram shown above.

string s = "flowchart TD \n A((Start)) --> B[Gather Ingredients]";
flexDiagram1.LoadMermaidGraph(s);

This approach can be used for quick, simple, and dynamic diagrams in your C# .NET code. It is quicker than defining the diagram nodes manually.

Conclusion

MermaidJS has become a popular way for developers to create diagrams using simple, text-based syntax instead of manual drawing tools. While MermaidJS is commonly used in web-based documentation and Markdown editors, we can see how even desktop enterprise teams can take advantage of this format in their applications.

For the complete FlexDiagram sample shown above, check out the DiagramExplorer on GitHub.

Ready to try it out? Download ComponentOne Today!