Every Mermaid theme, and when to use it

In mermaid.live, open the Configuration panel and pick from the built-in Theme dropdown: default, neutral, dark, forest, or base. In this editor there is nothing to configure — click a style in the export panel and any of the styles on this page applies instantly, with transparent background and 2x–4x export handled at export time. Beyond the five built-ins, custom looks are a themeVariables job; the free style cards above have copyable configs.

Use the free GitHub Dark style above: it matches GitHub's dark palette, and with the transparent background turned on the exported PNG sits on dark slides and dark docs without a white box. Inside plain Mermaid, the built-in dark theme does the same job with a different palette.

Add an init directive as the first line of the diagram: %%{init: {"theme": "base", "themeVariables": { ... }}}%% with the variables you want — primaryColor, primaryBorderColor, lineColor, and fontFamily do most of the work. The free style cards above expand into exactly this config, so you can copy one and change the colours.

Five built-ins: default, neutral, dark, forest, and base. base is the intended starting point for custom palettes — every additional style you see on this page is a set of themeVariables layered on top of it.

Yes — that is what the init directive is for. It lives on the first line of the diagram code, so GitHub, docs sites, and mermaid.live all render the same styling without any site-level configuration. Layout, padding, and export resolution stay in the renderer, which is what the export tool above handles.

A light style such as Clean Docs with the transparent background on light decks, so the diagram sits on the slide with no white box. On dark decks, use GitHub Dark — black default text disappears on dark slides. Export at 4x (or SVG) so labels stay sharp on projectors. The PowerPoint guide walks through the whole workflow.

Clean Docs on the white background. Document pages are white, so the exported PNG reads like a native figure instead of a pasted screenshot — the same logic as the Word and Google Docs insert guides.