Mermaid Diagrams | Control Properties

The MermaidDiagramControl is a ContentView that parses Mermaid flowchart text and renders it using MAUI Graphics.

<diagrams:MermaidDiagramControl
    DiagramText="{Binding MermaidText}"
    Theme="{Binding SelectedTheme}"
    ZoomLevel="{Binding Zoom}"
    ParseError="{Binding Error, Mode=OneWayToSource}"
    AllowPanning="True"
    AllowZooming="True" />

Properties

Property	Type	Default	Description
DiagramText	string	""	Mermaid flowchart syntax to parse and render
Theme	DiagramTheme	DefaultTheme	Theme controlling colors, fonts, and styles
ZoomLevel	float	1f	Zoom scale factor (0.1–5.0)
ParseError	string?	null	Error message when parsing fails, null on success
DiagramLayoutOptions	DiagramLayoutOptions	defaults	Layout spacing and sizing options
AllowPanning	bool	true	Enable pan gesture to scroll the diagram
AllowZooming	bool	true	Enable pinch-to-zoom gesture

Layout Options

Control the spacing and sizing of diagram elements via DiagramLayoutOptions:

control.DiagramLayoutOptions = new DiagramLayoutOptions
{
    NodeWidth = 150,
    NodeHeight = 50,
    HorizontalSpacing = 60,
    VerticalSpacing = 80,
    SubgraphPadding = 30,
    FontSize = 14,
    Margin = 40
};

Property	Type	Default	Description
NodeWidth	float	150	Width of each node
NodeHeight	float	50	Height of each node
HorizontalSpacing	float	60	Horizontal gap between nodes
VerticalSpacing	float	80	Vertical gap between layers
SubgraphPadding	float	30	Padding inside subgraph borders
FontSize	float	14	Font size for node and edge labels
Margin	float	40	Outer margin around the entire diagram

Error Handling

When parsing fails, ParseError is set with the error message and the diagram clears. Bind to this property to show validation feedback in a live editor:

control.SetBinding(
    MermaidDiagramControl.ParseErrorProperty,
    static (MyViewModel vm) => vm.ErrorMessage,
    mode: BindingMode.OneWayToSource);

Gestures

• Pan — Drag to scroll the diagram within the view. Enabled via AllowPanning.
• Pinch-to-zoom — Pinch gesture scales the diagram between 0.1x and 5x. Updates ZoomLevel (two-way).

Both gestures can be disabled independently for scenarios like embedded read-only diagrams.

Programmatic API

You can also parse and layout diagrams without the control:

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

var model = MermaidParser.Parse("graph TD\n    A --> B --> C");
var engine = new SugiyamaLayoutEngine();
var result = engine.Layout(model, new DiagramLayoutOptions());

// result.Nodes — positioned nodes
// result.Edges — routed edge paths
// result.Subgraphs — positioned subgraph bounds
// result.TotalWidth / result.TotalHeight — overall diagram size