Shiny.Maui.MermaidDiagrams

Shiny MAUI Diagrams

Render Mermaid JS flowchart diagrams natively in .NET MAUI using pure MAUI Graphics (IDrawable/ICanvas). No WebView, no SkiaSharp, no reflection — fully AOT-compliant.

Screenshots

Features

Mermaid Flowchart Rendering

Layout Engine

Theming

Interaction

Getting Started

1. Install

Add a project reference or NuGet package:

<ProjectReference Include="path/to/Shiny.Maui.MermaidDiagrams.csproj" />

2. Configure MauiProgram.cs

using Shiny.Maui.MermaidDiagrams.Extensions;

builder.UseShinyDiagrams();

3. Add XAML Namespace

xmlns:diagram="http://shiny.net/maui/diagrams"

4. Use the Control

<diagram:MermaidDiagramControl
    DiagramText="graph TD; A[Start] --> B{Decision}; B -->|Yes| C[Do It]; B -->|No| D[Skip];" />

XAML Usage

Basic Flowchart

<diagram:MermaidDiagramControl
    DiagramText="graph TD; A-->B; A-->C; B-->D; C-->D;" />

With Theme

<diagram:MermaidDiagramControl
    DiagramText="{Binding MermaidText}"
    Theme="{StaticResource DarkTheme}" />

With Zoom

<diagram:MermaidDiagramControl
    DiagramText="{Binding MermaidText}"
    ZoomLevel="1.5" />

Error Handling

<diagram:MermaidDiagramControl
    x:Name="diagram"
    DiagramText="{Binding MermaidText}" />

<Label Text="{Binding Source={x:Reference diagram}, Path=ParseError}"
       TextColor="Red"
       IsVisible="{Binding Source={x:Reference diagram}, Path=ParseError, Converter={StaticResource IsNotNull}}" />

Mermaid Syntax Reference

Directions

graph TD    %% Top to Bottom (default)
graph TB    %% Top to Bottom (alias)
graph BT    %% Bottom to Top
graph LR    %% Left to Right
graph RL    %% Right to Left

Node Shapes

A[Rectangle]
B(Rounded Rectangle)
C([Stadium])
D((Circle))
E{Diamond}
F{{Hexagon}}

Edge Types

A --> B       %% Solid arrow
A --- B       %% Solid line (no arrow)
A -.-> B      %% Dotted arrow
A -.- B       %% Dotted line
A ==> B       %% Thick arrow
A === B       %% Thick line

Edge Labels

A -->|Yes| B
A -->|No| C

Subgraphs

graph TD
    subgraph Frontend
        A[Web App]
        B[Mobile App]
    end
    subgraph Backend
        C[API Server]
        D[Database]
    end
    A --> C
    B --> C
    C --> D

Comments

graph TD
    %% This is a comment
    A --> B

Bindable Properties

Layout Options

Architecture

Mermaid Text → Lexer → Parser → DiagramModel → Layout Engine → LayoutResult → Renderer → ICanvas

Custom Themes

Create a custom theme by subclassing DiagramTheme:

public class MyCustomTheme : DiagramTheme
{
    public override Color BackgroundColor => Colors.White;
    public override Color TextColor => Colors.Black;
    public override float FontSize => 14;

    public override NodeRenderStyle DefaultNodeStyle => new()
    {
        FillColor = Color.FromArgb("#E3F2FD"),
        StrokeColor = Color.FromArgb("#1565C0"),
        TextColor = Colors.Black
    };

    public override EdgeRenderStyle DefaultEdgeStyle => new()
    {
        StrokeColor = Color.FromArgb("#757575"),
        LabelBackgroundColor = Colors.White,
        LabelTextColor = Colors.Black
    };

    public override SubgraphRenderStyle DefaultSubgraphStyle => new()
    {
        FillColor = Color.FromArgb("#F5F5F5"),
        StrokeColor = Color.FromArgb("#BDBDBD"),
        TitleColor = Colors.Black
    };
}

Programmatic Usage

You can use the parser and layout engine independently of the control:

using Shiny.Maui.MermaidDiagrams.Parsing;
using Shiny.Maui.MermaidDiagrams.Layout;

// Parse mermaid text to a model
var model = MermaidParser.Parse("graph TD; A-->B; B-->C;");

// Run layout
var engine = new SugiyamaLayoutEngine();
var options = new DiagramLayoutOptions { NodeWidth = 120, VerticalSpacing = 60 };
var result = engine.Layout(model, options);

// result.NodeLayouts, result.EdgeRoutes, result.SubgraphLayouts, result.TotalBounds

Requirements

• .NET 10.0+
• .NET MAUI (iOS, Android, Mac Catalyst)

License

MIT