I just released Mermaid Studio 2026.4 with a new custom theme system and just wanted to stop in here to share.
Mermaid Studio’s new theme system generates cohesive themes from 1-8 seed colors and can apply them to nearly every Mermaid.js diagram type. When generating themes, a single seed can be used to generate complementary light and dark theme variants.
Custom themes can be fine-tuned manually with the provided theme editor to ensure each diagram type is styled exactly to your taste.
Applying a custom theme follows the same UX as applying one of the stock Mermaid.js themes, but instead of just writing a theme name, we write the relevant colors directly to the diagram’s frontmatter section.
This is an idea I’ve been refining for the past six months. It started as a JSON and then YAML DSL for defining themes as a set of base colors and transforms. I built out all sorts of neat editor support for it and then ultimately scrapped it rather than shipping since it was really just too complicated and too much code to justify its inclusion as a power-user tool.
The iteration that shipped was built and refined alongside the recently released InfiniTint Theme Tuner plugin and the architectural and UX designs informed one another. It’s a similar premise: leverage deep knowledge of the underlying platform, a bit of color theory, and Material Color Utilities (MCU) to vastly simplify the process of creating and applying a cohesive custom look.
The HCT color picker and generate theme from image features are direct adaptations from InfiniTint features.
One of the really nice things about a custom color picker is that we have control over suggested colors. This makes it possible to offer contextual color suggestions beyond recents. For instance, the theme generator offers representative colors from the IDE’s theme/color scheme in case you want to build a diagram theme based on your IDE theme. When you’re editing a diagram, it suggests colors already in the diagram’s applied palette.
Another neat feature that comes along with adopting HCT via MCU is that we can generate theme-derived presets for our element styling pane using hue rotation or tone shifting as opposed to our old fixed set of global presets (we even do this for the stock themes now).
All Mermaid Studio users (no paid license necessary) can apply any of 8 bundled custom themes, each with a light and dark variant, to their diagrams. This works both in standalone diagrams and Markdown code fences.
Creating or applying your own custom themes is a paid feature (either Mermaid Studio Core or Mermaid Studio).
There’s no publicly available MCP tooling for this system yet, but once it lands, you’ll be able to have your agent generate themes with the theme generator or apply custom themes from your environment directly to the diagrams it generates.
I’m pretty hyped about this release and would be happy to field any questions about it.