Mermaid Diagrams | Theming

The diagram appearance is controlled by a DiagramTheme set on the Theme property. Four themes are included and you can create your own by subclassing DiagramTheme.

Built-in Themes

Theme	Background	Nodes	Edges	Best For
DefaultTheme	White	Blue fill, white text	Gray	Light mode apps
DarkTheme	Dark navy	Deep blue fill, red stroke	Red	Dark mode apps
ForestTheme	Light green	Green fill, white text	Green	Nature/organic UIs
NeutralTheme	Light gray	Gray fill, dark text	Dark gray	Minimal/document style

control.Theme = new DarkTheme();

<diagrams:MermaidDiagramControl
    DiagramText="{Binding MermaidText}">
    <diagrams:MermaidDiagramControl.Theme>
        <theming:ForestTheme />
    </diagrams:MermaidDiagramControl.Theme>
</diagrams:MermaidDiagramControl>

Custom Themes

Subclass DiagramTheme and override all abstract members:

using Shiny.Maui.MermaidDiagrams.Theming;

public sealed class MyCustomTheme : DiagramTheme
{
    public override Color BackgroundColor => Color.FromArgb("#fafafa");
    public override Color TextColor => Color.FromArgb("#222222");
    public override float FontSize => 13f;

    public override NodeRenderStyle DefaultNodeStyle => new()
    {
        FillColor = Color.FromArgb("#6c5ce7"),
        StrokeColor = Color.FromArgb("#5a4bd1"),
        TextColor = Colors.White,
        StrokeWidth = 2,
        CornerRadius = 8
    };

    public override EdgeRenderStyle DefaultEdgeStyle => new()
    {
        StrokeColor = Color.FromArgb("#636e72"),
        StrokeWidth = 1.5f,
        LabelBackgroundColor = Color.FromArgb("#fafafa"),
        LabelTextColor = Color.FromArgb("#222222")
    };

    public override SubgraphRenderStyle DefaultSubgraphStyle => new()
    {
        FillColor = Color.FromArgb("#f0f0f5"),
        StrokeColor = Color.FromArgb("#6c5ce7"),
        TitleColor = Color.FromArgb("#6c5ce7"),
        StrokeWidth = 1.5f,
        CornerRadius = 10
    };
}

Style Classes

NodeRenderStyle

Property	Type	Default	Description
FillColor	Color	—	Background fill color
StrokeColor	Color	—	Border stroke color
TextColor	Color	—	Label text color
StrokeWidth	float	2	Border width
CornerRadius	float	4	Corner radius for rectangular shapes

EdgeRenderStyle

Property	Type	Default	Description
StrokeColor	Color	—	Line color
StrokeWidth	float	2	Line width
LabelBackgroundColor	Color	—	Background behind edge labels
LabelTextColor	Color	—	Edge label text color

SubgraphRenderStyle

Property	Type	Default	Description
FillColor	Color	—	Subgraph background fill
StrokeColor	Color	—	Subgraph border color
TitleColor	Color	—	Subgraph title text color
StrokeWidth	float	1.5	Border width
CornerRadius	float	8	Corner radius of subgraph box

Per-Node Styling

Override GetNodeStyle(int index) to vary node colors by index position:

public override NodeRenderStyle GetNodeStyle(int index) =>
    (index % 3) switch
    {
        0 => new NodeRenderStyle
        {
            FillColor = Colors.SteelBlue,
            StrokeColor = Colors.DarkSlateBlue,
            TextColor = Colors.White
        },
        1 => new NodeRenderStyle
        {
            FillColor = Colors.MediumSeaGreen,
            StrokeColor = Colors.SeaGreen,
            TextColor = Colors.White
        },
        _ => DefaultNodeStyle
    };