Venn Diagram Syntax

[arjansingh]

Problem

I'm always frustrated when I have to manually create Venn diagrams of more than 4 intersecting circles. It might sound trivial but arranging complex Venn diagrams in a legible manner is annoying and hard with most of the standard diagraming tools I've used.

Request

This was already brought up many years ago in #200 but Venn diagram in syntax in Mermaid would be great.

Venn Diagrams are basically just a visualization of set theory. So the syntax would just have to implement basic set operations:

• Unions
• Intersections
• Compliments
• Differences

Potential Syntax

Something like the following could be a good syntax:

vennDiagram
  set A
  set B
  set C

  intersect A B
  union B C
  relativeComplement A C

I know everyone is busy. I am just wondering what the general interest is from the community on prioritizing this versus other new diagram formats.

[wolfspyre]

It would be useful, for sure. There have been multiple times when I looked to see if the gods had finally conspired to make Venn diagrams in mermaid a thing…

that being said is venn more useful than….. That, idk

[arjansingh]

Yup, I agree. I think a useful strategy here would be to ask anyone who wants it to 👍 the issue. If it's got enough community interest. I'd be happy to look at thinking it through more thoroughly in 2022 (among the million other things I gotta do 😂 )

[deslee]

I would love venn diagrams :) I'd be interested in helping when I start having more free time

[wilsonjholmes]

Yes! Venn diagrams would be lovely!

[bobturneruk]

I, too, would like Venn diagrams!

[serpro69]

+1 this would be a killer feature.

[philbo87]

+1 I am also interested!

[MathiasSven]

+1 for sure!

[MoniqueSmiling]

+1 Would be amazing.

[mathiasgheno]

+1 I was doing an documentation in Notion and I asked to myself if mermaid could help my with that. Would be awesome to have this feature.

[kimploo]

+1, any walkaround?

[PogiNate]

+1, this would be helpful so frequently!

[JonLoose]

+1

[joniek]

⬆️ Upvote

[j-r-e-i-d]

yes please!

[LucVidal360]

+1 :+1:

[Casyfill]

+1

[FrodoChen]

+1

[FelipeAdachi]

+1

[pedramamini]

👍

[tyten]

+1

[ElectricSwan]

Definitely a +1 from me

[intzaaa]

+1

[I7T5]

+1

[rsdlt]

+1

[AhmedThahir]

Any updates on this?

[pete-debiase]

+1 !

[gillyspy]

+1

[ryanfeeley]

+1

[g-berthiaume]

+1

[dwhelan]

+1

[rghvdberg]

+1

[S-Imtiaz]

+1

[laoyaoer]

+1

[jonas-lomholdt]

+1

[anchal0997]

I would like to work on this issue.

[avijit1258]

I am also interested to grab this one and happy to collaborate with others. Wondering what will be the closest Diagram type among the existing ones. We can start from there. Also any resource suggestion to better understand how the parser, render, detector works for diagrams is highly appreciated.

[ryanpeach]

Needed for sure

[Roderick-Jonsson]

Go for it 🚀 I found an easy to read research paper which should skip reinventing the wheel with Venn-Diagrams.

Here some interesting insights I found which may help.

• Research paper interactive example
• jvenn - jquery library with interactive online editor

[endolith]

You can vote here: https://github.com/mermaid-js/mermaid/issues/177#issuecomment-345474864

But do you really want Venn diagrams or do you want Euler diagrams?

https://en.wikipedia.org/wiki/Euler_diagram#Relation_between_Euler_and_Venn_diagrams

[brunolnetto]

Citation : Batman would say: "This is not the answer you need, but the answer you deserve."

Fact : This feature will not happen any time soon on mermaid (@knsv is needed to confirm this claim);

Reason : The visual complexity of potential 2^n intersections on a n-sets-scenario (See product "interactiVenn" on URL http://www.interactivenn.net/, first remarked here on @Roderick-Jonsson' comment)

Solution : As @endolith points out, I would be really glad for you guys to enjoy the libraries below I wrote:

python     : https://github.com/quivero/eule
javascript : https://github.com/trouchet/eulejs

Tags: @arjansingh @wolfspyre @wilsonjholmes @bobturneruk @MathiasSven @philbo87 @MoniqueSmiling @mathiasgheno @kimploo @PogiNate @JonLoose @j-r-e-i-d @LucVidal360 @Casyfill @FrodoChen @FelipeAdachi @tyten @ElectricSwan @huangyinhaow @I7T5 @rsdlt @AhmedThahir @gillyspy @ryanfeeley @g-berthiaume @dwhelan @rghvdberg @laoyaoer @avijit1258 @anchal0997 @Roderick-Jonsson

I could tag more if I knew how to request all issue_interaction_users (made-up property) from github-api.

Share the word.

[the-solipsist]

I think even limited support for simple 2 or 3-set Euler+Venn diagrams would be welcome.

@brunolnetto I'd like to use Venn diagrams for testing of categorical syllogisms in logic. The tool that you linked to doesn't seem to allow shading of unions, intersections, complements, differences, nor placing of an x on the line of a circle. Shading an placing an x either inside a set or on the line of a circle are the basic requirements for usage of Venn diagrams for logic (and specifically categorical syllogisms).

[brunolnetto]

Let me see if I understand: you mean "categorical syllogism" as the combinatorial statement of boolean propositions, which concludes also a boolean output in a trivial manner "propositions therefore output". Ludwig Wittgenstein grins.

If I understand correctly, the library comprehends the case in which there are data available with categories and one wishes to separate them in a Venn-fashion to further analysis. It does not work in a mere illustrative manner, where the exercise of statement is propositional, oftentimes used on charts as planning tools.

[elzup]

Wouldn't it be cool to have an option to short syntax using paren ?

syntax 1

vennDiagram
    set A : multiple 2
    set B : multiple 3
    set C : multiple 5

(2)
[3]
( 4 [ 6 ) 9 ]
{ 5, 25 ( 10 [ 30 ) 15 ] }

syntax 2

(A {2, 4} (B {6} A) {3, 9} B)
(C {5, 25} (A {10} (B {40} A) {15} B) C)

(A
  {2, 4}
    (B
        {6}
        A)
            {3, 9}
            B)

(C {5, 25}
    (A {10}
        (B {40} A)
                {15} B) C)

syntax 3

A{ 2, 4, B{ 6 } }
B{ 3, 9 }

[brunolnetto]

@elzup your proposed notations are confusing. I suggest the parse notation

sets A,B,C
subset A 1
subset B 2
subset C 3
subset A,B 4

This notation represents set-exclusive count components: There is 1 exclusive from A, 2 exclusive from B, 3 exclusive from C, and 4 exclusive from intersection A,B.

IMHO The mathematical steps to find the intersections based on item ids or something similar is algorithmic and must remain outside Mermaid digram syntax

[claws99]

+1

[aboy021]

I think there's a bit of confusion about exactly what is wanted here. Personally, I'd find it useful to be able to generate an Euler diagram for a small(ish) set. Ideally we'd be able to handle things like this:

• File:British Isles Euler diagram 15.svg - Wikipedia
• File:Supranational European Bodies.svg - Wikipedia

There's some prior art for doing this in JS:

• Euler diagram demo | Highcharts.com

The thing is, for many use cases, these sorts of diagrams aren't actually that good. One alternative to consider is a Rainbow box - Wikipedia, which would be lovely to have.

From what I can tell, even modest sized Euler diagrams are an area of active research. This site has some nice information and its references are a nice gateway into some of the research on the matter:

• Euler Diagrams Overview

Here are some research papers that leapt out at me:

• (PDF) Ensuring the drawability of Euler diagrams for up to eight sets
• (PDF) A Task-Based Evaluation of Combined Set and Network Visualization
• (PDF) Euler-Time Diagrams: A Set Visualisation Technique Analysed Over Time
• (PDF) Small multiples Euler-time diagrams for software engineering

Regarding syntax: personally I think something along the lines of the existing Flowcharts Syntax for subgraphs is the way to go. Just extend it to include overlapping subgraphs. Writing elements multiple times isn't that much of a chore, especially since the use cases should be small sets

eulerDiagram
    subgraph A [multiple 2]
        2
        4
        6
        10
        20
        30
    end
    subgraph B [multiple 3]
        3
        6
        9
        15
        30
    end
    subgraph C [multiple 5]
        5
        10
        15
        20
        30
    end

[brunolnetto]

Welcome, @aboy021. First of all, I thank in name of all interested in this feature. I agree with your remarks on visual difficulty and am impressed by the references you point out: we profit by write down of low-cardinality sets, as you mention. I expressed my opinion here. In case we opt to go your way for explicit set elements, I recommend to use the library eulejs I wrote in javascript. Disclaimer: there is a python version called eule.

[brunolnetto]

I read [MRF04] on reference provided by @aboy021. There is a conjecture which states:

Claim: It is possible to draw an Euler Diagram only with simple convex non-self-intersecting contour curves like circles, ellipses and rectangles.

It continues with a suggestive algorithmic procedure to place these figures in space. Let us consider the example @aboy021 provides:

Example: There are three sets with elements [2, 4, 6, 10, 20, 30], [3, 6, 9, 15, 30], [5, 10, 15, 20, 30], namely A, B and C. The resulting Euler structure is {'B': [9, 3], 'A,B': [6], 'B,C': [15], 'A,B,C': [30], 'C': [5], 'A,C': [10, 20], 'A': [2, 4]}. It means, it has 3 sets and 7 intersection zones, corresponding to 2^3-1 possibilities. This particular case is a full Venn Diagram.

IMHO, the figure placement suggestion encounters the following description:

Statement: Let us define a contour with some reference point $P_i$ and form parameters $p_i$ i.e. tuple $\pi_i \coloneqq (P_i, pi)$. We look for a (sub-)optimal configuration set $\pi\star$ on the configuration space $\Pi \coloneqq \pi_1 \times \cdots \times \pin$ and belonging to the solution set $\Pi\star$ of statement

$$\min\limits{\pi \in \Pi} \left[\sum\limits{(i, j) \in C(n_p, 2)} d(P_i, P_j)\right]$$

The notation $C(n, m)$ stands for a combination generator of $n$ elements on $m$-cardinality sets, with total cardinality of $\frac{n!}{m! \, (n-m)!}$ sets.

In above statement, we require at some point the Euler structure to assure the given configuration solution complies with desired Euler structure constraints.

From @aboy021's perspective, we have to explicitly write the elements down, which requires one-step of data processing (fortunately made available by libraries eule in python and eulejs in javascript). Each and all set elements on diagram may be too much.

In my approach, we require the Euler structure beforehand and only set cardinalities: it looses element information along the way and requires some more user active thought.

The best of two clever worlds is: write set elements on verbose definition and provide only cardinalities on diagram.

Reference:

[MRF04] P. Mutton, P. Rodgers and J. Flower. Drawing Graphs in Euler Diagrams. Proc. Diagrams 2004. LNAI 2980. Springer Verlag. 66-81.

[brunolnetto]

There is also a structural analysis: it accounts on spider diagrams, which embed the graph structure of the Euler diagram:

Example: Given @aboy021's example ['B', 'A,B', 'B,C', 'A,B,C', 'C', 'A,C', 'A'], we see the following structure: {'1': ['C', 'B', 'A'], '2': ['A,B', 'B,C', 'A,C'], '3': ['A,B,C']} such key is given by set cardinality and value is an array of Euler set keys. There are interfaces between exclusive sets 1-2, 2-3 and 1-3.

The above interfaces may provide some hint about how to place or dimension the figures in an initial configuration.