Skip to content
Shiny.NET
Blog
Welcome to our documentation!

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

Screenshots

Section titled “Screenshots”
FlowchartEditorThemesSubgraphs
Basic FlowchartEditorDark ThemeSubgraphs

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
Shiny.Maui.Controls.MermaidDiagramsNuGet package Shiny.Maui.Controls.MermaidDiagrams

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

claude plugin install shiny-client@shiny
BLE, GPS, Jobs, Notifications, Push, HTTP Transfers, OBD, Music — 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

Coming soon — Copilot plugin install instructions will be added here.

View Skills Repository

Next Steps

Section titled “Next Steps”