Mermaid Diagrams | Getting Started

A .NET MAUI control that parses and renders Mermaid flowchart syntax natively using MAUI Graphics. No WebView, no SkiaSharp — pure IDrawable rendering with a hand-written recursive-descent parser and Sugiyama layered layout algorithm.

GitHub
MAUI
Blazor

Frameworks

.NET MAUI

Blazor

Screenshots

Flowchart	Editor	Themes	Subgraphs

Features

• Native MAUI Graphics rendering — Pure IDrawable implementation, no WebView or JavaScript
• Mermaid flowchart parsing — Recursive-descent parser for graph/flowchart syntax with TD, LR, BT, RL directions
• Node shapes — Rectangle, rounded rectangle, stadium, circle, diamond, and hexagon
• Edge styles — Solid, dotted, and thick lines with arrow or open endings and optional labels
• Subgraph support — Nested subgraph containers with titles and automatic layout
• Sugiyama layout algorithm — Automatic layered graph layout with cycle removal, crossing minimization, and edge routing
• 4 built-in themes — Default, Dark, Forest, and Neutral with full customization via DiagramTheme
• Gesture support — Pan and pinch-to-zoom with configurable enable/disable
• AOT-safe — Fully compatible with .NET trimming and NativeAOT
• Error handling — Parse errors exposed via ParseError bindable property for live editor scenarios

MAUIBlazor

• NuGet Packages
• Project File
• MauiProgram.cs

Shiny.Maui.Controls.MermaidDiagrams

Setup

1. Install the NuGet package

   dotnet add package Shiny.Maui.Controls.MermaidDiagrams

2. Add the control to your page

   <ContentPage xmlns:diagram="http://shiny.net/maui/diagrams">
       <diagram:MermaidDiagramControl
           DiagramText="{Binding MermaidText}"
           Theme="{Binding SelectedTheme}" />
   </ContentPage>

Quick Example

var control = new MermaidDiagramControl
{
    DiagramText = """
        graph TD
            A[Start] --> B{Decision}
            B -->|Yes| C[Action]
            B -->|No| D[End]
            C --> D
        """,
    Theme = new DefaultTheme()
};

The control automatically parses the Mermaid text, computes the layout, and renders the diagram. When DiagramText changes, the diagram updates immediately.

Supported Mermaid Syntax

graph TD           %% or: flowchart LR, BT, RL
    A[Rectangle]
    B(Rounded)
    C([Stadium])
    D((Circle))
    E{Diamond}
    F{{Hexagon}}

    A --> B          %% solid arrow
    B --- C          %% solid line (no arrow)
    C -.-> D         %% dotted arrow
    D -.- E          %% dotted line
    E ==> F          %% thick arrow
    F === A          %% thick line

    A -->|label| B   %% edge with label

    subgraph Group [My Group]
        G --> H
    end

AI Coding Assistant

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install plugins:

claude plugin install shiny-client@shiny

BLE, GPS, Jobs, Notifications, Push, HTTP Transfers, OBD, Music, Health, DataSync — iOS, Android, Windows, MacOS, Linux, Web

claude plugin install shiny-maui@shiny

Shell, Contact Store

claude plugin install shiny-controls@shiny

TableView, BottomSheet, PillView, ImageViewer, Scheduler, Markdown, Mermaid Diagrams — MAUI and Blazor

claude plugin install shiny-mediator@shiny

Mediator/CQRS with middleware and source generators

claude plugin install shiny-data@shiny

DocumentDB and Spatial data libraries

claude plugin install shiny-aspire@shiny

Orleans and Gluetun Aspire integrations

claude plugin install shiny-extensions@shiny

DI, Stores, Reflector, Localization, Hosting modules

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install plugins:

copilot plugin install shiny-client@shiny

BLE, GPS, Jobs, Notifications, Push, HTTP Transfers, OBD, Music, Health, DataSync — iOS, Android, Windows, MacOS, Linux, Web

copilot plugin install shiny-maui@shiny

Shell, Contact Store

copilot plugin install shiny-controls@shiny

TableView, BottomSheet, PillView, ImageViewer, Scheduler, Markdown, Mermaid Diagrams — MAUI and Blazor

copilot plugin install shiny-mediator@shiny

Mediator/CQRS with middleware and source generators

copilot plugin install shiny-data@shiny

DocumentDB and Spatial data libraries

copilot plugin install shiny-aspire@shiny

Orleans and Gluetun Aspire integrations

copilot plugin install shiny-extensions@shiny

DI, Stores, Reflector, Localization, Hosting modules

View Skills Repository

Next Steps

• Control Properties — All bindable properties and layout options
• Theming — Built-in themes and custom theme creation
• Release Notes