Diagram - Qualitative Venn Layout
Place two or three equal circles and explicit labels inside exact qualitative regions.
#Usage
Initialize options.venn with two or three equal circle sets and exclusive region membership, as shown in the demos. The option IDs above match the first runnable example below; supply matching saved records or replace them with your graph’s IDs. Expose the selected provider on the component, such as readonly vennDiagramLayout = vennDiagramLayout.
This skeleton assumes an initialized store with page page. Use First Diagram for model creation, style imports and store disposal.
Use vennDiagramLayout for two or three equal-circle sets and explicit region
labels or members. Circle area is qualitative: it does not encode counts, and
changing a count does not change intersection area. The application owns
membership, exclusive counts and captions.
Import DiagramLayout and the provider for this family from @primeui/vue-diagram/layout. Place the component inside Diagram.Root, bind options with :diagram-layout and the provider with :provider. Use the layout setup for the component composition. The complete examples below supply the model, options and cleanup.
#Two-set regions
Design and Code have four exclusive regions, including the outside region. Jordan belongs to both; Morgan belongs to neither. Run explicitly and inspect the labels at Fit. Undo restores all previous positions in one step.
The source supplies venn.sets: ['Design', 'Code'] and a members entry for
each region label. Every label's sets names exactly the circles containing
its whole measured footprint; it must be outside every unlisted circle.
An empty set list means outside all displayed sets. Labels are saved rectangular
nodes, not annotations on the set circles.
#Three-set regions
The third set gives eight total exclusive regions: seven nonempty inclusion combinations and outside all. Each visible unit must have exactly one role, a set circle or member/label. Unknown/duplicate roles and missing units fail.
Free dragging after placement can break declared region geometry. Run again to restore the declared regions. Editing an application membership list and its labels is a separate operation from position-only placement.
#Use the supported geometry
Set nodes must be unrotated plain ellipses with equal measured width/height, diameter 100–10,000, and the same diameter for every set. They have no ports or saved annotations. Region nodes are unrotated plain rectangles; measured annotations contribute to their full footprint. Compound units, other shapes, unequal circles and connector-bearing pages are rejected.
Two circle centers use a separation of 1.1 radii. Three centers form an equilateral triangle of side 1.2 radii. Direction rotates this supported template; it does not derive intersection areas from your data. Labels are searched near region centroids on a bounded grid. A crowded/narrow region fails explicitly without resizing labels or changing membership. Conservative search failure does not prove every possible packing is impossible.
| Option | Default / contract |
|---|---|
venn.sets | Required two/three distinct set-circle IDs. |
venn.members | Required explicit region nodes with id and included sets; at most 24. |
venn.padding | 8; finite 0–1,000 and less than a quarter of circle radius. |
nodeGap | Default 8 between member footprints; the demos pass 8 explicitly. |
direction | Default Right; all four directions supported. |
pinnedIds | Empty; must fit one rigid translation of circles and labels. |
parentId | Optional visible expanded-container scope; fixed containment applies. Leaf units remain required. |
| Unsupported options | incremental must be omitted, even when false. Rank gap, component packing and other family mode data are also unsupported. |
Conflicting pins or fixed containment fail without partial positions. A direction change can conflict with multiple pins. Each measured footprint is bounded to 20,000 per dimension, and final coordinates to one billion. The bounded candidate search has no hard real-time guarantee; source caps are not latency qualification.
#Keep overlap validation trusted
Ordinary providers must return nonoverlapping footprints. Intentional set overlap
is granted only to the exact built-in vennDiagramLayout instance. Its
controller captures the actual body geometry and independently validates returned
circle geometry, all inclusion/exclusion regions, spacing, pins and containment.
A custom object with id: 'venn', copied capabilities or result metadata cannot
grant an overlap exception. A custom executor using the trusted instance must
still return valid Venn geometry.
Both examples run only on request. Restart cancels the job and disposes the previous caller-owned store. DiagramLayout releases its controller on replacement or unmount. Execution
explains worker delivery and stale-input rules shared with other families.