docs/vt.svg

<svg id="mermaid-1532102905906" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 506.859375px;" viewBox="0 0 506.859375 376"><style>


#mermaid-1532102905906 .label {
  font-family: 'trebuchet ms', verdana, arial;
  color: #333; }

#mermaid-1532102905906 .node rect,
#mermaid-1532102905906 .node circle,
#mermaid-1532102905906 .node ellipse,
#mermaid-1532102905906 .node polygon {
  fill: #ECECFF;
  stroke: #9370DB;
  stroke-width: 1px; }

#mermaid-1532102905906 .node.clickable {
  cursor: pointer; }

#mermaid-1532102905906 .arrowheadPath {
  fill: #333333; }

#mermaid-1532102905906 .edgePath .path {
  stroke: #333333;
  stroke-width: 1.5px; }

#mermaid-1532102905906 .edgeLabel {
  background-color: #e8e8e8; }

#mermaid-1532102905906 .cluster rect {
  fill: #ffffde !important;
  stroke: #aaaa33 !important;
  stroke-width: 1px !important; }

#mermaid-1532102905906 .cluster text {
  fill: #333; }

#mermaid-1532102905906 div.mermaidTooltip {
  position: absolute;
  text-align: center;
  max-width: 200px;
  padding: 2px;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 12px;
  background: #ffffde;
  border: 1px solid #aaaa33;
  border-radius: 2px;
  pointer-events: none;
  z-index: 100; }

#mermaid-1532102905906 .actor {
  stroke: #CCCCFF;
  fill: #ECECFF; }

#mermaid-1532102905906 text.actor {
  fill: black;
  stroke: none; }

#mermaid-1532102905906 .actor-line {
  stroke: grey; }

#mermaid-1532102905906 .messageLine0 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  marker-end: 'url(#arrowhead)';
  stroke: #333; }

#mermaid-1532102905906 .messageLine1 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: #333; }

#mermaid-1532102905906 #arrowhead {
  fill: #333; }

#mermaid-1532102905906 #crosshead path {
  fill: #333 !important;
  stroke: #333 !important; }

#mermaid-1532102905906 .messageText {
  fill: #333;
  stroke: none; }

#mermaid-1532102905906 .labelBox {
  stroke: #CCCCFF;
  fill: #ECECFF; }

#mermaid-1532102905906 .labelText {
  fill: black;
  stroke: none; }

#mermaid-1532102905906 .loopText {
  fill: black;
  stroke: none; }

#mermaid-1532102905906 .loopLine {
  stroke-width: 2;
  stroke-dasharray: '2 2';
  marker-end: 'url(#arrowhead)';
  stroke: #CCCCFF; }

#mermaid-1532102905906 .note {
  stroke: #aaaa33;
  fill: #fff5ad; }

#mermaid-1532102905906 .noteText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px; }


#mermaid-1532102905906 .section {
  stroke: none;
  opacity: 0.2; }

#mermaid-1532102905906 .section0 {
  fill: rgba(102, 102, 255, 0.49); }

#mermaid-1532102905906 .section2 {
  fill: #fff400; }

#mermaid-1532102905906 .section1,
#mermaid-1532102905906 .section3 {
  fill: white;
  opacity: 0.2; }

#mermaid-1532102905906 .sectionTitle0 {
  fill: #333; }

#mermaid-1532102905906 .sectionTitle1 {
  fill: #333; }

#mermaid-1532102905906 .sectionTitle2 {
  fill: #333; }

#mermaid-1532102905906 .sectionTitle3 {
  fill: #333; }

#mermaid-1532102905906 .sectionTitle {
  text-anchor: start;
  font-size: 11px;
  text-height: 14px; }


#mermaid-1532102905906 .grid .tick {
  stroke: lightgrey;
  opacity: 0.3;
  shape-rendering: crispEdges; }

#mermaid-1532102905906 .grid path {
  stroke-width: 0; }


#mermaid-1532102905906 .today {
  fill: none;
  stroke: red;
  stroke-width: 2px; }


#mermaid-1532102905906 .task {
  stroke-width: 2; }

#mermaid-1532102905906 .taskText {
  text-anchor: middle;
  font-size: 11px; }

#mermaid-1532102905906 .taskTextOutsideRight {
  fill: black;
  text-anchor: start;
  font-size: 11px; }

#mermaid-1532102905906 .taskTextOutsideLeft {
  fill: black;
  text-anchor: end;
  font-size: 11px; }


#mermaid-1532102905906 .taskText0,
#mermaid-1532102905906 .taskText1,
#mermaid-1532102905906 .taskText2,
#mermaid-1532102905906 .taskText3 {
  fill: white; }

#mermaid-1532102905906 .task0,
#mermaid-1532102905906 .task1,
#mermaid-1532102905906 .task2,
#mermaid-1532102905906 .task3 {
  fill: #8a90dd;
  stroke: #534fbc; }

#mermaid-1532102905906 .taskTextOutside0,
#mermaid-1532102905906 .taskTextOutside2 {
  fill: black; }

#mermaid-1532102905906 .taskTextOutside1,
#mermaid-1532102905906 .taskTextOutside3 {
  fill: black; }


#mermaid-1532102905906 .active0,
#mermaid-1532102905906 .active1,
#mermaid-1532102905906 .active2,
#mermaid-1532102905906 .active3 {
  fill: #bfc7ff;
  stroke: #534fbc; }

#mermaid-1532102905906 .activeText0,
#mermaid-1532102905906 .activeText1,
#mermaid-1532102905906 .activeText2,
#mermaid-1532102905906 .activeText3 {
  fill: black !important; }


#mermaid-1532102905906 .done0,
#mermaid-1532102905906 .done1,
#mermaid-1532102905906 .done2,
#mermaid-1532102905906 .done3 {
  stroke: grey;
  fill: lightgrey;
  stroke-width: 2; }

#mermaid-1532102905906 .doneText0,
#mermaid-1532102905906 .doneText1,
#mermaid-1532102905906 .doneText2,
#mermaid-1532102905906 .doneText3 {
  fill: black !important; }


#mermaid-1532102905906 .crit0,
#mermaid-1532102905906 .crit1,
#mermaid-1532102905906 .crit2,
#mermaid-1532102905906 .crit3 {
  stroke: #ff8888;
  fill: red;
  stroke-width: 2; }

#mermaid-1532102905906 .activeCrit0,
#mermaid-1532102905906 .activeCrit1,
#mermaid-1532102905906 .activeCrit2,
#mermaid-1532102905906 .activeCrit3 {
  stroke: #ff8888;
  fill: #bfc7ff;
  stroke-width: 2; }

#mermaid-1532102905906 .doneCrit0,
#mermaid-1532102905906 .doneCrit1,
#mermaid-1532102905906 .doneCrit2,
#mermaid-1532102905906 .doneCrit3 {
  stroke: #ff8888;
  fill: lightgrey;
  stroke-width: 2;
  cursor: pointer;
  shape-rendering: crispEdges; }

#mermaid-1532102905906 .doneCritText0,
#mermaid-1532102905906 .doneCritText1,
#mermaid-1532102905906 .doneCritText2,
#mermaid-1532102905906 .doneCritText3 {
  fill: black !important; }

#mermaid-1532102905906 .activeCritText0,
#mermaid-1532102905906 .activeCritText1,
#mermaid-1532102905906 .activeCritText2,
#mermaid-1532102905906 .activeCritText3 {
  fill: black !important; }

#mermaid-1532102905906 .titleText {
  text-anchor: middle;
  font-size: 18px;
  fill: black; }

#mermaid-1532102905906 g.classGroup text {
  fill: #9370DB;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 10px; }

#mermaid-1532102905906 g.classGroup rect {
  fill: #ECECFF;
  stroke: #9370DB; }

#mermaid-1532102905906 g.classGroup line {
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 .classLabel .box {
  stroke: none;
  stroke-width: 0;
  fill: #ECECFF;
  opacity: 0.5; }

#mermaid-1532102905906 .classLabel .label {
  fill: #9370DB;
  font-size: 10px; }

#mermaid-1532102905906 .relation {
  stroke: #9370DB;
  stroke-width: 1;
  fill: none; }

#mermaid-1532102905906 #compositionStart {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 #compositionEnd {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 #aggregationStart {
  fill: #ECECFF;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 #aggregationEnd {
  fill: #ECECFF;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 #dependencyStart {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 #dependencyEnd {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 #extensionStart {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 #extensionEnd {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1532102905906 .commit-id,
#mermaid-1532102905906 .commit-msg,
#mermaid-1532102905906 .branch-label {
  fill: lightgrey;
  color: lightgrey; }
</style><style>#mermaid-1532102905906 {
    color: rgba(0, 0, 0, 0.65);
    font: normal normal 400 normal 14px / 21px "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }</style><g transform="translate(-12, -12)"><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M109.453125,200L134.453125,200L159.453125,200" marker-end="url(#arrowhead112)" style="fill:none"></path><defs><marker id="arrowhead112" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M200.1443340282563,171.40825194977657L245.234375,46.25L270.234375,46.25" marker-end="url(#arrowhead113)" style="fill:none"></path><defs><marker id="arrowhead113" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M212.15074594998708,179.3605227881643L245.234375,148.75L270.234375,148.75" marker-end="url(#arrowhead114)" style="fill:none"></path><defs><marker id="arrowhead114" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M212.15074594998708,220.6394772118357L245.234375,251.25L270.234375,251.25" marker-end="url(#arrowhead115)" style="fill:none"></path><defs><marker id="arrowhead115" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M200.1443340282563,228.59174805022343L245.234375,353.75L270.234375,353.75" marker-end="url(#arrowhead116)" style="fill:none"></path><defs><marker id="arrowhead116" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M349.453125,46.25L374.453125,46.25L399.453125,46.25" marker-end="url(#arrowhead117)" style="fill:none"></path><defs><marker id="arrowhead117" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M349.453125,148.75L374.453125,148.75L399.453125,148.75" marker-end="url(#arrowhead118)" style="fill:none"></path><defs><marker id="arrowhead118" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M349.453125,251.25L374.453125,251.25L399.453125,251.25" marker-end="url(#arrowhead119)" style="fill:none"></path><defs><marker id="arrowhead119" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M349.453125,353.75L374.453125,353.75L399.453125,353.75" marker-end="url(#arrowhead120)" style="fill:none"></path><defs><marker id="arrowhead120" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="producer" transform="translate(64.7265625,200)" style="opacity: 1;"><rect rx="0" ry="0" x="-44.7265625" y="-26.25" width="89.453125" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-34.7265625,-16.25)"><foreignObject width="69.453125" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Producer</div></foreignObject></g></g></g><g class="node" id="topic" transform="translate(189.84375,200)" style="opacity: 1;"><circle x="-30.390625" y="-26.25" r="30.390625"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-20.390625,-16.25)"><foreignObject width="40.78125" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Topic</div></foreignObject></g></g></g><g class="node" id="queue1" transform="translate(309.84375,46.25)" style="opacity: 1;"><rect rx="5" ry="5" x="-39.609375" y="-26.25" width="79.21875" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-29.609375,-16.25)"><foreignObject width="59.21875" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Queue1</div></foreignObject></g></g></g><g class="node" id="queue2" transform="translate(309.84375,148.75)" style="opacity: 1;"><rect rx="5" ry="5" x="-39.609375" y="-26.25" width="79.21875" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-29.609375,-16.25)"><foreignObject width="59.21875" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Queue2</div></foreignObject></g></g></g><g class="node" id="queue3" transform="translate(309.84375,251.25)" style="opacity: 1;"><rect rx="5" ry="5" x="-39.609375" y="-26.25" width="79.21875" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-29.609375,-16.25)"><foreignObject width="59.21875" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Queue3</div></foreignObject></g></g></g><g class="node" id="queue4" transform="translate(309.84375,353.75)" style="opacity: 1;"><rect rx="5" ry="5" x="-39.609375" y="-26.25" width="79.21875" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-29.609375,-16.25)"><foreignObject width="59.21875" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Queue4</div></foreignObject></g></g></g><g class="node" id="consumer1" transform="translate(455.15625,46.25)" style="opacity: 1;"><rect rx="0" ry="0" x="-55.703125" y="-26.25" width="111.40625" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-45.703125,-16.25)"><foreignObject width="91.40625" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Consumer 1</div></foreignObject></g></g></g><g class="node" id="consumer2" transform="translate(455.15625,148.75)" style="opacity: 1;"><rect rx="0" ry="0" x="-55.703125" y="-26.25" width="111.40625" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-45.703125,-16.25)"><foreignObject width="91.40625" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Consumer 2</div></foreignObject></g></g></g><g class="node" id="consumer3" transform="translate(455.15625,251.25)" style="opacity: 1;"><rect rx="0" ry="0" x="-55.703125" y="-26.25" width="111.40625" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-45.703125,-16.25)"><foreignObject width="91.40625" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Consumer 3</div></foreignObject></g></g></g><g class="node" id="consumer4" transform="translate(455.15625,353.75)" style="opacity: 1;"><rect rx="0" ry="0" x="-55.703125" y="-26.25" width="111.40625" height="52.5"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-45.703125,-16.25)"><foreignObject width="91.40625" height="32.5"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Consumer 4</div></foreignObject></g></g></g></g></g></g></svg>