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    label: 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

1	2

[changeset-bot]

🦋 Changeset detected

Latest commit: 046aff8

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: 046aff8

[codecov]

Codecov Report

❌ Patch coverage is 2.12202% with 369 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.56%. Comparing base (d5bc07d) to head (046aff8).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/venn/vennRenderer.ts	0.51%	195 Missing ⚠️
packages/mermaid/src/diagrams/venn/vennDB.ts	0.99%	100 Missing ⚠️
packages/mermaid/src/diagrams/venn/styles.ts	0.00%	36 Missing ⚠️
packages/mermaid/src/diagrams/venn/vennDetector.ts	7.14%	13 Missing ⚠️
packages/examples/src/examples/venn.ts	10.00%	9 Missing ⚠️
packages/mermaid/src/diagrams/venn/vennDiagram.ts	10.00%	9 Missing ⚠️
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00%	3 Missing ⚠️
packages/examples/src/index.ts	0.00%	2 Missing ⚠️
.build/jsonSchema.ts	0.00%	1 Missing ⚠️
packages/mermaid/src/docs/.vitepress/config.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5932      +/-   ##
==========================================
- Coverage     3.57%   3.56%   -0.02%     
==========================================
  Files          473     481       +8     
  Lines        47475   47862     +387     
  Branches       734     741       +7     
==========================================
+ Hits          1696    1704       +8     
- Misses       45779   46158     +379     

Flag	Coverage Δ
unit	3.56% <2.12%> (-0.02%)	⬇️

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%> (ø)
.build/jsonSchema.ts	0.00% <0.00%> (ø)
packages/mermaid/src/docs/.vitepress/config.ts	0.40% <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/examples/src/examples/venn.ts	10.00% <10.00%> (ø)
packages/mermaid/src/diagrams/venn/vennDiagram.ts	10.00% <10.00%> (ø)
packages/mermaid/src/diagrams/venn/vennDetector.ts	7.14% <7.14%> (ø)
... and 3 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)	✅ No changes detected	-	Dec 28, 2025, 2:28 AM

[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	046aff8
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6950939794af8a00089e4260
😎 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.