test(venn): strengthen jsdom render guard for issue mermaid-js#7656 fix

Address review feedback on PR mermaid-js#7758.

- vennRenderer.spec.ts: the existing jsdom render test for issue mermaid-js#7656 only asserted that the "Innovation" label appeared in the DOM, which venn.js emits for any declared labeled union regardless of whether the circles actually overlap. The test passed even with expandImpliedSubsets bypassed. Replace it with an assertion on the rendered geometry: the three implied pairwise intersections (A-B, A-C, B-C) must be present in addition to the user-declared A-B-C intersection, and the 3-way intersection path must not be the degenerate "M 0 0" placeholder venn.js emits when an area has no visible geometry. Verified to fail when the fix is bypassed.

- vennRenderer.ts: extract the synthesized-pair default size into a defaultSubsetSize(arity) helper using the same expression as vennDB.addSubsetData (10 / arity^2), and add a comment so the two defaults stay in sync.

- docs/syntax/venn.md: add a "Higher-arity unions" section with a 3-set Desirable/Feasible/Viable Innovation example, since bare 3-way unions now render correctly.

Author: Mukul Kumar Yadav

docs/syntax/venn.md

@@ -53,6 +53,28 @@ venn-beta
   union A,B["AB"]
 ```
 
+### Higher-arity unions
+
+`union` accepts three or more set names. The diagram renders the implied
+pairwise overlaps automatically, so the label on the higher-arity union has a
+visible region to sit in:
+
+```mermaid-example
+venn-beta
+  set Desirable
+  set Feasible
+  set Viable
+  union Desirable,Feasible,Viable["Innovation"]
+```
+
+```mermaid
+venn-beta
+  set Desirable
+  set Feasible
+  set Viable
+  union Desirable,Feasible,Viable["Innovation"]
+```
+
 ### Sizes
 
 Use `:N` suffix to set the size of a set or union:

packages/mermaid/src/diagrams/venn/vennRenderer.spec.ts

@@ -165,7 +165,7 @@ describe('vennRenderer', () => {
     expect(debugCircle).not.toBeNull();
   });
 
-  it('renders label for 3-way union without explicit pairwise unions (issue #7656)', async () => {
+  it('renders an overlapping layout for a bare 3-way union (issue #7656)', async () => {
     document.body.innerHTML = '<svg id="venn"></svg>';
     const diagram = createDiagram({
       getSubsetData: () => [
@@ -178,9 +178,36 @@ describe('vennRenderer', () => {
 
     await draw('', 'venn', '1.0', diagram);
 
-    const intersectionTexts = [...document.querySelectorAll('.venn-intersection text')];
-    const labels = intersectionTexts.map((el) => el.textContent);
-    expect(labels).toContain('Innovation');
+    // The label being present is necessary but not sufficient: venn.js emits a
+    // `.venn-intersection text` element for any declared labeled union, even
+    // when the circles do not actually overlap.
+    const intersectionLabels = [...document.querySelectorAll('.venn-intersection text')].map(
+      (el) => el.textContent
+    );
+    expect(intersectionLabels).toContain('Innovation');
+
+    // What the fix actually guarantees is that the layout produces overlapping
+    // circles, which is visible in two complementary ways in the DOM:
+    //   1. venn.js renders the three implied pairwise intersections, in addition
+    //      to the user-declared 3-way intersection.
+    //   2. The 3-way intersection's SVG path is a real region, not the
+    //      degenerate `"M 0 0"` placeholder venn.js emits when an area has no
+    //      visible geometry on screen.
+    const intersections = [...document.querySelectorAll('.venn-intersection')];
+    const setsByPath = new Map<string, string | null>();
+    for (const node of intersections) {
+      const data = (node as unknown as { __data__?: { sets?: string[] } }).__data__;
+      const sets = data?.sets ?? [];
+      if (sets.length >= 2) {
+        const key = [...sets].sort().join('|');
+        setsByPath.set(key, node.querySelector('path')?.getAttribute('d') ?? null);
+      }
+    }
+    expect([...setsByPath.keys()].sort()).toEqual(['A|B', 'A|B|C', 'A|C', 'B|C']);
+    const threeWayPath = setsByPath.get('A|B|C');
+    expect(threeWayPath).toBeTruthy();
+    expect(threeWayPath).not.toBe('M 0 0');
+    expect((threeWayPath ?? '').length).toBeGreaterThan(20);
   });
 });
 

packages/mermaid/src/diagrams/venn/vennRenderer.ts

@@ -34,10 +34,17 @@ function buildStyleByKey(styleData: VennStyleData[]): Map<string, Record<string,
 // and renders the circles disjointly. We synthesize the missing pairwise
 // subsets here so the layout produces the expected overlapping diagram.
 // User-declared subsets are preserved verbatim.
+//
+// Synthesized pairs use the same default size that `vennDB.addSubsetData`
+// would have produced for an undeclared 2-way union, so a bare 3-way union
+// renders identically to one declared with all three pairwise unions left
+// at their defaults. Keep this expression in sync with vennDB.
+const defaultSubsetSize = (arity: number) => 10 / Math.pow(arity, 2);
+
 export function expandImpliedSubsets(subsets: VennData[]): VennData[] {
   const existingKeys = new Set(subsets.map((s) => s.sets.join('|')));
   const implied: VennData[] = [];
-  const defaultPairSize = 10 / 4;
+  const defaultPairSize = defaultSubsetSize(2);
   for (const subset of subsets) {
     if (subset.sets.length < 3) {
       continue;

packages/mermaid/src/docs/syntax/venn.md

@@ -32,6 +32,20 @@ venn-beta
   union A,B["AB"]
 ```
 
+### Higher-arity unions
+
+`union` accepts three or more set names. The diagram renders the implied
+pairwise overlaps automatically, so the label on the higher-arity union has a
+visible region to sit in:
+
+```mermaid-example
+venn-beta
+  set Desirable
+  set Feasible
+  set Viable
+  union Desirable,Feasible,Viable["Innovation"]
+```
+
 ### Sizes
 
 Use `:N` suffix to set the size of a set or union: