MermaidJS FlexDiagram renders diagrams from MermaidJS text syntax.

MermaidJS is a text-based diagramming language that defines diagrams using structured text. FlexDiagram parses the MermaidJS input and generates the corresponding visual diagram.

This approach is suitable for:

• Rapid diagram creation

• Text-based diagram definitions

• Importing existing MermaidJS diagrams

Note:

FlexDiagram supports basic MermaidJS flowchart syntax. Some advanced MermaidJS features are not supported.

Create MermaidJS FlexDiagram

1. Create a MermaidJS text file.

2. Add FlexDiagram in XAML.

3. Load the MermaidJS graph.

4. Load the MermaidJS text.

Create MermaidJS Text File

flowchart TD
    A((Start ???E?E) --> B[Gather Ingredients ??????]
    B --> C[Prepare Dough ??]
    C --> D[Add Sauce ??]
    D --> E{Choose Toppings ??}
    E -->|Cheese ??| F[Add Cheese ??]
    E -->|Veggies ????| G[Add Vegetables ????]
    E -->|Meat ??| H[Add Meat ??]
    F --> I[Bake in Oven ??]
    G --> I
    H --> I
    I --> J[Slice & Enjoy ?E??]

Add FlexDiagram in XAML

<c1:FlexDiagram  x:Name="diagram"  ScaleMode="ScaleToFit"/>

Load MermaidJS Graph

var text = await LoadMermaidText();
// Load Mermaid.js graph into FlexDiagram
diagram.LoadMermaidGraph(text);                   

Load MermaidJS Text

async Task<string> LoadMermaidText()
{
    using var stream =
        await FileSystem.OpenAppPackageFileAsync("pizza.txt");
    using var reader = new StreamReader(stream);
    return await reader.ReadToEndAsync();
}

MermaidJS FlexDiagram Sample

XAML

<Grid Padding="10">
    <c1:FlexDiagram  x:Name="diagram"  ScaleMode="ScaleToFit"/>
</Grid>

Code-Behind

using C1.Diagram.Parser;
namespace FlexDiagramMaui_Mermaid
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            LoadMermaidDiagram();
        }
        async void LoadMermaidDiagram()
        {
            var text = await LoadMermaidText();
            diagram.LoadMermaidGraph(text);
        }
        async Task<string> LoadMermaidText()
        {
            using var stream =
                await FileSystem.OpenAppPackageFileAsync("pizza.txt");
            using var reader = new StreamReader(stream);
            return await reader.ReadToEndAsync();
        }
    }
}

Load MermaidJS from String

MermaidJS text can also be passed directly without using a file.

string mermaidText = @"