feat: Add Venn diagram #5932

exoego · 2024-10-04T15:05:09Z

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

set defines a circle or an intersection
- set A and set B defines a circle A and B
- set A,B defines an intersection between A and B
text defines a text node which belongs to one of set

venn-beta
    title Many text nodes in debug text layout mode
    set A      label: Five nodes,  size: 18
    set B      label: Nine nodes,  size: 18
    set A,B    label: Common,      size: 3
    text A     label: A1
    text A     label: A2
    text A     label: A3

📋 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

Preview on Mermaid Live Editor Dark Mode

1	2

changeset-bot · 2024-10-04T15:05:13Z

🦋 Changeset detected

Latest commit: d710d14

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 · 2024-10-04T15:05:28Z

✅ 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 · 2024-10-05T07:30:35Z

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

codecov · 2024-10-05T07:32:14Z

Codecov Report

❌ Patch coverage is 2.31884% with 337 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.56%. Comparing base (d5bc07d) to head (d710d14).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/venn/vennRenderer.ts	0.51%	194 Missing ⚠️
packages/mermaid/src/diagrams/venn/vennDB.ts	1.42%	69 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.01%     
==========================================
  Files          473     480       +7     
  Lines        47475   47819     +344     
  Branches       734     741       +7     
==========================================
+ Hits          1696    1704       +8     
- Misses       45779   46115     +336

Flag	Coverage Δ
unit	`3.56% <2.31%> (-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%> (ø)`
.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

🚀 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 · 2024-10-05T07:55:37Z

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

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Dec 22, 2025, 1:01 AM

piranna · 2024-12-17T14:13:21Z

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

exoego · 2024-12-17T21:25:13Z

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

FKSI · 2025-04-08T10:48:22Z

+1 any timeline on this one? :)

dgrr · 2025-07-15T17:55:32Z

wen

schoettler · 2025-09-16T20:55:31Z

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 · 2025-10-23T01:17:25Z

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

netlify · 2025-12-21T10:18:58Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`d710d14`
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6948964859132c0008212a29
😎 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.

…k theme

exoego force-pushed the 2583-venn branch from 7cb3b11 to 35d043a Compare October 5, 2024 07:29

exoego force-pushed the 2583-venn branch from 53abdf9 to 7aefbc3 Compare October 27, 2024 00:02

init venn diagram

1b230d7

exoego force-pushed the 2583-venn branch from 7aefbc3 to 0dc2703 Compare December 21, 2025 10:18

add text nodes

2fc8ddc

exoego force-pushed the 2583-venn branch from 0dc2703 to 2fc8ddc Compare December 21, 2025 10:22

exoego and others added 2 commits December 21, 2025 19:28

add text nodes

9b1120e

[autofix.ci] apply automated fixes

7079203

exoego marked this pull request as ready for review December 21, 2025 10:47

exoego added 6 commits December 21, 2025 19:50

add changeset

559270e

Merge remote-tracking branch 'origin/2583-venn' into 2583-venn

178c281

add tests

5d685e5

Fix overflow issue on live editor

083a8f4

Bump venn.js

21180a3

Use default color in intersection to support both light theme and dar…

d710d14

…k theme

Uh oh!

feat: Add Venn diagram #5932

Are you sure you want to change the base?

feat: Add Venn diagram #5932

Conversation

exoego commented Oct 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📑 Summary

📏 Design Decisions

📋 Tasks

Screenshot

Uh oh!

changeset-bot bot commented Oct 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Oct 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

pkg-pr-new bot commented Oct 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Oct 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

argos-ci bot commented Oct 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

piranna commented Dec 17, 2024

Uh oh!

exoego commented Dec 17, 2024

Uh oh!

FKSI commented Apr 8, 2025

Uh oh!

dgrr commented Jul 15, 2025

Uh oh!

schoettler commented Sep 16, 2025

Uh oh!

Inviz commented Oct 23, 2025

Uh oh!

netlify bot commented Dec 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

exoego commented Oct 4, 2024 •

edited

Loading

changeset-bot bot commented Oct 4, 2024 •

edited

Loading

netlify bot commented Oct 4, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 5, 2024 •

edited

Loading

codecov bot commented Oct 5, 2024 •

edited

Loading

argos-ci bot commented Oct 5, 2024 •

edited

Loading

netlify bot commented Dec 21, 2025 •

edited

Loading