Themes

DiagramTheme holds the colors and the font of a diagram. The library has the five themes of Mermaid: Default, Dark, Forest, Neutral and Base, with the colors Mermaid 12 computes for them. A theme is a record: change some of its colors with with:

var flowchart = new FlowchartDiagram { Theme = DiagramTheme.Dark, Direction = DiagramDirection.LeftToRight };
flowchart.AddEdge("build", "test");
flowchart.AddEdge("test", "deploy");

// A theme is a record: change some of its colors with "with"
var custom = new FlowchartDiagram { Theme = DiagramTheme.Default with { NodeBackground = (SceneColor)"#e0f2fe", NodeBorderColor = (SceneColor)"#0369a1" } };
custom.AddEdge("build", "test");

The properties have the names of the theme variables of Mermaid, in the documentation of each one.

Fonts

FontSize is 16 pixels, as in Mermaid. The texts are measured with the metrics of Helvetica, and the SVG asks for Helvetica, Arial, sans-serif. To measure with another font, set TextMeasurer (see text measurement). When the measurer has fonts (fonts of a scene), FontFamily chooses the family of the texts among them: the texts are measured and drawn with it. Otherwise it only changes the CSS font-family of the SVG.

Themes in Mermaid text

The configuration of a Mermaid text chooses the theme with theme, and changes its colors with themeVariables. The base theme derives every color from primaryColor, background and darkMode, as Mermaid does:

var document = MermaidDocument.Parse("""
    %%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#bbf7d0', 'lineColor': '#166534', 'fontSize': '14px'}}}%%
    flowchart LR
        A --> B
    """);

// The base theme derives the other colors from primaryColor, as Mermaid does
var theme = ((FlowchartDiagram)document.Content).Theme;
Assert.Equal((SceneColor)"#bbf7d0", theme.NodeBackground);
Assert.Equal((SceneColor)"#166534", theme.LineColor);
Assert.Equal(14, theme.FontSize);

The other themes take the variables as they are. The themes neo and redux of Mermaid 12, and the hand-drawn look, are not supported: the parser reports a warning and uses the default theme (or the dark theme for their dark variants).