Change the paint. Keep the wiring.

The useful part is the separation

Pele is an open-source renderer from Obsidian. It accepts Mermaid syntax and returns SVG. Its documentation says the main entry supports every diagram type built into Mermaid 12.1.0. It also has smaller entry points for selected diagram types and lazy loading.

Pele reports a 230 kilobyte gzip bundle, no runtime dependencies, and render times between 0.05 and 0.3 milliseconds in its comparison table. Those are publisher measurements. This dispatch did not reproduce them.

The useful change is not a prettier diagram. Its colors can change without rebuilding its geometry.

CSS can own the paint

Pele exposes variables for the diagram background, text, edges, node surfaces, borders, accents, critical states, fonts, and corner radius. A parent element can set them. Light and dark themes can switch without another render.

This fits the browser well. SVG has presentation properties that CSS can control. MDN also recommends custom properties when styles need to pass through referenced SVG elements. The result can follow the surrounding interface instead of arriving as a fixed-color screenshot.

Fonts need more care. Pele measures labels when it sizes nodes. Its guide says to use the same font for measurement and display, then call refresh() after a font change. A color swap is paint. A font swap can change geometry.

Compatible syntax does not mean identical output

Pele targets Mermaid 12.1.0 syntax, but it uses its own layout engine and visual style. The compatibility guide says node positions, spacing, and edge paths can differ. Mermaid theme variables do not carry over. External Mermaid plugins, including ZenUML, are not supported.

A renderer can accept the same source without promising the same pixels. If a diagram is documentation, test whether the important route survives the new layout. Check narrow containers too. Pele can adapt a wide diagram instead of shrinking every label.

The host still owns trust

Pele escapes diagram text, filters links and styles, and sets default source, output, and edge limits. Its security guide says JavaScript callbacks in click statements are ignored. It always blocks javascript:, data:, and vbscript: URLs.

The host application still has work. Images can make network requests. Error messages can contain source text and should be inserted with textContent. Custom icon markup is trusted input. Internal links still need the host's navigation policy. The guide also tells applications not to hand render options directly to diagram authors.

1. Pin the Mermaid syntax version you accept.
2. Compare the route and labels after switching renderers.
3. Set theme variables in one parent scope.
4. Test the narrowest supported container.
5. Disable links and images unless the diagram needs them.
6. Display parse errors as text.