Skip to content
Shiny.NET
Blog
ShinySoft TechnologiesShinySoft Technologies
Shiny Controls v1.0 - The Ultra Control Suite for .NET MAUI & BlazorO...M...G!

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 GitHub stars for shinyorg/controls
MAUI NuGet downloads for Shiny.Maui.Controls.MermaidDiagrams
Blazor NuGet downloads for Shiny.Blazor.Controls.MermaidDiagrams
Frameworks
.NET MAUI
Blazor

Screenshots

Section titled “Screenshots”

MAUI

Flowchart Editor Themes Subgraphs
Basic Flowchart Directions Themes Subgraphs
Interactive Editor

Blazor

Editor and rendered diagram Alternate theme
Editor and rendered diagram on Blazor Alternate theme on Blazor

Features

Section titled “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
Changed files
  • MyApp/
MyApp.csproj
MyApp.csproj
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.90</MauiVersion>23		<ShinyVersion>5.4.0</ShinyVersion>24		<ShinyControlsVersion>1.0.1-beta-0175</ShinyControlsVersion>25		<ShinyShellVersion>6.3.2</ShinyShellVersion>26		<ShinyDocumentDbVersion>13.1.2</ShinyDocumentDbVersion>27		<ShinyMauiHostingVersion>5.1.5</ShinyMauiHostingVersion>28		<ShinyHttpServerVersion>1.0.0-beta.9</ShinyHttpServerVersion>29​30		<EnableAotAnalyzer>true</EnableAotAnalyzer>31        <EnableTrimAnalyzer>true</EnableTrimAnalyzer>32        <EnableSingleFileAnalyzer>true</EnableSingleFileAnalyzer>33​34	</PropertyGroup>35​36	<!-- 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.37	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios' and '$(Configuration)' == 'Release'">38        <PublishAot>true</PublishAot>39    </PropertyGroup>40	-->41​42	<PropertyGroup Condition="'$(TargetFramework)' != '$(BaseTargetFramework)'">43		<OutputType>Exe</OutputType>44		<UseMaui>true</UseMaui>45		<DefineConstants>$(DefineConstants);PLATFORM</DefineConstants>46	</PropertyGroup>47​48	<PropertyGroup Condition="'$(TargetFramework)' == '$(BaseTargetFramework)'">49		<OutputType>Library</OutputType>50		<UseMaui>false</UseMaui>51	</PropertyGroup>52​53	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">54		<SupportedOSPlatformVersion>26.0</SupportedOSPlatformVersion>55		<TargetPlatformVersion>36</TargetPlatformVersion>56		<!--57		<EmbedAssembliesIntoApk Condition="'$(Configuration)' == 'Debug'">true</EmbedAssembliesIntoApk>58		<AndroidPackageFormats Condition="'$(Configuration)' == 'Release'">aab</AndroidPackageFormats>59		<AndroidLinkTool>r8</AndroidLinkTool>60		<AndroidLinkTool>proguard</AndroidLinkTool>61		-->62    </PropertyGroup>63​64	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios' AND '$(Configuration)' == 'Debug'">65        <!--forces the simulator to pickup entitlements-->66        <EnableCodeSigning>true</EnableCodeSigning>67        <CodesignRequireProvisioningProfile>true</CodesignRequireProvisioningProfile>68        <DisableCodesignVerification>true</DisableCodesignVerification>69    </PropertyGroup>70​71	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios' OR $([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">72		<SupportedOSPlatformVersion>15.0</SupportedOSPlatformVersion>73		<DefineConstants>$(DefineConstants);APPLE</DefineConstants>	74	</PropertyGroup>75​76	<ItemGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios' OR $([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">77		<BundleResource Include="Platforms\iOS\PrivacyInfo.xcprivacy" LogicalName="PrivacyInfo.xcprivacy" />78		79		<CustomEntitlements Include="keychain-access-groups" Type="StringArray" Value="%24(AppIdentifierPrefix)$(ApplicationId)" Visible="false" />80	</ItemGroup>81​82	<ItemGroup>83		<TrimmerRootDescriptor Include="Linker.xml" Condition="'$(Configuration)' == 'Release'" />84​85		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />86		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />87​88		<MauiImage Include="Resources\Images\*" />89		<MauiFont Include="Resources\Fonts\*" />90		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />91	</ItemGroup>92​93	<ItemGroup>94		<PackageReference Include="Shiny.Extensions.MauiHosting" Version="$(ShinyMauiHostingVersion)" />95		<PackageReference Include="Shiny.Maui.Controls.MermaidDiagrams" Version="$(ShinyControlsVersion)" />96		<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />97		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="10.0.10" Condition="'$(Configuration)' == 'Debug'" />98	</ItemGroup>99​100	<ItemGroup Condition="'$(TargetFramework)' != '$(BaseTargetFramework)'">101		<PackageReference Include="Shiny.Hosting.Maui" Version="$(ShinyVersion)" />102	</ItemGroup>103​104</Project>

Setup

Section titled “Setup”

  1. Install the NuGet package

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

Section titled “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

Section titled “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

Section titled “AI Coding Assistant”

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

Step 1 — Add the marketplace:

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

Step 2 — Install the plugin:

copilot plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

View Skills Repository

Next Steps

Section titled “Next Steps”