Markdown Venn diagram maker

Venn diagram syntax

This is our own compact text format, drawn by a renderer built into this page. A diagram is a list of statements, one per line. You declare each set, then label the regions where sets overlap. Here is each piece you can write.

Start the block

The first line is the word venn on its own. Everything after it is a statement.

Declare a set

Write set, an ID, and a quoted label. IDs are single letters: use A and B for two sets, and add C for a third. Add color=#hex to pick the circle colour. The circles are drawn semi-transparent, so where two colours overlap they blend into a third shade.

venn
set A "Frontend" color=#4f46e5
set B "Backend" color=#16a34a

Label a region

Write region, a KEY, and quoted text. The KEY is a run of set IDs naming the exact area to label. A means the part of A that is in no other set, AB means the overlap of A and B, and (with three sets) ABC means the centre where all three meet. Regions you do not mention are simply left blank.

venn
set A "Frontend" color=#4f46e5
set B "Backend" color=#16a34a
region A "React"
region B "SQL"
region AB "APIs"

Three sets and a title

Add a third set C for the classic three-circle Venn. Add title "Text" to name the diagram. With three sets the region KEYs are A, B, C, the pairwise overlaps AB, AC, BC, and the centre ABC.

venn
title "Skills"
set A "Design" color=#4f46e5
set B "Code" color=#16a34a
set C "Research" color=#dc2626
region A "Visual"
region B "Systems"
region C "Interviews"
region AB "Prototypes"
region AC "Concepts"
region BC "Tooling"
region ABC "Product"

Cheat sheet