feat: Add Venn diagram

[exoego]

📑 Summary

Resolves #2583

📏 Design Decisions

This PR leverages upsetjs/venn.js, which is a maintained d3 plugin for Venn/Euler diagram.

My syntax proposal is:

venn-beta
    title Web Dev
    set Frontend
        text React
        text shadcn-ui
        text Firebase
    set Backend
        text Hono
        text PostgreSQL
        text S3
        text Lambda
    union Frontend,Backend["APIs"]

• set defines a single set (circle)
• union A,B defines an overlap between multiple sets
• text defines a text node which belongs to one of set or union
  • Binding to parent set is based on indentation, like block, mindmap and treemap.
  • text nodes are put in the grid in the contained circle, as illustrated in

Text nodes can wrap when very long, while set node can not wrap (I've tried to implement auto-wrap for set, but no luck)

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Screenshot

light	dark	handDrawn

[changeset-bot]

🦋 Changeset detected

Latest commit: 37582dc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	7aefbc3
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/671d82ff0f23800008178ea3
😎 Deploy Preview	https://deploy-preview-5932--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@5932

mermaid

npm i https://pkg.pr.new/mermaid-js/mermaid@5932

@mermaid-js/layout-elk

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@5932

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-tidy-tree@5932

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@5932

@mermaid-js/parser

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@5932

@mermaid-js/tiny

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/tiny@5932

commit: 37582dc

[codecov]

Codecov Report

❌ Patch coverage is 3.86847% with 497 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.58%. Comparing base (9c90e24) to head (37582dc).
⚠️ Report is 42 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/venn/vennRenderer.ts	0.32%	310 Missing ⚠️
packages/mermaid/src/diagrams/venn/vennDB.ts	0.94%	105 Missing ⚠️
packages/mermaid/src/diagrams/venn/vennDetector.ts	7.14%	13 Missing ⚠️
packages/mermaid/src/themes/theme-base.js	0.00%	11 Missing ⚠️
packages/mermaid/src/themes/theme-forest.js	0.00%	11 Missing ⚠️
packages/mermaid/src/diagrams/venn/styles.ts	9.09%	10 Missing ⚠️
packages/examples/src/examples/venn.ts	10.00%	9 Missing ⚠️
packages/mermaid/src/diagrams/venn/vennDiagram.ts	10.00%	9 Missing ⚠️
packages/mermaid/src/themes/theme-dark.js	0.00%	6 Missing ⚠️
packages/mermaid/src/themes/theme-neutral.js	0.00%	6 Missing ⚠️
... and 4 more

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #5932    +/-   ##
========================================
  Coverage     3.58%   3.58%            
========================================
  Files          475     483     +8     
  Lines        47605   48132   +527     
  Branches       741     758    +17     
========================================
+ Hits          1706    1726    +20     
- Misses       45899   46406   +507     

Flag	Coverage Δ
unit	3.58% <3.86%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/config.type.ts	100.00% <ø> (ø)
packages/mermaid/src/defaultConfig.ts	41.31% <100.00%> (+0.55%)	⬆️
packages/mermaid/src/diagrams/venn/vennTypes.ts	100.00% <100.00%> (ø)
packages/mermaid/src/themes/theme-default.js	95.23% <100.00%> (+0.13%)	⬆️
.build/jsonSchema.ts	0.00% <0.00%> (ø)
packages/mermaid/src/docs/.vitepress/config.ts	0.39% <0.00%> (-0.01%)	⬇️
packages/examples/src/index.ts	2.08% <0.00%> (-0.10%)	⬇️
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00% <0.00%> (ø)
packages/mermaid/src/themes/theme-dark.js	2.23% <0.00%> (-0.04%)	⬇️
packages/mermaid/src/themes/theme-neutral.js	3.09% <0.00%> (-0.06%)	⬇️
... and 8 more

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	16 added	Feb 26, 2026, 1:47 PM

[piranna]

This draft has broken CI and conflicts, how can we move It forward?

[exoego]

I am still working to add text nodes in each circle.

[FKSI]

+1 any timeline on this one? :)

[dgrr]

wen

[schoettler]

This draft has broken CI and conflicts, how can we move It forward?

By forking @exoego 's PR and fixing the conflicts + broken CI. Hopefully adding the text in each node as he mentioned.

[Inviz]

It's a shame that this stalls, looks like a solid implementation of a very needed feature

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	37582dc
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69a04c45929e5f0007fd31e2
😎 Deploy Preview	https://deploy-preview-5932--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[lee-treehouse]

@lee-treehouse if you're in that Discord server could you get the maintainer's attention?

Yep I posted yesterday mentioning this lovely PR and the issue’s many upvotes. 🤞

[knsv]

Thank you for this contribution — and I want to start with an apology. This PR has been waiting too long for a proper review, and that's on us. I'm sorry for the delay. We're committed to seeing this through now and getting it across the finish line together with the Ishikawa PR.

The diagram looks fantastic. It's clear this is something the community has been longing for, and your implementation captures it beautifully. The syntax
is clean and the support for 2, 3, and 4 sets with intersections is really well done.

Here's my review:

What's great:

• The visual output looks wonderful — the intersections are clear and readable
• The syntax is intuitive and well-designed
• Supporting multiple set counts (2–4) with proper intersections is exactly right

Things to address:

1. Theme support: I notice themes aren't supported yet. You had this working in the Ishikawa diagram — it would be great to bring the same approach here. In particular, we have support for color scales in the base theme (used in journey diagrams for sequential section colors). The fillTypes pattern in journey diagrams could work well for the set colors. I'd also suggest looking at the pie chart color logic - it handles slices and calculates visible text color against contrasting backgrounds, which seems directly relevant for the Venn set fills and labels.
2. Sizing with useMaxWidth: The diagram currently renders much larger than other diagram types when useMaxWidth is enabled — it dwarfs a pie chart in comparison, for example. This can be problematic when embedding in documentation sites alongside other diagrams. The sizing should be consistent with how other diagrams handle useMaxWidth.
3. Visual regression tests: Please add visual snapshot tests - see cypress/rendering/xyz.spec.js for examples. It's really easy: just add a diagram per test. The image snapshot comparison catches any future regressions automatically. This is one of our most important quality safeguards across all diagram types.
4. Handdrawn/rough mode: Would be nice to support, but I'm not sure if @upsetjs/venn.js supports it. If it doesn't, that's understandable - but we should document that handdrawn look is not available for this diagram type.
5. Styling approach: The syntax is great, but for someone familiar with Mermaid conventions, it might feel more natural to set color options using style statements rather than the text-based approach. Worth considering whether the styling can align with Mermaid's existing patterns.

Again - great work and sorry for the wait. Let's get both of these diagrams in.

[exoego]

@knsv Thanks for the detailed review 🙇
I think all points are adressed

1. Theme support 82b7b34
2. Sizing with useMaxWidth 3d24c56
3. Visual regression test c21f815
4. Handdrawn look 4e1cdf6
5. Styling syntax 017076c
   • Labeling with brankets: `A["LABEL"]' like Flowchart, Class, ER, Block, etc
   • Styling with style keyword style A fill:... like Flowchart, Class, ER, Block, etc
     • Only style. No classDef or other keywords this time
   • Node sizing with set A:42 like Pie, XY

It's good for me to squash commits when merging.

[knsv]

Nice progress @exoego — 4 of 5 items from my previous review are addressed, and the hand-drawn mode and style statement work came out really well.

What's working well:
Comprehensive test coverage (16 Cypress snapshots, 14 parser unit tests, 6 renderer unit tests), full rough.js integration with deterministic seed, clean style A fill:red,color:white syntax, proper configureSvgSize() usage, good diagram isolation, and changeset included. Solid work!!

Schema fix — I've pushed this directly:

• The config.schema.yaml diff replaced radar with venn in the required array instead of adding venn alongside it. This would break radar config validation. I've fixed this on your branch.

One thing to address:
The forest and neutral themes are missing venn1..venn8 color variables (only base, default, and dark got them). Users on those themes will see all circles fall back to primaryColor. I've created issue #7415 to track this — we can handle it in a follow-up PR so it doesn't block this one.

Nits (non-blocking):

vennDiagram.ts imports styles as flowStyles — copy-paste leftover, should be vennStyles.
config.type.ts looks hand-edited — worth regenerating from the schema. CI's types:verify-config should catch any mismatch.

Approving — with the schema fix already pushed, this is good to go. Great work on the test coverage and the rough.js implementation. 🎉

Again, great work. Ping me if you want to work more with Mermaid. We have a spot open on the core team for you!

[exoego]

I'll work on 7415 and other nits in subsequent PRs so this PR itself gets merged soon🙇