Diagrams

Mermaid diagrams

Customize Mermaid styling with theme and theme_variables:

Theme only:

mo.mermaid(
    diagram,
    theme="neutral",
)

mo.mermaid(
    """
    graph TD
        A[Observed] --> B[Latent]
        B --> C[Posterior]
    """,
    theme="base",
    theme_variables={
        "primaryColor": "#E8EEF5",
        "primaryTextColor": "#1F2937",
        "primaryBorderColor": "#64748B",
        "lineColor": "#475569",
        "tertiaryColor": "#F8FAFC",
    },
)

theme supports "base", "dark", "default", "forest", "neutral", and "null".

By default, mo.mermaid(diagram) follows the app light/dark theme.

For supported theme_variables keys and defaults, see Mermaid's theming docs:

• Theme configuration
• Theme variables reference

Per Mermaid docs, custom theme_variables are reliably applied with theme="base".

If you pass theme_variables with theme=None, marimo automatically uses theme="base".

If you pass theme_variables with any explicit non-base theme, mo.mermaid(...) raises a ValueError.

If custom colors are not appearing, make sure you are not combining theme_variables with a non-base theme.

marimo.mermaid

mermaid(
    diagram: str,
    theme: str | None = None,
    theme_variables: dict[str, str] | None = None,
) -> Html

Render a diagram with Mermaid.

Mermaid is a tool for making diagrams such as flow charts and graphs. See the Mermaid documentation for details.

PARAMETER	DESCRIPTION
diagram	a string containing a Mermaid diagram TYPE: str
theme	optional Mermaid theme. See https://mermaid.js.org/config/theming.html#available-themes for available themes. If not provided, marimo picks a default based on app theme, unless theme_variables are provided. TYPE: str | None DEFAULT: None
theme_variables	optional Mermaid themeVariables overrides. Mermaid defines supported keys and behavior; see https://mermaid.js.org/config/theming.html#theme-variables. If provided with theme=None, marimo automatically sets theme="base" so custom colors are applied. TYPE: dict[str, str] | None DEFAULT: None

RETURNS	DESCRIPTION
Html	An Html object.

Example

diagram = '''
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
'''
mo.mermaid(diagram)

mo.mermaid(
    diagram,
    theme="base",
    theme_variables={
        "primaryColor": "#E8EEF5",
        "primaryTextColor": "#1F2937",
        "primaryBorderColor": "#64748B",
        "lineColor": "#475569",
        "tertiaryColor": "#F8FAFC",
    },
)