This is a new diagram type in Mermaid. Its syntax may evolve in future versions. Use the
venn-beta keyword.Basic Venn diagram
This example shows team overlap:Syntax overview
Starting a diagram
Begin withvenn-beta and optionally add a title:
Defining sets
Useset for individual sets:
A, Set_1) or quoted strings ("Foo Bar").
Defining unions
Useunion for overlapping regions:
Labels
Use bracket syntax["..."] to set display labels:
This keeps identifiers short while showing descriptive labels in the diagram.
Sizes
Add sizes to sets or unions using:N suffix:
Sizes are proportional and help visualize the relative magnitude of each region.
Text nodes
Add labels inside sets or unions usingtext nodes:
Text node rules
- Use indentation to attach text to the most recent
setorunion - Text nodes support the same bracket syntax for display labels
- Multiple text nodes can be added to any region
Styling
Apply visual styles usingstyle statements:
Supported style properties
Style properties
Style properties
fill- Change fill colorcolor- Change text colorstroke- Change stroke colorstroke-width- Change stroke widthfill-opacity- Change fill opacity
Styling multiple elements
You can style multiple elements in one statement:Complete examples
Skills overlap
Product features
Customer segments
Three-set diagrams
Venn diagrams can show complex relationships between three sets:Use cases
Venn diagrams are commonly used for:- Set theory: Teaching mathematical concepts
- Feature comparison: Comparing product features across tiers
- Audience analysis: Showing customer segment overlaps
- Skill mapping: Visualizing team competencies
- Data analysis: Showing intersections in datasets
- Decision making: Comparing options and their overlaps
Best practices
Limitations
Venn diagrams in Mermaid:
- Work best with 2-3 sets (4+ sets become very complex)
- Require all union sets to be previously defined
- Show proportional relationships when sizes are specified
- May not perfectly represent complex mathematical set relationships