images/if-else.svg

<svg id="diagram" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 711.7664031982422px;" viewBox="0 0 711.7664031982422 543.6875"><style>


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

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

#diagram .node.clickable {
  cursor: pointer; }

#diagram .arrowheadPath {
  fill: #333333; }

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

#diagram .edgeLabel {
  background-color: #e8e8e8; }

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

#diagram .cluster text {
  fill: #333; }

#diagram 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; }

#diagram .actor {
  stroke: #CCCCFF;
  fill: #ECECFF; }

#diagram text.actor {
  fill: black;
  stroke: none; }

#diagram .actor-line {
  stroke: grey; }

#diagram .messageLine0 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: #333; }

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

#diagram #arrowhead {
  fill: #333; }

#diagram #crosshead path {
  fill: #333 !important;
  stroke: #333 !important; }

#diagram .messageText {
  fill: #333;
  stroke: none; }

#diagram .labelBox {
  stroke: #CCCCFF;
  fill: #ECECFF; }

#diagram .labelText {
  fill: black;
  stroke: none; }

#diagram .loopText {
  fill: black;
  stroke: none; }

#diagram .loopLine {
  stroke-width: 2;
  stroke-dasharray: '2 2';
  stroke: #CCCCFF; }

#diagram .note {
  stroke: #aaaa33;
  fill: #fff5ad; }

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

#diagram .activation0 {
  fill: #f4f4f4;
  stroke: #666; }

#diagram .activation1 {
  fill: #f4f4f4;
  stroke: #666; }

#diagram .activation2 {
  fill: #f4f4f4;
  stroke: #666; }


#diagram .section {
  stroke: none;
  opacity: 0.2; }

#diagram .section0 {
  fill: rgba(102, 102, 255, 0.49); }

#diagram .section2 {
  fill: #fff400; }

#diagram .section1,
#diagram .section3 {
  fill: white;
  opacity: 0.2; }

#diagram .sectionTitle0 {
  fill: #333; }

#diagram .sectionTitle1 {
  fill: #333; }

#diagram .sectionTitle2 {
  fill: #333; }

#diagram .sectionTitle3 {
  fill: #333; }

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


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

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


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


#diagram .task {
  stroke-width: 2; }

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

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

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


#diagram .taskText0,
#diagram .taskText1,
#diagram .taskText2,
#diagram .taskText3 {
  fill: white; }

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

#diagram .taskTextOutside0,
#diagram .taskTextOutside2 {
  fill: black; }

#diagram .taskTextOutside1,
#diagram .taskTextOutside3 {
  fill: black; }


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

#diagram .activeText0,
#diagram .activeText1,
#diagram .activeText2,
#diagram .activeText3 {
  fill: black !important; }


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

#diagram .doneText0,
#diagram .doneText1,
#diagram .doneText2,
#diagram .doneText3 {
  fill: black !important; }


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

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

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

#diagram .doneCritText0,
#diagram .doneCritText1,
#diagram .doneCritText2,
#diagram .doneCritText3 {
  fill: black !important; }

#diagram .activeCritText0,
#diagram .activeCritText1,
#diagram .activeCritText2,
#diagram .activeCritText3 {
  fill: black !important; }

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

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

#diagram g.classGroup rect {
  fill: #ECECFF;
  stroke: #9370DB; }

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

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

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

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

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

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

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

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

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

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

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

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

#diagram .commit-id,
#diagram .commit-msg,
#diagram .branch-label {
  fill: lightgrey;
  color: lightgrey; }
</style><style>#diagram {
    color: rgb(0, 0, 0);
    font: normal normal normal normal 16px/normal -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", 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="M241.37295289955347,155.20694185219023L153.53125,235.84219360351562L153.53125,335.7648468017578" marker-end="url(#arrowhead96)" style="fill:none"></path><defs><marker id="arrowhead96" 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: 1px; stroke-dasharray: 1px, 0px;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M335.6434471345085,155.20693891285487L422.4851531982422,235.84219360351562L422.98515319824213,270.34219665527326" marker-end="url(#arrowhead97)" style="fill:none"></path><defs><marker id="arrowhead97" 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: 1px; stroke-dasharray: 1px, 0px;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M376.51877105918777,394.7211209127033L280.0398406982422,474.6875L280.0398406982422,508.6875" marker-end="url(#arrowhead98)" style="fill:none"></path><defs><marker id="arrowhead98" 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: 1px; stroke-dasharray: 1px, 0px;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M469.45153865735614,394.72112369615974L564.9304656982422,474.6875L564.9304656982422,508.6875" marker-end="url(#arrowhead99)" style="fill:none"></path><defs><marker id="arrowhead99" 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: 1px; stroke-dasharray: 1px, 0px;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="translate(153.53125,235.84219360351562)" style="opacity: 1;"><g transform="translate(-14.5703125,-9)" class="label"><foreignObject width="29.140625" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">true</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(422.4851531982422,235.84219360351562)" style="opacity: 1;"><g transform="translate(-17.1875,-9)" class="label"><foreignObject width="34.375" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">false</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(280.0398406982422,474.6875)" style="opacity: 1;"><g transform="translate(-14.5703125,-9)" class="label"><foreignObject width="29.140625" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">true</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(564.9304656982422,474.6875)" style="opacity: 1;"><g transform="translate(-17.1875,-9)" class="label"><foreignObject width="34.375" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">false</span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="froml1c0tol7c1" transform="translate(288.0082015991211,110.92109680175781)" style="opacity: 1;"><polygon points="90.92109375,0 181.8421875,-90.92109375 90.92109375,-181.8421875 0,-90.92109375" rx="5" ry="5" transform="translate(-90.92109375,90.92109375)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-71.5234375,-9.5)"><foreignObject width="143.046875" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">if day === 'Saturday'</div></foreignObject></g></g></g><g class="node" id="froml2c2tol2c38" transform="translate(153.53125,355.2648468017578)" style="opacity: 1;"><rect rx="5" ry="5" x="-133.53125" y="-19.5" width="267.0625" height="39"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-123.53125,-9.5)"><foreignObject width="247.0625" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">console.log('Do all the shopping.');</div></foreignObject></g></g></g><g class="node" id="froml3c7tol7c1" transform="translate(422.4851531982422,355.2648468017578)" style="opacity: 1;"><polygon points="85.42265625,0 170.8453125,-85.42265625 85.42265625,-170.8453125 0,-85.42265625" rx="5" ry="5" transform="translate(-85.42265625,85.42265625)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-65.4140625,-9.5)"><foreignObject width="130.828125" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">if day === 'Sunday'</div></foreignObject></g></g></g><g class="node" id="froml4c2tol4c24" transform="translate(280.0398406982422,528.1875)" style="opacity: 1;"><rect rx="5" ry="5" x="-84.0546875" y="-19.5" width="168.109375" height="39"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-74.0546875,-9.5)"><foreignObject width="148.109375" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">console.log('Relax!');</div></foreignObject></g></g></g><g class="node" id="froml6c2tol6c41" transform="translate(564.9304656982422,528.1875)" style="opacity: 1;"><rect rx="5" ry="5" x="-150.8359375" y="-19.5" width="301.671875" height="39"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-140.8359375,-9.5)"><foreignObject width="281.671875" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">console.log('Wake up and go to work!');</div></foreignObject></g></g></g></g></g></g></svg>