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

Changed files

• MyApp/
  • MyApp.csproj

MyApp.csproj

MyApp.csprojCopy

1<Project Sdk="Microsoft.NET.Sdk">2	<PropertyGroup>3		<BaseTargetFramework>net10.0</BaseTargetFramework>4		<TargetFrameworks>$(TargetFrameworks);$(BaseTargetFramework)-ios</TargetFrameworks>5		<TargetFrameworks>$(TargetFrameworks);$(BaseTargetFramework)-android</TargetFrameworks>6		<!--useful for unit testing - not enabled by default since it can cause issues and callout projects that don't support target-->7		<!--<TargetFrameworks Condition="'$(CI)' != 'true'">$(TargetFrameworks);$(BaseTargetFramework)</TargetFrameworks>-->8	9		<RootNamespace>MyApp</RootNamespace>10		<SingleProject>true</SingleProject>11		<ImplicitUsings>enable</ImplicitUsings>12		<Nullable>enable</Nullable>13		<ApplicationTitle>MyApp</ApplicationTitle>14		<ApplicationId>com.companyname.app</ApplicationId>15		<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>16		<ApplicationVersion>1</ApplicationVersion>17		18		<MauiXamlInflator>SourceGen</MauiXamlInflator>19		<!--uncomment below for XAML expressions in net10-->20		<!--<EnablePreviewFeatures>true</EnablePreviewFeatures>-->21​22		<MauiVersion>10.0.71</MauiVersion>23		<ShinyVersion>5.0.0</ShinyVersion>24		<ShinyControlsVersion>1.0.1-beta-0129</ShinyControlsVersion>25		<ShinyShellVersion>6.3.0</ShinyShellVersion>26		<ShinyDocumentDbVersion>9.1.0</ShinyDocumentDbVersion>27		<ShinyMauiHostingVersion>5.1.1</ShinyMauiHostingVersion>28​29		<EnableAotAnalyzer>true</EnableAotAnalyzer>30        <EnableTrimAnalyzer>true</EnableTrimAnalyzer>31        <EnableSingleFileAnalyzer>true</EnableSingleFileAnalyzer>32​33	</PropertyGroup>34​35	<!-- If you want to enable AOT for iOS, uncomment the below. Note that this will cause a significant increase in build time, but will result in faster runtime performance and smaller app size. You can also enable it for just Release builds if you prefer.36	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios' and '$(Configuration)' == 'Release'">37        <PublishAot>true</PublishAot>38    </PropertyGroup>39	-->40​41	<PropertyGroup Condition="'$(TargetFramework)' != '$(BaseTargetFramework)'">42		<OutputType>Exe</OutputType>43		<UseMaui>true</UseMaui>44		<DefineConstants>$(DefineConstants);PLATFORM</DefineConstants>45	</PropertyGroup>46​47	<PropertyGroup Condition="'$(TargetFramework)' == '$(BaseTargetFramework)'">48		<OutputType>Library</OutputType>49		<UseMaui>false</UseMaui>50	</PropertyGroup>51​52	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">53		<SupportedOSPlatformVersion>26.0</SupportedOSPlatformVersion>54		<TargetPlatformVersion>36</TargetPlatformVersion>55		<!--56		<EmbedAssembliesIntoApk Condition="'$(Configuration)' == 'Debug'">true</EmbedAssembliesIntoApk>57		<AndroidPackageFormats Condition="'$(Configuration)' == 'Release'">aab</AndroidPackageFormats>58		<AndroidLinkTool>r8</AndroidLinkTool>59		<AndroidLinkTool>proguard</AndroidLinkTool>60		-->61    </PropertyGroup>62​63	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios' AND '$(Configuration)' == 'Debug'">64        <!--forces the simulator to pickup entitlements-->65        <EnableCodeSigning>true</EnableCodeSigning>66        <CodesignRequireProvisioningProfile>true</CodesignRequireProvisioningProfile>67        <DisableCodesignVerification>true</DisableCodesignVerification>68    </PropertyGroup>69​70	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios' OR $([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">71		<SupportedOSPlatformVersion>15.0</SupportedOSPlatformVersion>72		<DefineConstants>$(DefineConstants);APPLE</DefineConstants>	73	</PropertyGroup>74​75	<ItemGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios' OR $([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">76		<BundleResource Include="Platforms\iOS\PrivacyInfo.xcprivacy" LogicalName="PrivacyInfo.xcprivacy" />77		78		<CustomEntitlements Include="keychain-access-groups" Type="StringArray" Value="%24(AppIdentifierPrefix)$(ApplicationId)" Visible="false" />79	</ItemGroup>80​81	<ItemGroup>82		<TrimmerRootDescriptor Include="Linker.xml" Condition="'$(Configuration)' == 'Release'" />83​84		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />85		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />86​87		<MauiImage Include="Resources\Images\*" />88		<MauiFont Include="Resources\Fonts\*" />89		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />90	</ItemGroup>91​92	<ItemGroup>93		<PackageReference Include="Shiny.Extensions.MauiHosting" Version="$(ShinyMauiHostingVersion)" />94		<PackageReference Include="Shiny.Maui.Controls.MermaidDiagrams" Version="$(ShinyControlsVersion)" />95		<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />96		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="10.0.9" Condition="'$(Configuration)' == 'Debug'" />97	</ItemGroup>98​99	<ItemGroup Condition="'$(TargetFramework)' != '$(BaseTargetFramework)'">100		<PackageReference Include="Shiny.Hosting.Maui" Version="$(ShinyVersion)" />101	</ItemGroup>102​103</Project>

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 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 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