Mermaid.js v11.13.0: Two New Diagram Types and Our Most Polished Release Yet
• 4 mins
It’s been three months since our last open source project release. We’ve been heads-down, and today we’re shipping the results: Mermaid v11.13.0.
This one is big. Two entirely new diagram types — Venn and Ishikawa — land alongside a significant fix that restores backward compatibility with v10, plus a pile of improvements across flowcharts, ER diagrams, Gantt charts, state diagrams, gitGraph, and more. Here’s what you need to know.
Two new diagram types, both from the same contributor
Both new types were contributed by @exoego, a community member who decided to do a lot of heavy lifting all at once. We’re very grateful.
Venn diagrams (beta)
Venn diagrams have been one of the most-requested diagram types for years. They’re ubiquitous in presentations, documentation, and teaching — and now they’re in Mermaid.
The syntax is clean and readable. You define sets with the set keyword, then describe overlaps with union. You can size sets and unions with a :N suffix, place text labels inside regions, and style everything with familiar CSS properties.
A simple two-set Venn looks like this:
venn-beta
set A ["Backend"]
set B ["Frontend"]
union A,B ["Full-stack"]
Use venn-beta to get started. As with all beta diagram types, the syntax may evolve — but the fundamentals are solid.
Ishikawa / fishbone diagrams (beta)
The Ishikawa diagram — also known as the fishbone or cause-and-effect diagram — has been a staple of quality management and root cause analysis since Kaoru Ishikawa developed it in the 1960s. It’s been requested in Mermaid for a long time. Now it’s here.
The diagram maps causes branching from a spine toward an effect at the head. The structure is defined entirely through indentation, which makes it natural to write:
The diagram maps causes branching from a spine toward an effect at the head. The structure is defined entirely through indentation, which makes it natural to write:
ishikawa-beta
Blurry Photo
Process
Out of focus
Shutter speed too slow
Protective film not removed
Beautification filter applied
User
Shaky hands
Equipment
LENS
Inappropriate lens
Damaged lens
Dirty lens
SENSOR
Damaged sensor
Dirty sensor
Environment
Subject moved too quickly
Too dark
The first line is the problem. Everything that follows is a cause, with indentation determining depth. Use ishikawa-beta to get started.
The big label fix
One of the more disruptive changes in Mermaid v11 was that plain text labels in flowcharts started being treated as Markdown by default. This broke \n line breaks, caused unexpected text-wrapping behavior, and broke backward compatibility with v10 diagrams.
v11.13.0 fixes this. Plain text labels now render as plain text again. If you want Markdown formatting in a label, use the double-quote + backtick syntax: [“`**bold**`”]. If you don’t, you don’t have to think about it.
What else is in this release
Beyond the headliners, v11.13.0 is one of our most thorough releases for bug fixes and quality-of-life improvements:
- Flowcharts: half-arrowheads (solid and stick) and central edge connections for more expressive diagrams
- Class diagrams: notes can now be placed inside namespaces
- Sequence diagrams: alias support for the new participant syntax
- State diagrams: colons now allowed in transition and state description text
- ER diagrams: fixed edge label positioning, ‘1’ cardinality recognition, node names with ‘u’, numbers, and decimals
- Gantt charts: done-task text is readable in dark mode; invalid dates and tick intervals no longer freeze the browser
- gitGraph: fixed arc direction for bottom-to-top orientation
- ELK layout: edges now use proper right-angle routing
- Mindmaps: fixed rendering when exceeding 11 level-2 nodes; fixed ELK layout breakage
- SVGs: fixed viewBox casing for responsive diagrams
Thank you, contributors
This release wouldn’t exist without the community members who put in the work: @exoego (Venn + Ishikawa), @omkarht, @darshanr0107, @remcohaszing, @kairi003, @Crafter-Y, @kaigritun, @NealGooch, and @saurabhg772244.
v11.13.0 is available now. Try the new diagram types in the live editor at mermaid.live and let us know what you think.