Skip to content

venn.md

Latest commit

 

History

History
156 lines (128 loc) · 3.06 KB

venn.md

File metadata and controls

156 lines (128 loc) · 3.06 KB

Warning

THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.

Please edit the corresponding file in /packages/mermaid/src/docs/syntax/venn.md.

Venn diagrams (v11.12.3+)

Venn diagrams show relationships between sets using overlapping circles.

Warning This is a new diagram type in Mermaid. Its syntax may evolve in future versions.

Syntax

  • Start with venn-beta.
  • Use set for a single set name.
  • Use union for an overlap of two or more set names.
  • Identifiers in union must be defined by earlier set lines.
  • Set identifiers can be bare words (A, Set_1) or quoted strings ("Foo Bar").
venn-beta
  title "Team overlap"
  set Frontend
  set Backend
  union Frontend,Backend["APIs"]

venn-beta
  title "Team overlap"
  set Frontend
  set Backend
  union Frontend,Backend["APIs"]
Loading

Labels

Use bracket syntax ["..."] to set a display label while keeping the identifier short:

venn-beta
  set A["Alpha"]
  set B["Beta"]
  union A,B["AB"]

venn-beta
  set A["Alpha"]
  set B["Beta"]
  union A,B["AB"]
Loading

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:

venn-beta
  set Desirable
  set Feasible
  set Viable
  union Desirable,Feasible,Viable["Innovation"]

venn-beta
  set Desirable
  set Feasible
  set Viable
  union Desirable,Feasible,Viable["Innovation"]
Loading

Sizes

Use :N suffix to set the size of a set or union:

venn-beta
  set A["Alpha"]:20
  set B["Beta"]:12
  union A,B["AB"]:3

venn-beta
  set A["Alpha"]:20
  set B["Beta"]:12
  union A,B["AB"]:3
Loading

Text nodes

  • Use text to place labels inside a set or union.
  • Indented text lines attach to the most recent set or union.
  • Use bracket syntax ["..."] to set a display label for text nodes.
venn-beta
  set A["Frontend"]
    text A1["React"]
    text A2["Design Systems"]
  set B["Backend"]
    text B1["API"]
  union A,B["Shared"]
    text AB1["OpenAPI"]

venn-beta
  set A["Frontend"]
    text A1["React"]
    text A2["Design Systems"]
  set B["Backend"]
    text B1["API"]
  union A,B["Shared"]
    text AB1["OpenAPI"]
Loading

Styling

Use style statements to apply visual styles to sets, unions, and text nodes:

  • fill: change the fill color
  • color: change the text color
  • stroke: change the stroke color
  • stroke-width: change the stroke width
  • fill-opacity: change the fill opacity
venn-beta
  set A["Alpha"]:20
    text A1["React"]
    text A2["Design Systems"]
  set B["Beta"]:12
  union A,B["AB"]:3
  style A fill:#ff6b6b
  style A,B color:#333
  style A1 color:red

venn-beta
  set A["Alpha"]:20
    text A1["React"]
    text A2["Design Systems"]
  set B["Beta"]:12
  union A,B["AB"]:3
  style A fill:#ff6b6b
  style A,B color:#333
  style A1 color:red
Loading