Finally: Venn Diagrams in Mermaid
• 2 mins
Venn diagrams are maybe the most universally understood visualization in existence. Two overlapping circles. Everyone knows what they mean.
They’ve also been one of the most-requested diagram types in Mermaid for years. As of v11.13.0, they’re here. Credit goes to @exoego, who also contributed the Ishikawa diagram in the same release — a remarkable double contribution.
The syntax
The structure is simple. You declare sets, then describe their overlaps with union:
venn-beta
set A ["Things I like"]
set B ["Things I'm good at"]
union A,B ["My job (ideally)"]
The identifier after set is used to reference that set in union declarations. The bracket syntax ["..."] lets you set a display label while keeping the identifier clean.
Sizing sets
Add a :N suffix to control the relative size of sets and their overlapping regions:
venn-beta
set A ["Backend Engineers"] :3
set B ["Frontend Engineers"] :2
union A,B ["Full-stack"] :1
Larger numbers create larger circles. This is useful when you want the visual proportion to reflect something meaningful — like relative team sizes or frequency of overlap.
Text inside regions
Use text to place labels inside specific regions:
venn-beta
set A ["Cats"]
set B ["Dogs"]
union A,B ["Both"]
text ["Chaos"]
Indented text lines attach to the most recent set or union.
Styling
Apply colors and styles using familiar CSS-like properties:
style A fill:#E8F4FD, stroke:#0072B1
style B fill:#FDF0E8, stroke:#E06000
style A,B fill:#F9F0FF, stroke:#7B2D8B
What you can actually use this for
Venn diagrams are versatile in ways that are easy to underestimate. A few real uses we’d expect to see:
- Product strategy: where your capabilities overlap with what customers need and what the market doesn’t offer (the classic opportunity Venn)
- Team documentation: skills overlap, responsibility overlap, on-call coverage
- Technical architecture: which systems share components, dependencies, or data
- Teaching and explanation: illustrating concepts that live at the intersection of two or more categories
The fact that it’s text-based and lives in your repo, wiki, or docs means you can keep it up to date without switching tools.
Beta means help us shape it
Like the Ishikawa diagram, Venn ships as venn-beta. The syntax is stable at the core, but options for more complex n-way Venns, additional styling controls, and layout behavior are still developing.
Docs are live at mermaid.js.org/syntax/venn.html. Try it, tell us what’s missing.