10 free themes · copy-ready config

Mermaid diagram themes

Every theme here is plain Mermaid config: copy the block, paste it above any Mermaid diagram, and the theme travels with the code. Or open the diagram in FlowViz with the theme already applied.

Last updated: · How Mermaid theming works · Where it works

Light themes

For white and light pages: most docs, READMEs in light mode, slides.

Default

light?theme=default

Classic blue. Mermaid built-in. Mindmap, timeline and Gantt section labels are white on mid-tone fills, about 2.6–3:1.

  • Flowchart diagram in the Default Mermaid themeFlowchart
  • Sequence diagram in the Default Mermaid themeSequence
  • Pie diagram in the Default Mermaid themePie
  • Mindmap diagram in the Default Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: default
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

Neutral

light?theme=neutral

Clean grayscale. Mermaid built-in. Some mindmap and kanban labels fall to about 2.8–4.2:1.

  • Flowchart diagram in the Neutral Mermaid themeFlowchart
  • Sequence diagram in the Neutral Mermaid themeSequence
  • Pie diagram in the Neutral Mermaid themePie
  • Mindmap diagram in the Neutral Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: neutral
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

Forest

light?theme=forest

Natural greens. Mermaid built-in. Git graph branch labels and mindmap sections are white on light green, about 2:1.

  • Flowchart diagram in the Forest Mermaid themeFlowchart
  • Sequence diagram in the Forest Mermaid themeSequence
  • Pie diagram in the Forest Mermaid themePie
  • Mindmap diagram in the Forest Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: forest
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

Base

light?theme=base

Minimal. Mermaid built-in. Git graph, mindmap and timeline labels are about 4:1; Gantt critical tasks about 3.2:1.

  • Flowchart diagram in the Base Mermaid themeFlowchart
  • Sequence diagram in the Base Mermaid themeSequence
  • Pie diagram in the Base Mermaid themePie
  • Mindmap diagram in the Base Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: base
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

Ocean

light?theme=ocean

Cool blues.

  • Flowchart diagram in the Ocean Mermaid themeFlowchart
  • Sequence diagram in the Ocean Mermaid themeSequence
  • Pie diagram in the Ocean Mermaid themePie
  • Mindmap diagram in the Ocean Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: base
  themeVariables: {darkMode: false, background: "#ffffff", primaryColor: "#caf0f8", primaryTextColor: "#03045e", primaryBorderColor: "#0077b6", secondaryColor: "#90e0ef", secondaryTextColor: "#03045e", secondaryBorderColor: "#0077b6", tertiaryColor: "#e6f8fc", tertiaryTextColor: "#03045e", tertiaryBorderColor: "#0077b6", lineColor: "#0077b6", arrowheadColor: "#0077b6", textColor: "#03045e", titleColor: "#03045e", mainBkg: "#caf0f8", nodeBkg: "#caf0f8", nodeBorder: "#0077b6", nodeTextColor: "#03045e", clusterBkg: "#e6f8fc", clusterBorder: "#0077b6", defaultLinkColor: "#0077b6", edgeLabelBackground: "#ffffff", errorBkgColor: "#fde2e1", errorTextColor: "#03045e", noteBkgColor: "#fff8dc", noteTextColor: "#03045e", noteBorderColor: "#e0b000", actorBkg: "#caf0f8", actorBorder: "#0077b6", actorTextColor: "#03045e", actorLineColor: "#0077b6", signalColor: "#0077b6", signalTextColor: "#03045e", labelBoxBkgColor: "#caf0f8", labelBoxBorderColor: "#0077b6", labelTextColor: "#03045e", loopTextColor: "#03045e", activationBkgColor: "#90e0ef", activationBorderColor: "#0077b6", sequenceNumberColor: "#ffffff", stateBkg: "#caf0f8", stateLabelColor: "#03045e", labelColor: "#03045e", labelBackgroundColor: "#ffffff", compositeBackground: "#e6f8fc", compositeTitleBackground: "#caf0f8", compositeBorder: "#0077b6", altBackground: "#e6f8fc", transitionColor: "#0077b6", transitionLabelColor: "#03045e", specialStateColor: "#0077b6", innerEndBackground: "#0077b6", classText: "#03045e", attributeBackgroundColorOdd: "#caf0f8", attributeBackgroundColorEven: "#e6f8fc", rowOdd: "#caf0f8", rowEven: "#e6f8fc", sectionBkgColor: "#e6f8fc", altSectionBkgColor: "#ffffff", sectionBkgColor2: "#90e0ef", excludeBkgColor: "#e6f8fc", gridColor: "#90e0ef", taskBkgColor: "#caf0f8", taskBorderColor: "#0077b6", taskTextColor: "#03045e", taskTextLightColor: "#03045e", taskTextDarkColor: "#03045e", taskTextOutsideColor: "#03045e", taskTextClickableColor: "#0077b6", activeTaskBkgColor: "#bde0fe", activeTaskBorderColor: "#0077b6", doneTaskBkgColor: "#e5e7eb", doneTaskBorderColor: "#6b7280", critBkgColor: "#fde2e1", critBorderColor: "#c1121f", todayLineColor: "#c1121f", vertLineColor: "#0077b6", pieTitleTextColor: "#03045e", pieSectionTextColor: "#03045e", pieLegendTextColor: "#03045e", pieStrokeColor: "#ffffff", pieOuterStrokeColor: "#0077b6", pieOpacity: "1", quadrant1Fill: "#90e0ef", quadrant2Fill: "#a9def9", quadrant3Fill: "#ade8f4", quadrant4Fill: "#a5f3fc", quadrant1TextFill: "#03045e", quadrant2TextFill: "#03045e", quadrant3TextFill: "#03045e", quadrant4TextFill: "#03045e", quadrantPointFill: "#0077b6", quadrantPointTextFill: "#03045e", quadrantXAxisTextFill: "#03045e", quadrantYAxisTextFill: "#03045e", quadrantTitleFill: "#03045e", quadrantInternalBorderStrokeFill: "#0077b6", quadrantExternalBorderStrokeFill: "#0077b6", requirementBackground: "#caf0f8", requirementBorderColor: "#0077b6", requirementTextColor: "#03045e", relationColor: "#0077b6", relationLabelBackground: "#ffffff", relationLabelColor: "#03045e", commitLabelColor: "#03045e", commitLabelBackground: "#ffffff", tagLabelColor: "#03045e", tagLabelBackground: "#caf0f8", tagLabelBorder: "#0077b6", archEdgeColor: "#0077b6", archEdgeArrowColor: "#0077b6", archGroupBorderColor: "#0077b6", personBkg: "#caf0f8", personBorder: "#0077b6", pie1: "#90e0ef", cScale0: "#90e0ef", cScaleLabel0: "#03045e", fillType0: "#90e0ef", pie2: "#48cae4", cScale1: "#48cae4", cScaleLabel1: "#03045e", fillType1: "#48cae4", pie3: "#a9def9", cScale2: "#a9def9", cScaleLabel2: "#03045e", fillType2: "#a9def9", pie4: "#00b4d8", cScale3: "#00b4d8", cScaleLabel3: "#03045e", fillType3: "#00b4d8", pie5: "#ade8f4", cScale4: "#ade8f4", cScaleLabel4: "#03045e", fillType4: "#ade8f4", pie6: "#7dd3fc", cScale5: "#7dd3fc", cScaleLabel5: "#03045e", fillType5: "#7dd3fc", pie7: "#a5f3fc", cScale6: "#a5f3fc", cScaleLabel6: "#03045e", fillType6: "#a5f3fc", pie8: "#8ecae6", cScale7: "#8ecae6", cScaleLabel7: "#03045e", fillType7: "#8ecae6", pie9: "#67e8f9", cScale8: "#67e8f9", cScaleLabel8: "#03045e", pie10: "#bde0fe", cScale9: "#bde0fe", cScaleLabel9: "#03045e", pie11: "#99f6e4", cScale10: "#99f6e4", cScaleLabel10: "#03045e", pie12: "#c7d2fe", cScale11: "#c7d2fe", cScaleLabel11: "#03045e", git0: "#0077b6", gitInv0: "#ffffff", gitBranchLabel0: "#ffffff", git1: "#023e8a", gitInv1: "#ffffff", gitBranchLabel1: "#ffffff", git2: "#0e7490", gitInv2: "#ffffff", gitBranchLabel2: "#ffffff", git3: "#1d4ed8", gitInv3: "#ffffff", gitBranchLabel3: "#ffffff", git4: "#0f766e", gitInv4: "#ffffff", gitBranchLabel4: "#ffffff", git5: "#155e75", gitInv5: "#ffffff", gitBranchLabel5: "#ffffff", git6: "#1e40af", gitInv6: "#ffffff", gitBranchLabel6: "#ffffff", git7: "#006d8f", gitInv7: "#ffffff", gitBranchLabel7: "#ffffff", xyChart: {backgroundColor: "#ffffff", titleColor: "#03045e", dataLabelColor: "#03045e", xAxisTitleColor: "#03045e", xAxisLabelColor: "#03045e", xAxisTickColor: "#03045e", xAxisLineColor: "#03045e", yAxisTitleColor: "#03045e", yAxisLabelColor: "#03045e", yAxisTickColor: "#03045e", yAxisLineColor: "#03045e", plotColorPalette: "#0077b6,#023e8a,#0e7490,#1d4ed8,#0f766e,#155e75,#1e40af,#006d8f"}, radar: {axisColor: "#0077b6", graticuleColor: "#90e0ef"}, packet: {startByteColor: "#03045e", endByteColor: "#03045e", labelColor: "#03045e", titleColor: "#03045e", blockStrokeColor: "#0077b6", blockFillColor: "#caf0f8"}}
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

Sunset

light?theme=sunset

Warm oranges.

  • Flowchart diagram in the Sunset Mermaid themeFlowchart
  • Sequence diagram in the Sunset Mermaid themeSequence
  • Pie diagram in the Sunset Mermaid themePie
  • Mindmap diagram in the Sunset Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: base
  themeVariables: {darkMode: false, background: "#ffffff", primaryColor: "#fefae0", primaryTextColor: "#264653", primaryBorderColor: "#f4a261", secondaryColor: "#f4a261", secondaryTextColor: "#264653", secondaryBorderColor: "#f4a261", tertiaryColor: "#fff6e0", tertiaryTextColor: "#264653", tertiaryBorderColor: "#f4a261", lineColor: "#b7791f", arrowheadColor: "#b7791f", textColor: "#264653", titleColor: "#264653", mainBkg: "#fefae0", nodeBkg: "#fefae0", nodeBorder: "#e76f51", nodeTextColor: "#264653", clusterBkg: "#fff6e0", clusterBorder: "#f4a261", defaultLinkColor: "#b7791f", edgeLabelBackground: "#ffffff", errorBkgColor: "#fde2e1", errorTextColor: "#264653", noteBkgColor: "#fff3c4", noteTextColor: "#264653", noteBorderColor: "#e9c46a", actorBkg: "#fefae0", actorBorder: "#f4a261", actorTextColor: "#264653", actorLineColor: "#b7791f", signalColor: "#b7791f", signalTextColor: "#264653", labelBoxBkgColor: "#fefae0", labelBoxBorderColor: "#f4a261", labelTextColor: "#264653", loopTextColor: "#264653", activationBkgColor: "#f4a261", activationBorderColor: "#f4a261", sequenceNumberColor: "#000000", stateBkg: "#fefae0", stateLabelColor: "#264653", labelColor: "#264653", labelBackgroundColor: "#ffffff", compositeBackground: "#fff6e0", compositeTitleBackground: "#fefae0", compositeBorder: "#f4a261", altBackground: "#fff6e0", transitionColor: "#b7791f", transitionLabelColor: "#264653", specialStateColor: "#b7791f", innerEndBackground: "#f4a261", classText: "#264653", attributeBackgroundColorOdd: "#fefae0", attributeBackgroundColorEven: "#fff6e0", rowOdd: "#fefae0", rowEven: "#fff6e0", sectionBkgColor: "#fff6e0", altSectionBkgColor: "#ffffff", sectionBkgColor2: "#f4a261", excludeBkgColor: "#fff6e0", gridColor: "#f4d8b0", taskBkgColor: "#fefae0", taskBorderColor: "#f4a261", taskTextColor: "#264653", taskTextLightColor: "#264653", taskTextDarkColor: "#264653", taskTextOutsideColor: "#264653", taskTextClickableColor: "#f4a261", activeTaskBkgColor: "#ffe8d6", activeTaskBorderColor: "#e76f51", doneTaskBkgColor: "#e9ecef", doneTaskBorderColor: "#8d99ae", critBkgColor: "#fde2e1", critBorderColor: "#d62828", todayLineColor: "#d62828", vertLineColor: "#b7791f", pieTitleTextColor: "#264653", pieSectionTextColor: "#264653", pieLegendTextColor: "#264653", pieStrokeColor: "#ffffff", pieOuterStrokeColor: "#b7791f", pieOpacity: "1", quadrant1Fill: "#f4a261", quadrant2Fill: "#f2cc8f", quadrant3Fill: "#f6bd9f", quadrant4Fill: "#ffe08a", quadrant1TextFill: "#264653", quadrant2TextFill: "#264653", quadrant3TextFill: "#264653", quadrant4TextFill: "#264653", quadrantPointFill: "#e76f51", quadrantPointTextFill: "#264653", quadrantXAxisTextFill: "#264653", quadrantYAxisTextFill: "#264653", quadrantTitleFill: "#264653", quadrantInternalBorderStrokeFill: "#f4a261", quadrantExternalBorderStrokeFill: "#f4a261", requirementBackground: "#fefae0", requirementBorderColor: "#f4a261", requirementTextColor: "#264653", relationColor: "#b7791f", relationLabelBackground: "#ffffff", relationLabelColor: "#264653", commitLabelColor: "#264653", commitLabelBackground: "#ffffff", tagLabelColor: "#264653", tagLabelBackground: "#fefae0", tagLabelBorder: "#f4a261", archEdgeColor: "#b7791f", archEdgeArrowColor: "#b7791f", archGroupBorderColor: "#f4a261", personBkg: "#fefae0", personBorder: "#f4a261", pie1: "#f4a261", cScale0: "#f4a261", cScaleLabel0: "#264653", fillType0: "#f4a261", pie2: "#ffd166", cScale1: "#ffd166", cScaleLabel1: "#264653", fillType1: "#ffd166", pie3: "#f2cc8f", cScale2: "#f2cc8f", cScaleLabel2: "#264653", fillType2: "#f2cc8f", pie4: "#e9c46a", cScale3: "#e9c46a", cScaleLabel3: "#264653", fillType3: "#e9c46a", pie5: "#f6bd9f", cScale4: "#f6bd9f", cScaleLabel4: "#264653", fillType4: "#f6bd9f", pie6: "#f8b4a8", cScale5: "#f8b4a8", cScaleLabel5: "#264653", fillType5: "#f8b4a8", pie7: "#ffe08a", cScale6: "#ffe08a", cScaleLabel6: "#264653", fillType6: "#ffe08a", pie8: "#f9c784", cScale7: "#f9c784", cScaleLabel7: "#264653", fillType7: "#f9c784", pie9: "#e5b3a3", cScale8: "#e5b3a3", cScaleLabel8: "#264653", pie10: "#fec89a", cScale9: "#fec89a", cScaleLabel9: "#264653", pie11: "#d4e09b", cScale10: "#d4e09b", cScaleLabel10: "#264653", pie12: "#ffb4a2", cScale11: "#ffb4a2", cScaleLabel11: "#264653", git0: "#e76f51", gitInv0: "#000000", gitBranchLabel0: "#000000", git1: "#b7791f", gitInv1: "#000000", gitBranchLabel1: "#000000", git2: "#2a9d8f", gitInv2: "#000000", gitBranchLabel2: "#000000", git3: "#264653", gitInv3: "#ffffff", gitBranchLabel3: "#ffffff", git4: "#c2410c", gitInv4: "#ffffff", gitBranchLabel4: "#ffffff", git5: "#9c6644", gitInv5: "#ffffff", gitBranchLabel5: "#ffffff", git6: "#d62828", gitInv6: "#ffffff", gitBranchLabel6: "#ffffff", git7: "#6a4c93", gitInv7: "#ffffff", gitBranchLabel7: "#ffffff", xyChart: {backgroundColor: "#ffffff", titleColor: "#264653", dataLabelColor: "#264653", xAxisTitleColor: "#264653", xAxisLabelColor: "#264653", xAxisTickColor: "#264653", xAxisLineColor: "#264653", yAxisTitleColor: "#264653", yAxisLabelColor: "#264653", yAxisTickColor: "#264653", yAxisLineColor: "#264653", plotColorPalette: "#e76f51,#b7791f,#2a9d8f,#264653,#c2410c,#9c6644,#d62828,#6a4c93"}, radar: {axisColor: "#b7791f", graticuleColor: "#f4d8b0"}, packet: {startByteColor: "#264653", endByteColor: "#264653", labelColor: "#264653", titleColor: "#264653", blockStrokeColor: "#f4a261", blockFillColor: "#fefae0"}}
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

High Contrast

light?theme=high-contrast

Black on white, AAA text.

  • Flowchart diagram in the High Contrast Mermaid themeFlowchart
  • Sequence diagram in the High Contrast Mermaid themeSequence
  • Pie diagram in the High Contrast Mermaid themePie
  • Mindmap diagram in the High Contrast Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: base
  themeVariables: {darkMode: false, background: "#ffffff", primaryColor: "#ffffff", primaryTextColor: "#000000", primaryBorderColor: "#000000", secondaryColor: "#e8e8e8", secondaryTextColor: "#000000", secondaryBorderColor: "#000000", tertiaryColor: "#f2f2f2", tertiaryTextColor: "#000000", tertiaryBorderColor: "#000000", lineColor: "#000000", arrowheadColor: "#000000", textColor: "#000000", titleColor: "#000000", mainBkg: "#ffffff", nodeBkg: "#ffffff", nodeBorder: "#000000", nodeTextColor: "#000000", clusterBkg: "#f2f2f2", clusterBorder: "#000000", defaultLinkColor: "#000000", edgeLabelBackground: "#ffffff", errorBkgColor: "#ffd6d6", errorTextColor: "#000000", noteBkgColor: "#fff7b3", noteTextColor: "#000000", noteBorderColor: "#000000", actorBkg: "#ffffff", actorBorder: "#000000", actorTextColor: "#000000", actorLineColor: "#000000", signalColor: "#000000", signalTextColor: "#000000", labelBoxBkgColor: "#ffffff", labelBoxBorderColor: "#000000", labelTextColor: "#000000", loopTextColor: "#000000", activationBkgColor: "#e8e8e8", activationBorderColor: "#000000", sequenceNumberColor: "#ffffff", stateBkg: "#ffffff", stateLabelColor: "#000000", labelColor: "#000000", labelBackgroundColor: "#ffffff", compositeBackground: "#f2f2f2", compositeTitleBackground: "#ffffff", compositeBorder: "#000000", altBackground: "#f2f2f2", transitionColor: "#000000", transitionLabelColor: "#000000", specialStateColor: "#000000", innerEndBackground: "#000000", classText: "#000000", attributeBackgroundColorOdd: "#ffffff", attributeBackgroundColorEven: "#f2f2f2", rowOdd: "#ffffff", rowEven: "#f2f2f2", sectionBkgColor: "#f2f2f2", altSectionBkgColor: "#ffffff", sectionBkgColor2: "#e8e8e8", excludeBkgColor: "#f2f2f2", gridColor: "#595959", taskBkgColor: "#ffffff", taskBorderColor: "#000000", taskTextColor: "#000000", taskTextLightColor: "#000000", taskTextDarkColor: "#000000", taskTextOutsideColor: "#000000", taskTextClickableColor: "#000000", activeTaskBkgColor: "#cfe8ff", activeTaskBorderColor: "#0047ab", doneTaskBkgColor: "#e0e0e0", doneTaskBorderColor: "#000000", critBkgColor: "#ffd6d6", critBorderColor: "#b00020", todayLineColor: "#b00020", vertLineColor: "#000000", pieTitleTextColor: "#000000", pieSectionTextColor: "#000000", pieLegendTextColor: "#000000", pieStrokeColor: "#000000", pieOuterStrokeColor: "#000000", pieOpacity: "1", quadrant1Fill: "#ffd84d", quadrant2Fill: "#9be89b", quadrant3Fill: "#d9b8ff", quadrant4Fill: "#7fe3d8", quadrant1TextFill: "#000000", quadrant2TextFill: "#000000", quadrant3TextFill: "#000000", quadrant4TextFill: "#000000", quadrantPointFill: "#000000", quadrantPointTextFill: "#000000", quadrantXAxisTextFill: "#000000", quadrantYAxisTextFill: "#000000", quadrantTitleFill: "#000000", quadrantInternalBorderStrokeFill: "#000000", quadrantExternalBorderStrokeFill: "#000000", requirementBackground: "#ffffff", requirementBorderColor: "#000000", requirementTextColor: "#000000", relationColor: "#000000", relationLabelBackground: "#ffffff", relationLabelColor: "#000000", commitLabelColor: "#000000", commitLabelBackground: "#ffffff", tagLabelColor: "#000000", tagLabelBackground: "#ffffff", tagLabelBorder: "#000000", archEdgeColor: "#000000", archEdgeArrowColor: "#000000", archGroupBorderColor: "#000000", personBkg: "#ffffff", personBorder: "#000000", pie1: "#ffd84d", cScale0: "#ffd84d", cScaleLabel0: "#000000", fillType0: "#ffd84d", pie2: "#8fd0ff", cScale1: "#8fd0ff", cScaleLabel1: "#000000", fillType1: "#8fd0ff", pie3: "#9be89b", cScale2: "#9be89b", cScaleLabel2: "#000000", fillType2: "#9be89b", pie4: "#ffb3c7", cScale3: "#ffb3c7", cScaleLabel3: "#000000", fillType3: "#ffb3c7", pie5: "#d9b8ff", cScale4: "#d9b8ff", cScaleLabel4: "#000000", fillType4: "#d9b8ff", pie6: "#ffc58a", cScale5: "#ffc58a", cScaleLabel5: "#000000", fillType5: "#ffc58a", pie7: "#7fe3d8", cScale6: "#7fe3d8", cScaleLabel6: "#000000", fillType6: "#7fe3d8", pie8: "#e6e6e6", cScale7: "#e6e6e6", cScaleLabel7: "#000000", fillType7: "#e6e6e6", pie9: "#ff9e9e", cScale8: "#ff9e9e", cScaleLabel8: "#000000", pie10: "#b8c8ff", cScale9: "#b8c8ff", cScaleLabel9: "#000000", pie11: "#c9e265", cScale10: "#c9e265", cScaleLabel10: "#000000", pie12: "#c6c6c6", cScale11: "#c6c6c6", cScaleLabel11: "#000000", git0: "#000000", gitInv0: "#ffffff", gitBranchLabel0: "#ffffff", git1: "#0047ab", gitInv1: "#ffffff", gitBranchLabel1: "#ffffff", git2: "#b00020", gitInv2: "#ffffff", gitBranchLabel2: "#ffffff", git3: "#006400", gitInv3: "#ffffff", gitBranchLabel3: "#ffffff", git4: "#6a0dad", gitInv4: "#ffffff", gitBranchLabel4: "#ffffff", git5: "#8b4500", gitInv5: "#ffffff", gitBranchLabel5: "#ffffff", git6: "#005f73", gitInv6: "#ffffff", gitBranchLabel6: "#ffffff", git7: "#4d4d4d", gitInv7: "#ffffff", gitBranchLabel7: "#ffffff", xyChart: {backgroundColor: "#ffffff", titleColor: "#000000", dataLabelColor: "#000000", xAxisTitleColor: "#000000", xAxisLabelColor: "#000000", xAxisTickColor: "#000000", xAxisLineColor: "#000000", yAxisTitleColor: "#000000", yAxisLabelColor: "#000000", yAxisTickColor: "#000000", yAxisLineColor: "#000000", plotColorPalette: "#000000,#0047ab,#b00020,#006400,#6a0dad,#8b4500,#005f73,#4d4d4d"}, radar: {axisColor: "#000000", graticuleColor: "#595959"}, packet: {startByteColor: "#000000", endByteColor: "#000000", labelColor: "#000000", titleColor: "#000000", blockStrokeColor: "#000000", blockFillColor: "#ffffff"}}
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

Monochrome

light?theme=monochrome

Greys only, print-safe. Status in Gantt charts (done, active, critical) and pie slices are told apart by shade of grey only, so keep labels and legends on.

  • Flowchart diagram in the Monochrome Mermaid themeFlowchart
  • Sequence diagram in the Monochrome Mermaid themeSequence
  • Pie diagram in the Monochrome Mermaid themePie
  • Mindmap diagram in the Monochrome Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: base
  themeVariables: {darkMode: false, background: "#ffffff", primaryColor: "#ffffff", primaryTextColor: "#000000", primaryBorderColor: "#000000", secondaryColor: "#e6e6e6", secondaryTextColor: "#000000", secondaryBorderColor: "#000000", tertiaryColor: "#f2f2f2", tertiaryTextColor: "#000000", tertiaryBorderColor: "#000000", lineColor: "#000000", arrowheadColor: "#000000", textColor: "#000000", titleColor: "#000000", mainBkg: "#ffffff", nodeBkg: "#ffffff", nodeBorder: "#000000", nodeTextColor: "#000000", clusterBkg: "#f2f2f2", clusterBorder: "#000000", defaultLinkColor: "#000000", edgeLabelBackground: "#ffffff", errorBkgColor: "#bfbfbf", errorTextColor: "#000000", noteBkgColor: "#f2f2f2", noteTextColor: "#000000", noteBorderColor: "#000000", actorBkg: "#ffffff", actorBorder: "#000000", actorTextColor: "#000000", actorLineColor: "#000000", signalColor: "#000000", signalTextColor: "#000000", labelBoxBkgColor: "#ffffff", labelBoxBorderColor: "#000000", labelTextColor: "#000000", loopTextColor: "#000000", activationBkgColor: "#e6e6e6", activationBorderColor: "#000000", sequenceNumberColor: "#ffffff", stateBkg: "#ffffff", stateLabelColor: "#000000", labelColor: "#000000", labelBackgroundColor: "#ffffff", compositeBackground: "#f2f2f2", compositeTitleBackground: "#ffffff", compositeBorder: "#000000", altBackground: "#f2f2f2", transitionColor: "#000000", transitionLabelColor: "#000000", specialStateColor: "#000000", innerEndBackground: "#000000", classText: "#000000", attributeBackgroundColorOdd: "#ffffff", attributeBackgroundColorEven: "#f2f2f2", rowOdd: "#ffffff", rowEven: "#f2f2f2", sectionBkgColor: "#f2f2f2", altSectionBkgColor: "#ffffff", sectionBkgColor2: "#e6e6e6", excludeBkgColor: "#f2f2f2", gridColor: "#bfbfbf", taskBkgColor: "#ffffff", taskBorderColor: "#000000", taskTextColor: "#000000", taskTextLightColor: "#000000", taskTextDarkColor: "#000000", taskTextOutsideColor: "#000000", taskTextClickableColor: "#000000", activeTaskBkgColor: "#e6e6e6", activeTaskBorderColor: "#000000", doneTaskBkgColor: "#f2f2f2", doneTaskBorderColor: "#808080", critBkgColor: "#bfbfbf", critBorderColor: "#000000", todayLineColor: "#000000", vertLineColor: "#000000", pieTitleTextColor: "#000000", pieSectionTextColor: "#000000", pieLegendTextColor: "#000000", pieStrokeColor: "#000000", pieOuterStrokeColor: "#000000", pieOpacity: "1", quadrant1Fill: "#d9d9d9", quadrant2Fill: "#c4c4c4", quadrant3Fill: "#e3e3e3", quadrant4Fill: "#cccccc", quadrant1TextFill: "#000000", quadrant2TextFill: "#000000", quadrant3TextFill: "#000000", quadrant4TextFill: "#000000", quadrantPointFill: "#000000", quadrantPointTextFill: "#000000", quadrantXAxisTextFill: "#000000", quadrantYAxisTextFill: "#000000", quadrantTitleFill: "#000000", quadrantInternalBorderStrokeFill: "#000000", quadrantExternalBorderStrokeFill: "#000000", requirementBackground: "#ffffff", requirementBorderColor: "#000000", requirementTextColor: "#000000", relationColor: "#000000", relationLabelBackground: "#ffffff", relationLabelColor: "#000000", commitLabelColor: "#000000", commitLabelBackground: "#ffffff", tagLabelColor: "#000000", tagLabelBackground: "#ffffff", tagLabelBorder: "#000000", archEdgeColor: "#000000", archEdgeArrowColor: "#000000", archGroupBorderColor: "#000000", personBkg: "#ffffff", personBorder: "#000000", pie1: "#d9d9d9", cScale0: "#d9d9d9", cScaleLabel0: "#000000", fillType0: "#d9d9d9", pie2: "#8f8f8f", cScale1: "#8f8f8f", cScaleLabel1: "#000000", fillType1: "#8f8f8f", pie3: "#c4c4c4", cScale2: "#c4c4c4", cScaleLabel2: "#000000", fillType2: "#c4c4c4", pie4: "#a3a3a3", cScale3: "#a3a3a3", cScaleLabel3: "#000000", fillType3: "#a3a3a3", pie5: "#e3e3e3", cScale4: "#e3e3e3", cScaleLabel4: "#000000", fillType4: "#e3e3e3", pie6: "#999999", cScale5: "#999999", cScaleLabel5: "#000000", fillType5: "#999999", pie7: "#cccccc", cScale6: "#cccccc", cScaleLabel6: "#000000", fillType6: "#cccccc", pie8: "#858585", cScale7: "#858585", cScaleLabel7: "#000000", fillType7: "#858585", pie9: "#b8b8b8", cScale8: "#b8b8b8", cScaleLabel8: "#000000", pie10: "#dedede", cScale9: "#dedede", cScaleLabel9: "#000000", pie11: "#adadad", cScale10: "#adadad", cScaleLabel10: "#000000", pie12: "#7f7f7f", cScale11: "#7f7f7f", cScaleLabel11: "#000000", git0: "#000000", gitInv0: "#ffffff", gitBranchLabel0: "#ffffff", git1: "#595959", gitInv1: "#ffffff", gitBranchLabel1: "#ffffff", git2: "#262626", gitInv2: "#ffffff", gitBranchLabel2: "#ffffff", git3: "#737373", gitInv3: "#ffffff", gitBranchLabel3: "#ffffff", git4: "#404040", gitInv4: "#ffffff", gitBranchLabel4: "#ffffff", git5: "#1a1a1a", gitInv5: "#ffffff", gitBranchLabel5: "#ffffff", git6: "#4d4d4d", gitInv6: "#ffffff", gitBranchLabel6: "#ffffff", git7: "#333333", gitInv7: "#ffffff", gitBranchLabel7: "#ffffff", xyChart: {backgroundColor: "#ffffff", titleColor: "#000000", dataLabelColor: "#000000", xAxisTitleColor: "#000000", xAxisLabelColor: "#000000", xAxisTickColor: "#000000", xAxisLineColor: "#000000", yAxisTitleColor: "#000000", yAxisLabelColor: "#000000", yAxisTickColor: "#000000", yAxisLineColor: "#000000", plotColorPalette: "#000000,#595959,#262626,#737373,#404040,#1a1a1a,#4d4d4d,#333333"}, radar: {axisColor: "#000000", graticuleColor: "#bfbfbf"}, packet: {startByteColor: "#000000", endByteColor: "#000000", labelColor: "#000000", titleColor: "#000000", blockStrokeColor: "#000000", blockFillColor: "#ffffff"}}
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

Dark themes

For dark pages. On a white page their light text disappears.

Dark

dark?theme=dark

Slate & cyan.

  • Flowchart diagram in the Dark Mermaid themeFlowchart
  • Sequence diagram in the Dark Mermaid themeSequence
  • Pie diagram in the Dark Mermaid themePie
  • Mindmap diagram in the Dark Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: base
  themeVariables: {darkMode: true, background: "#0f172a", primaryColor: "#1e293b", primaryTextColor: "#f8fafc", primaryBorderColor: "#06b6d4", secondaryColor: "#334155", secondaryTextColor: "#f8fafc", secondaryBorderColor: "#06b6d4", tertiaryColor: "#1e293b", tertiaryTextColor: "#f8fafc", tertiaryBorderColor: "#06b6d4", lineColor: "#94a3b8", arrowheadColor: "#94a3b8", textColor: "#e2e8f0", titleColor: "#e2e8f0", mainBkg: "#1e293b", nodeBkg: "#1e293b", nodeBorder: "#0ea5e9", nodeTextColor: "#f8fafc", clusterBkg: "#1e293b", clusterBorder: "#06b6d4", defaultLinkColor: "#94a3b8", edgeLabelBackground: "#0f172a", errorBkgColor: "#7f1d1d", errorTextColor: "#f8fafc", noteBkgColor: "#334155", noteTextColor: "#f8fafc", noteBorderColor: "#06b6d4", actorBkg: "#1e293b", actorBorder: "#06b6d4", actorTextColor: "#f8fafc", actorLineColor: "#94a3b8", signalColor: "#94a3b8", signalTextColor: "#e2e8f0", labelBoxBkgColor: "#1e293b", labelBoxBorderColor: "#06b6d4", labelTextColor: "#f8fafc", loopTextColor: "#e2e8f0", activationBkgColor: "#334155", activationBorderColor: "#06b6d4", sequenceNumberColor: "#000000", stateBkg: "#1e293b", stateLabelColor: "#f8fafc", labelColor: "#f8fafc", labelBackgroundColor: "#0f172a", compositeBackground: "#1e293b", compositeTitleBackground: "#1e293b", compositeBorder: "#06b6d4", altBackground: "#1e293b", transitionColor: "#94a3b8", transitionLabelColor: "#e2e8f0", specialStateColor: "#94a3b8", innerEndBackground: "#06b6d4", classText: "#f8fafc", attributeBackgroundColorOdd: "#1e293b", attributeBackgroundColorEven: "#1e293b", rowOdd: "#1e293b", rowEven: "#1e293b", sectionBkgColor: "#1e293b", altSectionBkgColor: "#0f172a", sectionBkgColor2: "#334155", excludeBkgColor: "#1e293b", gridColor: "#334155", taskBkgColor: "#1e293b", taskBorderColor: "#06b6d4", taskTextColor: "#f8fafc", taskTextLightColor: "#f8fafc", taskTextDarkColor: "#f8fafc", taskTextOutsideColor: "#e2e8f0", taskTextClickableColor: "#06b6d4", activeTaskBkgColor: "#155e75", activeTaskBorderColor: "#22d3ee", doneTaskBkgColor: "#475569", doneTaskBorderColor: "#94a3b8", critBkgColor: "#7f1d1d", critBorderColor: "#f87171", todayLineColor: "#f87171", vertLineColor: "#94a3b8", pieTitleTextColor: "#e2e8f0", pieSectionTextColor: "#f8fafc", pieLegendTextColor: "#e2e8f0", pieStrokeColor: "#0f172a", pieOuterStrokeColor: "#94a3b8", pieOpacity: "1", quadrant1Fill: "#155e75", quadrant2Fill: "#6d28d9", quadrant3Fill: "#9a3412", quadrant4Fill: "#115e59", quadrant1TextFill: "#f8fafc", quadrant2TextFill: "#f8fafc", quadrant3TextFill: "#f8fafc", quadrant4TextFill: "#f8fafc", quadrantPointFill: "#22d3ee", quadrantPointTextFill: "#f8fafc", quadrantXAxisTextFill: "#e2e8f0", quadrantYAxisTextFill: "#e2e8f0", quadrantTitleFill: "#e2e8f0", quadrantInternalBorderStrokeFill: "#06b6d4", quadrantExternalBorderStrokeFill: "#06b6d4", requirementBackground: "#1e293b", requirementBorderColor: "#06b6d4", requirementTextColor: "#f8fafc", relationColor: "#94a3b8", relationLabelBackground: "#0f172a", relationLabelColor: "#e2e8f0", commitLabelColor: "#e2e8f0", commitLabelBackground: "#0f172a", tagLabelColor: "#f8fafc", tagLabelBackground: "#1e293b", tagLabelBorder: "#06b6d4", archEdgeColor: "#94a3b8", archEdgeArrowColor: "#94a3b8", archGroupBorderColor: "#06b6d4", personBkg: "#1e293b", personBorder: "#06b6d4", pie1: "#155e75", cScale0: "#155e75", cScaleLabel0: "#f8fafc", fillType0: "#155e75", pie2: "#1d4ed8", cScale1: "#1d4ed8", cScaleLabel1: "#f8fafc", fillType1: "#1d4ed8", pie3: "#6d28d9", cScale2: "#6d28d9", cScaleLabel2: "#f8fafc", fillType2: "#6d28d9", pie4: "#be185d", cScale3: "#be185d", cScaleLabel3: "#f8fafc", fillType3: "#be185d", pie5: "#9a3412", cScale4: "#9a3412", cScaleLabel4: "#f8fafc", fillType4: "#9a3412", pie6: "#166534", cScale5: "#166534", cScaleLabel5: "#f8fafc", fillType5: "#166534", pie7: "#115e59", cScale6: "#115e59", cScaleLabel6: "#f8fafc", fillType6: "#115e59", pie8: "#4338ca", cScale7: "#4338ca", cScaleLabel7: "#f8fafc", fillType7: "#4338ca", pie9: "#86198f", cScale8: "#86198f", cScaleLabel8: "#f8fafc", pie10: "#9f1239", cScale9: "#9f1239", cScaleLabel9: "#f8fafc", pie11: "#3f6212", cScale10: "#3f6212", cScaleLabel10: "#f8fafc", pie12: "#475569", cScale11: "#475569", cScaleLabel11: "#f8fafc", git0: "#22d3ee", gitInv0: "#000000", gitBranchLabel0: "#000000", git1: "#60a5fa", gitInv1: "#000000", gitBranchLabel1: "#000000", git2: "#a78bfa", gitInv2: "#000000", gitBranchLabel2: "#000000", git3: "#f472b6", gitInv3: "#000000", gitBranchLabel3: "#000000", git4: "#fbbf24", gitInv4: "#000000", gitBranchLabel4: "#000000", git5: "#4ade80", gitInv5: "#000000", gitBranchLabel5: "#000000", git6: "#2dd4bf", gitInv6: "#000000", gitBranchLabel6: "#000000", git7: "#fb923c", gitInv7: "#000000", gitBranchLabel7: "#000000", xyChart: {backgroundColor: "#0f172a", titleColor: "#e2e8f0", dataLabelColor: "#e2e8f0", xAxisTitleColor: "#e2e8f0", xAxisLabelColor: "#e2e8f0", xAxisTickColor: "#e2e8f0", xAxisLineColor: "#e2e8f0", yAxisTitleColor: "#e2e8f0", yAxisLabelColor: "#e2e8f0", yAxisTickColor: "#e2e8f0", yAxisLineColor: "#e2e8f0", plotColorPalette: "#22d3ee,#60a5fa,#a78bfa,#f472b6,#fbbf24,#4ade80,#2dd4bf,#fb923c"}, radar: {axisColor: "#94a3b8", graticuleColor: "#334155"}, packet: {startByteColor: "#e2e8f0", endByteColor: "#e2e8f0", labelColor: "#f8fafc", titleColor: "#e2e8f0", blockStrokeColor: "#06b6d4", blockFillColor: "#1e293b"}}
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

Purple

dark?theme=purple

Deep violet.

  • Flowchart diagram in the Purple Mermaid themeFlowchart
  • Sequence diagram in the Purple Mermaid themeSequence
  • Pie diagram in the Purple Mermaid themePie
  • Mindmap diagram in the Purple Mermaid themeMindmap
Open in FlowViz
Show the config
---
config:
  theme: base
  themeVariables: {darkMode: true, background: "#1e1b4b", primaryColor: "#3e2866", primaryTextColor: "#ffffff", primaryBorderColor: "#a78bfa", secondaryColor: "#4c1d95", secondaryTextColor: "#ffffff", secondaryBorderColor: "#a78bfa", tertiaryColor: "#2e1065", tertiaryTextColor: "#ffffff", tertiaryBorderColor: "#a78bfa", lineColor: "#8b5cf6", arrowheadColor: "#8b5cf6", textColor: "#ede9fe", titleColor: "#ede9fe", mainBkg: "#3e2866", nodeBkg: "#3e2866", nodeBorder: "#7c3aed", nodeTextColor: "#ffffff", clusterBkg: "#1e1b4b", clusterBorder: "#a78bfa", defaultLinkColor: "#8b5cf6", edgeLabelBackground: "#2e1065", errorBkgColor: "#881337", errorTextColor: "#ffffff", noteBkgColor: "#4c1d95", noteTextColor: "#ffffff", noteBorderColor: "#a78bfa", actorBkg: "#3e2866", actorBorder: "#a78bfa", actorTextColor: "#ffffff", actorLineColor: "#8b5cf6", signalColor: "#8b5cf6", signalTextColor: "#ede9fe", labelBoxBkgColor: "#3e2866", labelBoxBorderColor: "#a78bfa", labelTextColor: "#ffffff", loopTextColor: "#ede9fe", activationBkgColor: "#4c1d95", activationBorderColor: "#a78bfa", sequenceNumberColor: "#000000", stateBkg: "#3e2866", stateLabelColor: "#ffffff", labelColor: "#ffffff", labelBackgroundColor: "#1e1b4b", compositeBackground: "#2e1065", compositeTitleBackground: "#3e2866", compositeBorder: "#a78bfa", altBackground: "#2e1065", transitionColor: "#8b5cf6", transitionLabelColor: "#ede9fe", specialStateColor: "#8b5cf6", innerEndBackground: "#a78bfa", classText: "#ffffff", attributeBackgroundColorOdd: "#3e2866", attributeBackgroundColorEven: "#2e1065", rowOdd: "#3e2866", rowEven: "#2e1065", sectionBkgColor: "#2e1065", altSectionBkgColor: "#1e1b4b", sectionBkgColor2: "#4c1d95", excludeBkgColor: "#2e1065", gridColor: "#3b3470", taskBkgColor: "#3e2866", taskBorderColor: "#a78bfa", taskTextColor: "#ffffff", taskTextLightColor: "#ffffff", taskTextDarkColor: "#ffffff", taskTextOutsideColor: "#ede9fe", taskTextClickableColor: "#a78bfa", activeTaskBkgColor: "#5b21b6", activeTaskBorderColor: "#c4b5fd", doneTaskBkgColor: "#4b5563", doneTaskBorderColor: "#9ca3af", critBkgColor: "#881337", critBorderColor: "#fb7185", todayLineColor: "#fb7185", vertLineColor: "#8b5cf6", pieTitleTextColor: "#ede9fe", pieSectionTextColor: "#ffffff", pieLegendTextColor: "#ede9fe", pieStrokeColor: "#1e1b4b", pieOuterStrokeColor: "#8b5cf6", pieOpacity: "1", quadrant1Fill: "#6d28d9", quadrant2Fill: "#1d4ed8", quadrant3Fill: "#86198f", quadrant4Fill: "#4338ca", quadrant1TextFill: "#ffffff", quadrant2TextFill: "#ffffff", quadrant3TextFill: "#ffffff", quadrant4TextFill: "#ffffff", quadrantPointFill: "#a78bfa", quadrantPointTextFill: "#ffffff", quadrantXAxisTextFill: "#ede9fe", quadrantYAxisTextFill: "#ede9fe", quadrantTitleFill: "#ede9fe", quadrantInternalBorderStrokeFill: "#a78bfa", quadrantExternalBorderStrokeFill: "#a78bfa", requirementBackground: "#3e2866", requirementBorderColor: "#a78bfa", requirementTextColor: "#ffffff", relationColor: "#8b5cf6", relationLabelBackground: "#1e1b4b", relationLabelColor: "#ede9fe", commitLabelColor: "#ede9fe", commitLabelBackground: "#1e1b4b", tagLabelColor: "#ffffff", tagLabelBackground: "#3e2866", tagLabelBorder: "#a78bfa", archEdgeColor: "#8b5cf6", archEdgeArrowColor: "#8b5cf6", archGroupBorderColor: "#a78bfa", personBkg: "#3e2866", personBorder: "#a78bfa", pie1: "#6d28d9", cScale0: "#6d28d9", cScaleLabel0: "#ffffff", fillType0: "#6d28d9", pie2: "#9d174d", cScale1: "#9d174d", cScaleLabel1: "#ffffff", fillType1: "#9d174d", pie3: "#1d4ed8", cScale2: "#1d4ed8", cScaleLabel2: "#ffffff", fillType2: "#1d4ed8", pie4: "#0f766e", cScale3: "#0f766e", cScaleLabel3: "#ffffff", fillType3: "#0f766e", pie5: "#86198f", cScale4: "#86198f", cScaleLabel4: "#ffffff", fillType4: "#86198f", pie6: "#9a3412", cScale5: "#9a3412", cScaleLabel5: "#ffffff", fillType5: "#9a3412", pie7: "#4338ca", cScale6: "#4338ca", cScaleLabel6: "#ffffff", fillType6: "#4338ca", pie8: "#9f1239", cScale7: "#9f1239", cScaleLabel7: "#ffffff", fillType7: "#9f1239", pie9: "#166534", cScale8: "#166534", cScaleLabel8: "#ffffff", pie10: "#7e22ce", cScale9: "#7e22ce", cScaleLabel9: "#ffffff", pie11: "#155e75", cScale10: "#155e75", cScaleLabel10: "#ffffff", pie12: "#57534e", cScale11: "#57534e", cScaleLabel11: "#ffffff", git0: "#a78bfa", gitInv0: "#000000", gitBranchLabel0: "#000000", git1: "#f472b6", gitInv1: "#000000", gitBranchLabel1: "#000000", git2: "#60a5fa", gitInv2: "#000000", gitBranchLabel2: "#000000", git3: "#2dd4bf", gitInv3: "#000000", gitBranchLabel3: "#000000", git4: "#e879f9", gitInv4: "#000000", gitBranchLabel4: "#000000", git5: "#fbbf24", gitInv5: "#000000", gitBranchLabel5: "#000000", git6: "#818cf8", gitInv6: "#000000", gitBranchLabel6: "#000000", git7: "#fb7185", gitInv7: "#000000", gitBranchLabel7: "#000000", xyChart: {backgroundColor: "#1e1b4b", titleColor: "#ede9fe", dataLabelColor: "#ede9fe", xAxisTitleColor: "#ede9fe", xAxisLabelColor: "#ede9fe", xAxisTickColor: "#ede9fe", xAxisLineColor: "#ede9fe", yAxisTitleColor: "#ede9fe", yAxisLabelColor: "#ede9fe", yAxisTickColor: "#ede9fe", yAxisLineColor: "#ede9fe", plotColorPalette: "#a78bfa,#f472b6,#60a5fa,#2dd4bf,#e879f9,#fbbf24,#818cf8,#fb7185"}, radar: {axisColor: "#8b5cf6", graticuleColor: "#3b3470"}, packet: {startByteColor: "#ede9fe", endByteColor: "#ede9fe", labelColor: "#ffffff", titleColor: "#ede9fe", blockStrokeColor: "#a78bfa", blockFillColor: "#3e2866"}}
---
flowchart TD
    A[Paste above your diagram] --> B[Done]

How Mermaid theming works

Built-in themes and the base theme

Mermaid ships five themes: default, neutral, dark, forest and base. Only base can be customised: you set theme: base and override any of its themeVariables, such as primaryColor, lineColor or textColor. Colours must be hex values like #0077b6; Mermaid ignores colour names.

Mermaid derives most colours from a few inputs (fills from primaryColor, pie and git colours by rotating its hue), and those derivations don't suit every diagram type. That is why each FlowViz theme sets every variable a diagram type reads, including the per-type ones for sequence diagrams (actorBkg, signalColor), Gantt (taskBkgColor, critBkgColor), pie (pie1–pie12), mindmap and timeline sections (cScale0–cScale11), git graphs (git0–git7) and the nested xyChart, radar and packet groups.

Frontmatter or init directive

The current way to theme one diagram is a YAML frontmatter block at the very top, before the diagram type: ---, then config: with theme and themeVariables, then ---. It needs Mermaid 10.5 or later.

Older renderers only understand the init directive, a single line such as %%{init: {"theme": "base", "themeVariables": {"primaryColor": "#0077b6"}}}%%. Mermaid still reads it but has deprecated it in favour of frontmatter since 10.5. If a diagram has both, the directive wins.

Either way the theme lives in the diagram's code, so it travels wherever the code goes, as long as the renderer honours it (see below).

Light and dark pages

Mermaid never paints a background behind a diagram: the page shows through. A dark theme has light text, so on a white page its labels, titles and edge text all but vanish. Pick a light theme for light pages (most docs, READMEs in light mode, slides) and a dark theme for dark ones. FlowViz's editor and PNG export paint the theme's own page colour; SVG export stays transparent.

C4 diagrams ignore theme variables: Mermaid draws them from their own c4 config, so no theme changes them, and their grey "external" boxes and dark relationship labels don't suit dark themes.

Where custom themes work

Whether a pasted theme shows up depends on the site rendering the diagram, not on Mermaid. We checked each platform's docs, source code and staff replies on 24 September 2026 but didn't test every one live, so each note says how sure it is.

GitHub
Renders a theme set in the diagram, including themeVariables in frontmatter or %%{init}%% (Mermaid 11.x, going by community reports from August 2026). A diagram with no theme follows the viewer's light or dark mode; once you set one, it no longer adapts, so check the diagram in both modes. A light theme is the safer choice for READMEs. Sources: GitHub community: Mermaid version · GitHub community: dark mode · GitHub community: frontmatter themeVariables
GitLab
Renders with Mermaid 11 in a sandbox that starts from neutral (or dark in dark mode) but doesn't lock the theme settings, so a theme in the diagram should override that default. This is read from GitLab's source code; we haven't tested it on a live instance. Sources: GitLab Markdown docs · GitLab Mermaid sandbox source
Notion
Appears to ignore themes set in the diagram, including %%{init}%%, and draws every diagram in Mermaid's default look. We found no official Notion documentation either way. If the colours matter, export an SVG or PNG from FlowViz and paste the image. Sources: Third-party write-up (May 2026)
Obsidian
Doesn't support Mermaid themes: it colours diagrams from your Obsidian theme, and Obsidian staff have said theme directives are unsupported (2022 and 2024). Obsidian 1.14 ships Mermaid 11.13, and Mermaid rendering now needs a one-time opt-in. If the colours matter, paste an exported image. Sources: Obsidian changelog · Obsidian forum (staff reply) · Obsidian forum (2024)
Confluence
Depends on the Marketplace app. Atlassian Labs' Mermaid Diagrams Viewer (Mermaid 11) picks light or dark to match Confluence without locking the theme settings, so a theme in the diagram should apply; that is read from its source code, not tested. Weweave's Mermaid Charts & Diagrams app has its own Theme setting. For other apps we couldn't confirm either way, so check yours. Sources: Mermaid Diagrams Viewer source · weweave documentation

Open a diagram with a theme

Add ?theme= and a slug to any FlowViz link, before the #. For example https://flowviz.app/app?theme=ocean#z=…. Slugs never change; unknown ones are ignored. See share links for building the #z= part.