JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <input type="text" value="W {EC} Y, X {TPP} Y, Z {NTPP} Y, Z {PO} X" />
    <input type="button" value="unleash goodness" />
</header>
<div id="diagram">
</div>

<!--  STATIC MARKUP 
<div>
    <div class="adjacent">
        <div id="w" class="region"></div>
        <div id ="z" class="region">
            <div class="venn">
                <div id="x" class="region"></div>  
                <div id="y" class="region touches-parent"></div>
            </div>
        </div> 
        <div id ="a" class="region">
            <div class="gap">
                <div id="b" class="region touches-parent"></div>  
                <div id="c" class="region"></div>
            </div>
        </div> 
     </div> 
</div>-->

CSS

div {
    display: block;
    float: left;
    position: relative;
}

#diagram {
     margin: 10px;
     padding: 30px;   
     border: 1px dashed #999;
     display: none;    
}

input[type=text] {
    width: 260px;
    padding: 4px;
}
.region {
    border: 2px solid #666;
    border-radius: 200px;
    min-width: 20px;
    min-height: 20px;
    padding: 20px;
}

.adjacent > div {
    margin:0;
}

.venn > div {
    margin-left: 0px;
    }
    .venn > div:nth-child(2) { margin-left: -25px }

.gap > div {
    margin-left: 10px;
    }
    .gap > div:first-child {margin-left: 0;}

.touches-parent {
     margin-top:-20px;   
}

label {
    position: absolute;
    top: 100%;
    left: 50%;
}

JavaScript

function showDiagram() {
    
    $('#diagram').show().empty();
    
    var statements = $('input').val().split(", ");

    $.each(statements, function() {
        console.log(this.toString());

        var parts = this.split(' ');

        var $region1;
        var $region2;
        var relationship = parts[1];

        if ($('#' + parts[0]).length) {
            $region1 = $('#' + parts[0]);
            console.log('found an existing region1: ' + parts[0]);

        } else {
            $region1 = $('<div class="region" id="' + parts[0] + '"></div>');
            $('#diagram').append($region1);
            console.log('created NEW region1: ' + parts[0]);
        }

        if ($('#' + parts[2]).length) {
            $region2 = $('#' + parts[2]);
            console.log('found an existing region2: ' + parts[2]);
        } else {
            $region2 = $('<div class="region" id="' + parts[2] + '"></div>');
            $('#diagram').append($region2);
            console.log('created NEW region2: ' + parts[2]);

        }

        switch (relationship) {

        case "{EC}":
            console.log('case is {EC}');
            $region1.after($region2);
            break;

        case "{NTPP}":
            // $region1.detach();
            $region2.append($region1);
            break;

        case "{TPP}":
            //$region1.detach();
            $region2.append($region1.addClass('touches-parent'));
            break;

        case "{PO}":
            //$region2.detach();
            $region1.after($region2);
            $region1.add($region2).wrapAll('<div class="venn" />');
            break;

        case "{DC}":
            $region1.after($region2)
            $region1.add($region2).wrapAll('<div class="gap"></div>');
            break;
        }
    });

    $('.region').each(function() {

        // add labels
        $label = $('<label>' + $(this).attr('id') + '</label>');
        $(this).prepend($label);

        // make all sibling regions the same...