Mermaid v13: going on a diet, and we want your input

[knsv]

Many of you have told us Mermaid has gotten heavy. The bundle is large, rendering is slower than it should be, server-side rendering needs a browser, and the security surface is bigger than a diagramming library should have.

The v13 alpha is a proof of concept of one answer: a full rewrite. The other path is gradual updates to v12. We haven't chosen yet, and this discussion will help us decide.

The proof of concept

• Diagram types, layouts and optional features are plugins, so you ship only what you use.
• It renders without a DOM: on the server, in workers and in a CLI, with no headless browser.
• It is much smaller and faster. Only 80 KiB for flowchart-only, 100x faster
• The syntax stays the same.

Try it with npm install mermaid@v13-alpha. It only renders flowcharts so far and isn't ready for production. Getting started with the v13 alpha has the details.

What we'd like to know

Start your reply by saying whether you write diagrams or embed Mermaid in a project, then answer any of these. One answer helps. If you'd rather click than write: [users poll] · [integrators poll]

1. Which diagram types and features do you actually use, and what would you move to an opt-in plugin to get a faster Mermaid? If you embed Mermaid, what is your bundle budget?
2. Without a DOM, v13 measures text from font metrics instead of asking the browser, so labels can come out slightly off. When a diagram looks bad, what is usually wrong? Would you accept slower rendering for a better layout? Do you use custom fonts, CJK, RTL or emoji?
3. CSS variables let diagrams switch between light and dark mode without re-rendering, but Inkscape, office apps and other SVG 1.1 tools ignore them. Which do you need? What is hardest to style today?
4. We want to replace HTML labels with Markdown (bold, italic, line breaks, links) rendered as plain SVG. HTML labels have to be measured in a real DOM, every diagram type needs a second label code path for them, and SVG renderers outside the browser break on them. What do you use HTML labels for, and would Markdown cover it? Would keeping them as an opt-in for backwards compatibility work better for you?

Taking part

• Try the alpha and report what breaks with the v13 alpha bug report.
• Answer the questions above in this thread. Use this link to reply

Mermaid is MIT-licensed. Many of its ideas came from issues, pull requests and discussions. Thank you to everyone who contributed. The company behind mermaid.ai (formerly Mermaid Chart) contributes engineering time to it, including much of the work on v13.

Thank you for building with Mermaid. 🧜‍♀️