Building a Live Mermaid Flowchart Renderer in .NET MAUI

Mermaid is great as text, but many apps need an editable, themeable preview on device. Luis Beltran’s MAUI UI July post parses flowchart syntax at runtime and draws rectangles, decisions, and edges with native MAUI controls.

What you’ll learn

• Why render natively — live edit/preview, cross-platform theming, and avoiding dynamic XAML compile complexity
• Supported Mermaid subset — flowchart TD/LR, rectangle and decision nodes, edges, and labeled edges
• Layered architecture — models, enums, parser, renderer, and page UI as separate concerns
• Parse then render — turn Mermaid text into a graph model, then materialize MAUI visuals from that model
• Where it fits — internal tools, docs apps, workflow builders, and education platforms

Open the full DEV guide for the step-by-step enums, models, parser, and renderer code.