renderpipe.drawio

<mxfile host="app.diagrams.net" modified="2024-04-15T12:31:56.959Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36" etag="fGAsoqn6_s1WncMZ8CXq" version="24.2.5" type="github" pages="7">
  <diagram name="render-pipe" id="4F4AMquv1WYPbJxReD9_">
    <mxGraphModel dx="3532" dy="1719" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-121" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;fontSize=11;fontColor=#ffffff;fillStyle=cross-hatch;gradientColor=none;strokeWidth=2;arcSize=9;" parent="1" vertex="1">
          <mxGeometry x="-2180" y="-170" width="1470" height="1220" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-107" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#2D7600;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=188;fillColor=#60a917;fixDash=1;strokeWidth=2;lucidId=UHbrM3U28dgx;perimeterSpacing=43;fillStyle=hatch;fontColor=#ffffff;" parent="1" vertex="1">
          <mxGeometry x="-350" y="-100" width="3280" height="1160" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-1" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=3Ibr6UvGKJbg;" parent="1" vertex="1">
          <mxGeometry x="1354" y="46" width="769" height="948" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-2" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=1bcrWGcAxXB8;" parent="1" vertex="1">
          <mxGeometry x="2179" y="49" width="645" height="405" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-3" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=8GbrfnMcC.ng;" parent="1" vertex="1">
          <mxGeometry x="-230" y="50" width="645" height="390" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-4" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=UHbrM3U28dgx;" parent="1" vertex="1">
          <mxGeometry x="502" y="50" width="769" height="423" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-5" value="render Intermediate Element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#C3F7C8;strokeWidth=0.8;lucidId=EopqLHmOxR--;" parent="1" vertex="1">
          <mxGeometry x="1240" y="-780" width="236" height="75" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-6" value="add runtime props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=hppq__HzJ.X5;fontColor=#ffffff;" parent="1" vertex="1">
          <mxGeometry x="1238" y="-655" width="240" height="55" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-7" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.007;exitPerimeter=0;entryX=0.5;entryY=-0.007;entryPerimeter=0;lucidId=NppqJhey2unT;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-5" target="V1DNeOTMpeeXgf7MyeDX-6" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-8" value="runtime props object" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffd9d9;strokeWidth=0.8;lucidId=bqpq5EeDiXiV;" parent="1" vertex="1">
          <mxGeometry x="1298" y="-550" width="120" height="120" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-9" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.007;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=Tqpq1mC7y0UT;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-6" target="V1DNeOTMpeeXgf7MyeDX-8" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-10" value="&lt;font color=&quot;#3a414a&quot;&gt;getEvaluatedProps&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFD9D9;strokeWidth=0.8;lucidId=2qpqwDW42hdw;fontColor=#000000;" parent="1" vertex="1">
          <mxGeometry x="1241" y="-386" width="235" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-11" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=qrpqk7l3qV7X;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-8" target="V1DNeOTMpeeXgf7MyeDX-10" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-12" value="evaluated props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#FFFFFF;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FE7070;strokeWidth=0.8;lucidId=0rpq9oFQgDK8;" parent="1" vertex="1">
          <mxGeometry x="1298" y="-280" width="120" height="120" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-13" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=dspqKEY-QcuE;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-10" target="V1DNeOTMpeeXgf7MyeDX-12" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-14" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;skip render?&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=16.7;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=1spqlIge~FoM;" parent="1" vertex="1">
          <mxGeometry x="-40" y="80" width="190" height="120" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-15" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=0.012;entryPerimeter=0;lucidId=ztpqRFZSiDRF;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-12" target="V1DNeOTMpeeXgf7MyeDX-14" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-16" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;is component instance?&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=23;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=KupqIX-qmGwU;" parent="1" vertex="1">
          <mxGeometry x="690" y="80" width="238" height="120" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-17" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#e81313;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.988;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=0.012;entryPerimeter=0;lucidId=6upqgUuchVXD;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-14" target="V1DNeOTMpeeXgf7MyeDX-16" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="468" y="140" />
              <mxPoint x="468" y="28" />
              <mxPoint x="809" y="28" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-18" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;NO&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="V1DNeOTMpeeXgf7MyeDX-17" vertex="1">
          <mxGeometry x="-0.7282510802861611" relative="1" as="geometry">
            <mxPoint y="11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-19" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;find component&#39;s root element&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=ivpqk0Sl2hKh;" parent="1" vertex="1">
          <mxGeometry x="536" y="215" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-20" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#6a9955;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.012;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=WvpqTimbQTIR;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-16" target="V1DNeOTMpeeXgf7MyeDX-19" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="639" y="140" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-21" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;YES&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="V1DNeOTMpeeXgf7MyeDX-20" vertex="1">
          <mxGeometry x="-0.1805499639577397" relative="1" as="geometry">
            <mxPoint x="20" y="23" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-22" value="root element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffe342;strokeWidth=0.8;lucidId=rwpqUt~hff.z;" parent="1" vertex="1">
          <mxGeometry x="579" y="305" width="120" height="120" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-23" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=ywpqEt0ONrCu;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-19" target="V1DNeOTMpeeXgf7MyeDX-22" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-24" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1;entryX=0;entryY=0.5;lucidId=Owpqoi~S1.h_;entryDx=0;entryDy=0;exitDx=0;exitDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-22" target="V1DNeOTMpeeXgf7MyeDX-5" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="639" y="518" />
              <mxPoint x="-290" y="518" />
              <mxPoint x="-290" y="-742" />
            </Array>
            <mxPoint x="621" y="412.8600000000001" as="sourcePoint" />
            <mxPoint x="1221.5280000000002" y="-640" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-27" value="Conditional Pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=hNbr~Y2p_QlI;" parent="1" vertex="1">
          <mxGeometry x="120" y="64" width="275" height="50" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-28" value="&lt;div style=&quot;display: flex; justify-content: center; text-align: center; align-items: baseline; font-size: 35px; line-height: 1.25; margin-top: -2px;&quot;&gt;&lt;span style=&quot;font-size: 35px;&quot;&gt;&lt;span style=&quot;font-size: 35px; color: rgb(58, 65, 74);&quot;&gt;Component Pipe&lt;/span&gt;&lt;span style=&quot;font-size: 35px; color: rgb(0, 0, 0);&quot;&gt; &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=.NbrY0oTtRdZ;" parent="1" vertex="1">
          <mxGeometry x="975" y="63" width="280" height="48" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-29" value="Create render output" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=Nccr_AYJ4jwR;" parent="1" vertex="1">
          <mxGeometry x="2284" y="121" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-30" value="render output&#xa;{element, props}" style="points=[[0.723,0.599,0]];html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontFamily=Droid Sans Mono;fontColor=default;spacing=3.8;verticalAlign=middle;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFDDA6;strokeWidth=0.8;lucidId=Nccrim58QWrU;" parent="1" vertex="1">
          <mxGeometry x="2239" y="280" width="296" height="76" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-31" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=kdcrMUB_b6L7;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-29" target="V1DNeOTMpeeXgf7MyeDX-30" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-32" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;dashed=1;fixDash=1;dashPattern=3 8;strokeWidth=6;rounded=1;arcSize=12;curved=1;startArrow=none;endArrow=block;endFill=1;exitX=1.003;exitY=0.5;exitPerimeter=0;entryX=0.723;entryY=0.599;entryPerimeter=0;lucidId=Okcr_v05n7ps;spacing=7;endSize=6;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-12" target="V1DNeOTMpeeXgf7MyeDX-30" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2010" y="-234.37" />
              <mxPoint x="2680" y="-134.37" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-33" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;is atom instance&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=16.7;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=HGbr0KnT.7OF;" parent="1" vertex="1">
          <mxGeometry x="1602" y="91.5" width="166" height="119" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-34" value="Atom Pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=wNbrKlhsUgA-;" parent="1" vertex="1">
          <mxGeometry x="1902" y="60" width="208" height="48" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-35" value="add common props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=UVbry6YRFx6D;" parent="1" vertex="1">
          <mxGeometry x="1387" y="184" width="225" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-36" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#6a9955;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.012;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=-WbrJpZyaynt;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-33" target="V1DNeOTMpeeXgf7MyeDX-35" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1500" y="151" />
              <mxPoint x="1500" y="166" />
              <mxPoint x="1500" y="166" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-37" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;YES&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="V1DNeOTMpeeXgf7MyeDX-36" vertex="1">
          <mxGeometry x="-0.29790958545917323" relative="1" as="geometry">
            <mxPoint x="-1" y="9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-38" value="evaluated props&#xa;+ common props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#FFFFFF;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FE7070;strokeWidth=0.8;lucidId=CXbr-5XQEbX_;" parent="1" vertex="1">
          <mxGeometry x="1377" y="274" width="245" height="75" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-39" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.514;entryY=-0.004;entryPerimeter=0;lucidId=LXbrc.x8iK1r;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-35" target="V1DNeOTMpeeXgf7MyeDX-38" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-40" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;has props customizer?&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=23;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=m0brCRG_dd4x;" parent="1" vertex="1">
          <mxGeometry x="1572" y="394" width="237" height="120" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-41" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#e81313;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.988;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=F0brp~GQ7hAC;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-33" target="V1DNeOTMpeeXgf7MyeDX-29" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2155" y="151" />
              <mxPoint x="2155" y="28" />
              <mxPoint x="2387" y="28" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-42" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;NO&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="V1DNeOTMpeeXgf7MyeDX-41" vertex="1">
          <mxGeometry x="-0.887954320207523" relative="1" as="geometry">
            <mxPoint y="9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-43" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.005;exitPerimeter=0;entryX=0.5;entryY=0.012;entryPerimeter=0;lucidId=e1br7tc.eLzA;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-38" target="V1DNeOTMpeeXgf7MyeDX-40" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-44" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#2D7600;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.012;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=F1br.BML4Xsb;fillColor=#60a917;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-40" target="V1DNeOTMpeeXgf7MyeDX-46" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1490" y="454" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-45" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;YES&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="V1DNeOTMpeeXgf7MyeDX-44" vertex="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="14" y="13" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-46" value="customize props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=L1brB3M9DaWy;" parent="1" vertex="1">
          <mxGeometry x="1387" y="490" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-47" value="add css" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=51brmm2iGOPA;" parent="1" vertex="1">
          <mxGeometry x="1549" y="589" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-49" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#B20000;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.988;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=f2br_VuPDJp7;fillColor=#e51400;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-40" target="V1DNeOTMpeeXgf7MyeDX-47" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1900" y="454" />
              <mxPoint x="1900" y="570" />
              <mxPoint x="1652" y="570" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-50" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;NO&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="V1DNeOTMpeeXgf7MyeDX-49" vertex="1">
          <mxGeometry x="-0.750272681639075" relative="1" as="geometry">
            <mxPoint x="-6" y="13" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-48" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=b2brOpQtnMK_;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-46" target="V1DNeOTMpeeXgf7MyeDX-47" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-51" value="evaluated props&#xa;+ common props&#xa;+ css" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#FFFFFF;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FE7070;strokeWidth=0.8;lucidId=72brrtTgc-Gu;" parent="1" vertex="1">
          <mxGeometry x="1534.5" y="675" width="235" height="105" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-52" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.004;entryPerimeter=0;lucidId=.2brkkc0G1Sr;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-47" target="V1DNeOTMpeeXgf7MyeDX-51" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-53" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.004;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=V6brSjGimFf7;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-51" target="V1DNeOTMpeeXgf7MyeDX-54" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-54" value="Create render output" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=36brZu3EAuT1;" parent="1" vertex="1">
          <mxGeometry x="1549" y="813.9999999999999" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-55" value="render output&#xa;{atomType, element, props}" style="points=[[0.834,0.462,0]];html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontFamily=Droid Sans Mono;fontColor=default;spacing=3.8;verticalAlign=middle;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFDDA6;strokeWidth=0.8;lucidId=17brnYHj08_5;" parent="1" vertex="1">
          <mxGeometry x="1472" y="899.9999999999999" width="360" height="76" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-56" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=09briWDBcKg0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-54" target="V1DNeOTMpeeXgf7MyeDX-55" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-57" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;dashed=1;fixDash=1;dashPattern=3 8;strokeWidth=6;rounded=1;arcSize=12;curved=1;startArrow=none;endArrow=block;endFill=1;exitX=1.002;exitY=0.5;exitPerimeter=0;entryX=0.834;entryY=0.462;entryPerimeter=0;lucidId=iecrC1nLRCuD;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-51" target="V1DNeOTMpeeXgf7MyeDX-55" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1830" y="755.63" />
              <mxPoint x="1850" y="855.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-58" value="Null Pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=mvcryc21Xsoq;" parent="1" vertex="1">
          <mxGeometry x="2620" y="60" width="191" height="54" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-60" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;lucidId=Mwcr0lEuirnE;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-55" target="V1DNeOTMpeeXgf7MyeDX-119" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1652" y="1140" />
              <mxPoint x="1358" y="1140" />
            </Array>
            <mxPoint x="1360" y="1210" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-61" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;lucidId=VwcrY3fCDHGw;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-30" target="V1DNeOTMpeeXgf7MyeDX-119" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2387" y="1140" />
              <mxPoint x="1358" y="1140" />
            </Array>
            <mxPoint x="1358" y="1210" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-62" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Create render output&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=16.7;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=HQcrTI7ChMF3;" parent="1" vertex="1">
          <mxGeometry x="-190.5" y="231.5" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-63" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;render output&lt;br&gt;{element}&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=14;fontFamily=Droid Sans Mono;fontColor=default;spacing=3.8;verticalAlign=middle;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFDDA6;strokeWidth=0.8;lucidId=HQcr1kZ5y1.U;" parent="1" vertex="1">
          <mxGeometry x="-210" y="334" width="245" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-64" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=HQcrm9xOkuKo;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-62" target="V1DNeOTMpeeXgf7MyeDX-63" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-65" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#6a9955;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.012;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=QRcryEmn-D7j;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-14" target="V1DNeOTMpeeXgf7MyeDX-62" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-88" y="140" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-66" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;YES&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="V1DNeOTMpeeXgf7MyeDX-65" vertex="1">
          <mxGeometry x="-0.20080516764391376" relative="1" as="geometry">
            <mxPoint x="22" y="11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-67" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1;lucidId=nScrUZ-nr8a2;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitDx=0;exitDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-63" target="V1DNeOTMpeeXgf7MyeDX-119" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-87" y="1139.63" />
              <mxPoint x="1358" y="1139.63" />
            </Array>
            <mxPoint x="-68.5" y="394.3599999999999" as="sourcePoint" />
            <mxPoint x="1377" y="1210" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-69" value="renderRoot" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=CH2pACBFctD6;" parent="1" vertex="1">
          <mxGeometry x="-1659.5" y="-792.63" width="173" height="45" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-70" value="renderElement" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=WH2pmMZfPAdO;" parent="1" vertex="1">
          <mxGeometry x="-1678" y="-582.63" width="210" height="45" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-71" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.008;exitPerimeter=0;entryX=0.5;entryY=0;lucidId=GJ2pB5-q8uvt;entryDx=0;entryDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-69" target="V1DNeOTMpeeXgf7MyeDX-137" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-140" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;endArrow=none;endFill=0;strokeWidth=2;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-73" target="V1DNeOTMpeeXgf7MyeDX-139" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-73" value="new&lt;br&gt;ElementWrapper" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#006EAF;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#1ba1e2;strokeWidth=0.8;lucidId=nK2pQC2JeSA7;" parent="1" vertex="1">
          <mxGeometry x="-1693" y="-417" width="240" height="76" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-74" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.008;exitPerimeter=0;entryX=0.5;entryY=0;lucidId=MK2p6vUzAX44;entryDx=0;entryDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-70" target="V1DNeOTMpeeXgf7MyeDX-161" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-75" value="render Intermediate Element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=2K2pSlJ9uCWF;" parent="1" vertex="1">
          <mxGeometry x="-1693" y="-124.37" width="240" height="70" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-76" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;entryX=0.5;entryY=0;lucidId=iL2pz9DkctFf;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryDx=0;entryDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-139" target="V1DNeOTMpeeXgf7MyeDX-75" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
            <mxPoint x="-1573" y="-89.37" as="sourcePoint" />
            <mxPoint x="-1573.75" y="-125" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-77" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=012px_IEI6bz;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-75" target="V1DNeOTMpeeXgf7MyeDX-78" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-78" value="render pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#e3fae3;dashed=1;fixDash=1;dashPattern=16 6;strokeWidth=0.8;lucidId=312pBf9_Gqsw;" parent="1" vertex="1">
          <mxGeometry x="-1693" y="-25.370000000000005" width="240" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-79" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=o22ptAcO_d.h;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-78" target="V1DNeOTMpeeXgf7MyeDX-80" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-80" value="intermediate output" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffdda6;strokeWidth=0.8;lucidId=E22pizVrBhQi;" parent="1" vertex="1">
          <mxGeometry x="-1650" y="68.63" width="155" height="155" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-81" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;entryX=0.5;entryY=0.012;entryPerimeter=0;lucidId=h42p6BSjtZa.;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-80" target="V1DNeOTMpeeXgf7MyeDX-86" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
            <mxPoint x="-1620" y="269.63" as="sourcePoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-82" value="renderChildren" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=p42p1_CLHi--;" parent="1" vertex="1">
          <mxGeometry x="-1960" y="309.63" width="190" height="60" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-83" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=-0.006;exitPerimeter=0;entryX=0.5;entryY=1;lucidId=V42ppxnbCQSa;entryDx=0;entryDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-82" target="ivRBJFiHlaQGU-vnk_GG-3" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1865" y="-306" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-84" value="for&lt;br&gt;each&lt;br&gt;child" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=23;" parent="V1DNeOTMpeeXgf7MyeDX-83" vertex="1">
          <mxGeometry x="-0.7558899706965376" relative="1" as="geometry">
            <mxPoint y="-68" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-85" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=-0.003;entryY=0.5;entryPerimeter=0;lucidId=f52pfztVE_JT;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-82" target="V1DNeOTMpeeXgf7MyeDX-93" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1865" y="477.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-183" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Returns&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="V1DNeOTMpeeXgf7MyeDX-85" vertex="1" connectable="0">
          <mxGeometry x="-0.454" y="-2" relative="1" as="geometry">
            <mxPoint x="2" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-86" value="has&#xa;children?" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=23;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=H52pnoIq.JFW;" parent="1" vertex="1">
          <mxGeometry x="-1648" y="289.63" width="153" height="100.73" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-87" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;fontColor=#333333;fontStyle=1;strokeColor=#2D7600;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.016;exitY=0.5;exitPerimeter=0;entryX=1.002;entryY=0.5;entryPerimeter=0;lucidId=R52pBpqkpSae;fillColor=#60a917;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-86" target="V1DNeOTMpeeXgf7MyeDX-82" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-88" value="Yes" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=23;" parent="V1DNeOTMpeeXgf7MyeDX-87" vertex="1">
          <mxGeometry x="-0.22679754080191572" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-145" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;endArrow=none;endFill=0;strokeWidth=2;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-89" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1449" y="738.9999999999999" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-89" value="renderComponentWithStyles" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=q82pvkAQDu0c;" parent="1" vertex="1">
          <mxGeometry x="-1630.5" y="655.63" width="363" height="45" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-90" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;lucidId=Q82p.7k14b_~;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-80" target="V1DNeOTMpeeXgf7MyeDX-91" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1573" y="245.63" />
              <mxPoint x="-1085" y="245.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-91" value="Find React Element of intermediate output" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=X82pE_4GNOKa;" parent="1" vertex="1">
          <mxGeometry x="-1230" y="312.63" width="290" height="84" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-92" value="&lt;font color=&quot;#ffffff&quot;&gt;current element&#39;s React Component&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#006EAF;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#1ba1e2;strokeWidth=0.8;lucidId=X92pj0l-2KM1;" parent="1" vertex="1">
          <mxGeometry x="-1171.25" y="429" width="172.5" height="160" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-93" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=992pJAcsZaLZ;" parent="1" vertex="1">
          <mxGeometry x="-1753" y="409.9" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-94" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=-0.008;entryPerimeter=0;lucidId=n-2pA5_OfBxn;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-92" target="V1DNeOTMpeeXgf7MyeDX-89" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1085" y="615.63" />
              <mxPoint x="-1448" y="615.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-95" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=-0.008;entryPerimeter=0;lucidId=q-2p4PT11yJh;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-93" target="V1DNeOTMpeeXgf7MyeDX-89" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1686" y="615.63" />
              <mxPoint x="-1448" y="615.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-96" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.004;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=t-2pTGDJVv6k;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-91" target="V1DNeOTMpeeXgf7MyeDX-92" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-97" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Ag3pKJvzKlf2;" parent="1" vertex="1">
          <mxGeometry x="-1738" y="409.9" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-98" value="Children&lt;br&gt;React&lt;br&gt;Nodes" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;" parent="1" vertex="1">
          <mxGeometry x="-1723" y="409.9" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-99" value="extract Valid Props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=ej3p5m..Eqit;fontColor=#ffffff;" parent="1" vertex="1">
          <mxGeometry x="-1461.99" y="311" width="214" height="45" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-100" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=-0.008;entryPerimeter=0;lucidId=2j3pe4SfPY9E;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-80" target="V1DNeOTMpeeXgf7MyeDX-99" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1573" y="245.63" />
              <mxPoint x="-1355" y="245.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-101" value="valid props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#ffffff;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fe7070;strokeWidth=0.8;lucidId=Kk3pb~UwIWkm;" parent="1" vertex="1">
          <mxGeometry x="-1433.04" y="397.36" width="156.09" height="159.99" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-102" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.008;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=Fl3po1fG17AZ;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-99" target="V1DNeOTMpeeXgf7MyeDX-101" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-103" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=0;lucidId=Il3pJ30-1zX-;entryDx=0;entryDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-101" target="V1DNeOTMpeeXgf7MyeDX-89" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1355" y="595.63" />
              <mxPoint x="-1448" y="595.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-105" value="" style="curved=1;endArrow=none;html=1;rounded=0;endFill=0;fillColor=#60a917;strokeColor=#82B366;strokeWidth=6;dashed=1;exitX=0.51;exitY=0.04;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-121" edge="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="-1454" y="-24.370000000000005" as="sourcePoint" />
            <mxPoint x="-380" y="-674.37" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1260" y="45.629999999999995" />
              <mxPoint x="-470" y="-74.37" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-106" value="" style="curved=1;endArrow=none;html=1;rounded=0;endFill=0;fillColor=#60a917;strokeColor=#82B366;strokeWidth=6;dashed=1;exitX=0.49;exitY=0.278;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-121" edge="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="-1480" y="285" as="sourcePoint" />
            <mxPoint x="-380" y="1265.63" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1150" y="34.629999999999995" />
              <mxPoint x="-560" y="655.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-108" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#e81313;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=1;exitY=0.5;entryX=0.5;entryY=0;lucidId=uIbrn_9a1o4h;entryDx=0;entryDy=0;exitDx=0;exitDy=0;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-16" target="V1DNeOTMpeeXgf7MyeDX-33" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1311" y="140" />
              <mxPoint x="1311" y="-2" />
              <mxPoint x="1685" y="-2" />
            </Array>
            <mxPoint x="861.9999999999995" y="120.98000000000002" as="sourcePoint" />
            <mxPoint x="1686.44" y="69.48000000000002" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-109" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;NO&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="V1DNeOTMpeeXgf7MyeDX-108" vertex="1">
          <mxGeometry x="-0.8254076077110912" relative="1" as="geometry">
            <mxPoint x="-45" y="23" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-117" value="&lt;h2&gt;&lt;font color=&quot;#82b366&quot;&gt;Render Pipe&lt;/font&gt;&lt;/h2&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=mvcryc21Xsoq;" parent="1" vertex="1">
          <mxGeometry x="2535" y="922.4999999999999" width="381" height="165" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-119" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;intermediate output&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=16.7;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffdda6;strokeWidth=0.8;lucidId=E22pizVrBhQi;" parent="1" vertex="1">
          <mxGeometry x="1257" y="1210" width="202" height="202" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-123" value="&lt;h2 style=&quot;line-height: 10%;&quot;&gt;&lt;font color=&quot;#006eaf&quot;&gt;ElementWrapper&lt;/font&gt;&lt;/h2&gt;&lt;div style=&quot;line-height: 10%;&quot;&gt;&lt;font color=&quot;#006eaf&quot;&gt;(MOBX Observer)&lt;/font&gt;&lt;/div&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=mvcryc21Xsoq;" parent="1" vertex="1">
          <mxGeometry x="-1200" y="899.9999999999999" width="420" height="110" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-138" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;endArrow=block;endFill=1;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-137" target="V1DNeOTMpeeXgf7MyeDX-70" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-137" value="root element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffe342;strokeWidth=0.8;lucidId=rwpqUt~hff.z;" parent="1" vertex="1">
          <mxGeometry x="-1623" y="-718.26" width="100" height="100" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-139" value="element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffe342;strokeWidth=0.8;lucidId=rwpqUt~hff.z;" parent="1" vertex="1">
          <mxGeometry x="-1623.81" y="-305" width="101.63" height="101.63" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-144" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;endArrow=block;endFill=1;strokeWidth=2;" parent="1" target="V1DNeOTMpeeXgf7MyeDX-143" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1449" y="873.9999999999999" as="sourcePoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-150" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;endArrow=block;endFill=1;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-143" target="V1DNeOTMpeeXgf7MyeDX-151" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1449" y="1185.63" as="targetPoint" />
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-143" value="wrap element with ErrorBoundary and return" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=q82pvkAQDu0c;" parent="1" vertex="1">
          <mxGeometry x="-1630.5" y="937.4999999999999" width="363" height="80" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-151" value="wrapped element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;" parent="1" vertex="1">
          <mxGeometry x="-1516.5" y="1100" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-153" value="rendered element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;" parent="1" vertex="1">
          <mxGeometry x="-1516.5" y="739" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-124" value="" style="rounded=0;whiteSpace=wrap;html=1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-2170" y="1495.63" width="1820" height="380" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-125" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Legend&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;container=0;" parent="1" vertex="1">
          <mxGeometry x="-2168" y="1505.63" width="90" height="30" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-127" value="renderer.model related action" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=30;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=p42p1_CLHi--;container=0;" parent="1" vertex="1">
          <mxGeometry x="-2123" y="1585.63" width="323" height="90" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-129" value="&lt;font color=&quot;#030303&quot; style=&quot;font-size: 23px;&quot;&gt;inside the ElementWrapper (which is a react component)&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;fontSize=11;fontColor=#ffffff;fillStyle=cross-hatch;gradientColor=none;strokeWidth=0.5;arcSize=9;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1360" y="1585.63" width="330" height="90" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-131" value="&lt;font color=&quot;#000000&quot; style=&quot;font-size: 23px;&quot;&gt;the render pipe&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#2D7600;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=31;fillColor=#60a917;fixDash=1;strokeWidth=0.5;lucidId=UHbrM3U28dgx;perimeterSpacing=43;fillStyle=hatch;fontColor=#ffffff;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1360" y="1734.38" width="330" height="90" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-134" value="React&lt;br&gt;Node" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1750.5" y="1695.63" width="167.5" height="167.5" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-154" value="util function calls or some logic" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=30;fillColor=#647687;strokeWidth=0.8;lucidId=p42p1_CLHi--;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1757" y="1585.63" width="350" height="90" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-157" value="the value of props at a certian point" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#A50040;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FE7070;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-2140" y="1695.63" width="167.5" height="167.5" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-158" value="React&lt;br style=&quot;border-color: var(--border-color);&quot;&gt;Component" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#006EAF;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#1ba1e2;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1947" y="1695.63" width="167.5" height="167.5" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-160" value="IElement" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#000000;spacing=0;strokeColor=#3A414A;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFE342;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1555" y="1695.63" width="167.5" height="167.5" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-163" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;endArrow=block;endFill=1;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-161" target="V1DNeOTMpeeXgf7MyeDX-73" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-161" value="run pre-render actions" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=WH2pmMZfPAdO;" parent="1" vertex="1">
          <mxGeometry x="-1712.5" y="-502.63" width="277.5" height="45" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-167" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-1453" y="-505" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-169" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-1465.5" y="-424" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-170" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-1484.99" y="-590" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-173" value="" style="group" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-970" y="1770" width="589.5" height="30" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-171" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="V1DNeOTMpeeXgf7MyeDX-173" vertex="1">
          <mxGeometry y="5" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-172" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;will run once per element regardless of re-renders&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="V1DNeOTMpeeXgf7MyeDX-173" vertex="1">
          <mxGeometry x="39.5" width="550" height="30" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-180" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.13;exitY=0.77;exitDx=0;exitDy=0;exitPerimeter=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;curved=1;fillColor=#76608a;strokeColor=#432D57;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-175" target="V1DNeOTMpeeXgf7MyeDX-139" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-182" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.13;exitY=0.77;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.512;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;curved=1;fillColor=#76608a;strokeColor=#432D57;" parent="1" source="V1DNeOTMpeeXgf7MyeDX-175" target="V1DNeOTMpeeXgf7MyeDX-121" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1250" y="-344" />
              <mxPoint x="-1250" y="-260" />
              <mxPoint x="-1427" y="-260" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="V1DNeOTMpeeXgf7MyeDX-175" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Because&amp;nbsp;the element is a mobx&lt;br&gt;model (observable) and the ElementWrapper&lt;br&gt;is a mobx observer, it will be&lt;br&gt;re-rendered whenever the properties&lt;br&gt;of the element are changed&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;align=center;fillColor=#76608a;strokeColor=#432D57;fontColor=#ffffff;" parent="1" vertex="1">
          <mxGeometry x="-1330" y="-575" width="580" height="300" as="geometry" />
        </mxCell>
        <mxCell id="LCKHxWAaFIVwyUiYJguR-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.768;entryY=1.001;entryDx=0;entryDy=0;entryPerimeter=0;startArrow=block;startFill=1;endArrow=none;endFill=0;strokeWidth=2;dashed=1;" parent="1" source="LCKHxWAaFIVwyUiYJguR-1" target="V1DNeOTMpeeXgf7MyeDX-121" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="LCKHxWAaFIVwyUiYJguR-1" value="run post-render actions" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=9;strokeColor=#6c8ebf;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#dae8fc;strokeWidth=0.8;lucidId=WH2pmMZfPAdO;dashed=1;" parent="1" vertex="1">
          <mxGeometry x="-1190" y="1145" width="277.5" height="45" as="geometry" />
        </mxCell>
        <mxCell id="LCKHxWAaFIVwyUiYJguR-2" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-930" y="1140" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="LCKHxWAaFIVwyUiYJguR-5" value="runs in a react useEffect hook" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=9;strokeColor=#6c8ebf;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#dae8fc;strokeWidth=0.8;lucidId=WH2pmMZfPAdO;dashed=1;" parent="1" vertex="1">
          <mxGeometry x="-970" y="1591.25" width="340" height="84.38" as="geometry" />
        </mxCell>
        <mxCell id="ivRBJFiHlaQGU-vnk_GG-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=2;" parent="1" source="ivRBJFiHlaQGU-vnk_GG-3" target="V1DNeOTMpeeXgf7MyeDX-69" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1865" y="-770" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="ivRBJFiHlaQGU-vnk_GG-5" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;&lt;b&gt;YES&lt;/b&gt;&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="ivRBJFiHlaQGU-vnk_GG-4" vertex="1" connectable="0">
          <mxGeometry x="-0.3842" y="2" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="ivRBJFiHlaQGU-vnk_GG-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;" parent="1" source="ivRBJFiHlaQGU-vnk_GG-3" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1970" y="-320" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="ivRBJFiHlaQGU-vnk_GG-7" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;&lt;b&gt;NO&lt;/b&gt;&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="ivRBJFiHlaQGU-vnk_GG-6" vertex="1" connectable="0">
          <mxGeometry x="0.121" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="ivRBJFiHlaQGU-vnk_GG-3" value="render?" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=23;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=H52pnoIq.JFW;" parent="1" vertex="1">
          <mxGeometry x="-1941.5" y="-440" width="153" height="100.73" as="geometry" />
        </mxCell>
        <mxCell id="ivRBJFiHlaQGU-vnk_GG-9" value="&lt;b&gt;&lt;font style=&quot;font-size: 23px;&quot;&gt;SKIP&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="-2001" y="-310" width="60" height="30" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
  <diagram id="QDLD-WLiSD64YVt13y1x" name="render-pipe-proposed">
    <mxGraphModel dx="3532" dy="1719" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-1" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;fontSize=11;fontColor=#ffffff;fillStyle=cross-hatch;gradientColor=none;strokeWidth=2;arcSize=9;" parent="1" vertex="1">
          <mxGeometry x="-2180" y="220" width="1470" height="830" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-2" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#2D7600;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=188;fillColor=#60a917;fixDash=1;strokeWidth=2;lucidId=UHbrM3U28dgx;perimeterSpacing=43;fillStyle=hatch;fontColor=#ffffff;movable=0;resizable=0;rotatable=0;deletable=0;editable=0;locked=1;connectable=0;" parent="1" vertex="1">
          <mxGeometry x="-350" y="-100" width="4100" height="1160" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-3" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=3Ibr6UvGKJbg;" parent="1" vertex="1">
          <mxGeometry x="2182" y="46" width="769" height="948" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-4" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=1bcrWGcAxXB8;" parent="1" vertex="1">
          <mxGeometry x="3007" y="49" width="645" height="405" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-5" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=8GbrfnMcC.ng;" parent="1" vertex="1">
          <mxGeometry x="-230" y="50" width="645" height="390" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-6" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=UHbrM3U28dgx;" parent="1" vertex="1">
          <mxGeometry x="1330" y="50" width="769" height="423" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-7" value="render Intermediate Element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#C3F7C8;strokeWidth=0.8;lucidId=EopqLHmOxR--;" parent="1" vertex="1">
          <mxGeometry x="1240" y="-780" width="236" height="75" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-8" value="add runtime props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=hppq__HzJ.X5;fontColor=#ffffff;" parent="1" vertex="1">
          <mxGeometry x="1238" y="-655" width="240" height="55" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-9" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.007;exitPerimeter=0;entryX=0.5;entryY=-0.007;entryPerimeter=0;lucidId=NppqJhey2unT;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-7" target="Kg0yKlX9B3dp8cPTO4nQ-8" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-10" value="runtime props object" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffd9d9;strokeWidth=0.8;lucidId=bqpq5EeDiXiV;" parent="1" vertex="1">
          <mxGeometry x="1298" y="-550" width="120" height="120" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-11" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.007;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=Tqpq1mC7y0UT;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-8" target="Kg0yKlX9B3dp8cPTO4nQ-10" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-12" value="&lt;font color=&quot;#3a414a&quot;&gt;getEvaluatedProps&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFD9D9;strokeWidth=0.8;lucidId=2qpqwDW42hdw;fontColor=#000000;" parent="1" vertex="1">
          <mxGeometry x="1241" y="-386" width="235" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-13" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=qrpqk7l3qV7X;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-10" target="Kg0yKlX9B3dp8cPTO4nQ-12" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-14" value="evaluated props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#FFFFFF;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FE7070;strokeWidth=0.8;lucidId=0rpq9oFQgDK8;" parent="1" vertex="1">
          <mxGeometry x="1298" y="-280" width="120" height="120" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-15" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=dspqKEY-QcuE;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-12" target="Kg0yKlX9B3dp8cPTO4nQ-14" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-16" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;skip render?&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=16.7;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=1spqlIge~FoM;" parent="1" vertex="1">
          <mxGeometry x="-40" y="80" width="190" height="120" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-17" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=0.012;entryPerimeter=0;lucidId=ztpqRFZSiDRF;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-14" target="Kg0yKlX9B3dp8cPTO4nQ-16" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-18" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;is component instance?&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=23;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=KupqIX-qmGwU;" parent="1" vertex="1">
          <mxGeometry x="1518" y="80" width="238" height="120" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-21" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;find component&#39;s root element&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=ivpqk0Sl2hKh;" parent="1" vertex="1">
          <mxGeometry x="1364" y="215" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-22" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#6a9955;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.012;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=WvpqTimbQTIR;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-18" target="Kg0yKlX9B3dp8cPTO4nQ-21" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1467" y="140" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-23" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;YES&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="Kg0yKlX9B3dp8cPTO4nQ-22" vertex="1">
          <mxGeometry x="-0.1805499639577397" relative="1" as="geometry">
            <mxPoint x="20" y="23" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-24" value="root element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffe342;strokeWidth=0.8;lucidId=rwpqUt~hff.z;" parent="1" vertex="1">
          <mxGeometry x="1407" y="305" width="120" height="120" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-25" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=ywpqEt0ONrCu;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-21" target="Kg0yKlX9B3dp8cPTO4nQ-24" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-26" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1;entryX=0;entryY=0.5;lucidId=Owpqoi~S1.h_;entryDx=0;entryDy=0;exitDx=0;exitDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-24" target="Kg0yKlX9B3dp8cPTO4nQ-7" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1467" y="590" />
              <mxPoint x="-290" y="590" />
              <mxPoint x="-290" y="-743" />
            </Array>
            <mxPoint x="621" y="412.8600000000001" as="sourcePoint" />
            <mxPoint x="1221.5280000000002" y="-640" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-27" value="Conditional Pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=hNbr~Y2p_QlI;" parent="1" vertex="1">
          <mxGeometry x="120" y="64" width="275" height="50" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-28" value="&lt;div style=&quot;display: flex; justify-content: center; text-align: center; align-items: baseline; font-size: 35px; line-height: 1.25; margin-top: -2px;&quot;&gt;&lt;span style=&quot;font-size: 35px;&quot;&gt;&lt;span style=&quot;font-size: 35px; color: rgb(58, 65, 74);&quot;&gt;Component Pipe&lt;/span&gt;&lt;span style=&quot;font-size: 35px; color: rgb(0, 0, 0);&quot;&gt; &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=.NbrY0oTtRdZ;" parent="1" vertex="1">
          <mxGeometry x="1803" y="63" width="280" height="48" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-29" value="Create render output" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=Nccr_AYJ4jwR;" parent="1" vertex="1">
          <mxGeometry x="3112" y="121" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-30" value="render output&#xa;{element, props}" style="points=[[0.723,0.599,0]];html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontFamily=Droid Sans Mono;fontColor=default;spacing=3.8;verticalAlign=middle;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFDDA6;strokeWidth=0.8;lucidId=Nccrim58QWrU;" parent="1" vertex="1">
          <mxGeometry x="3067" y="280" width="296" height="76" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-31" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=kdcrMUB_b6L7;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-29" target="Kg0yKlX9B3dp8cPTO4nQ-30" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-32" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;dashed=1;fixDash=1;dashPattern=3 8;strokeWidth=6;rounded=1;arcSize=12;curved=1;startArrow=none;endArrow=block;endFill=1;exitX=1.003;exitY=0.5;exitPerimeter=0;entryX=0.723;entryY=0.599;entryPerimeter=0;lucidId=Okcr_v05n7ps;spacing=7;endSize=6;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-14" target="Kg0yKlX9B3dp8cPTO4nQ-30" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2040" y="-310" />
              <mxPoint x="3730" y="-240" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-33" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;is atom instance&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=16.7;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=HGbr0KnT.7OF;" parent="1" vertex="1">
          <mxGeometry x="2430" y="91.5" width="166" height="119" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-34" value="Atom Pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=wNbrKlhsUgA-;" parent="1" vertex="1">
          <mxGeometry x="2730" y="60" width="208" height="48" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-35" value="add common props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=UVbry6YRFx6D;" parent="1" vertex="1">
          <mxGeometry x="2215" y="184" width="225" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-36" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#6a9955;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.012;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=-WbrJpZyaynt;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-33" target="Kg0yKlX9B3dp8cPTO4nQ-35" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2328" y="151" />
              <mxPoint x="2328" y="166" />
              <mxPoint x="2328" y="166" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-37" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;YES&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="Kg0yKlX9B3dp8cPTO4nQ-36" vertex="1">
          <mxGeometry x="-0.29790958545917323" relative="1" as="geometry">
            <mxPoint x="-1" y="9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-38" value="evaluated props&#xa;+ common props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#FFFFFF;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FE7070;strokeWidth=0.8;lucidId=CXbr-5XQEbX_;" parent="1" vertex="1">
          <mxGeometry x="2205" y="274" width="245" height="75" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-39" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.514;entryY=-0.004;entryPerimeter=0;lucidId=LXbrc.x8iK1r;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-35" target="Kg0yKlX9B3dp8cPTO4nQ-38" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-40" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;has props customizer?&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=23;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=m0brCRG_dd4x;" parent="1" vertex="1">
          <mxGeometry x="2400" y="394" width="237" height="120" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-41" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#e81313;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.988;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=F0brp~GQ7hAC;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-33" target="Kg0yKlX9B3dp8cPTO4nQ-29" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2983" y="151" />
              <mxPoint x="2983" y="28" />
              <mxPoint x="3215" y="28" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-42" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;NO&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="Kg0yKlX9B3dp8cPTO4nQ-41" vertex="1">
          <mxGeometry x="-0.887954320207523" relative="1" as="geometry">
            <mxPoint y="9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-43" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.005;exitPerimeter=0;entryX=0.5;entryY=0.012;entryPerimeter=0;lucidId=e1br7tc.eLzA;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-38" target="Kg0yKlX9B3dp8cPTO4nQ-40" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-44" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#2D7600;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.012;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=F1br.BML4Xsb;fillColor=#60a917;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-40" target="Kg0yKlX9B3dp8cPTO4nQ-46" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2318" y="454" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-45" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;YES&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="Kg0yKlX9B3dp8cPTO4nQ-44" vertex="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="14" y="13" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-46" value="customize props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=L1brB3M9DaWy;" parent="1" vertex="1">
          <mxGeometry x="2215" y="490" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-47" value="add css" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=51brmm2iGOPA;" parent="1" vertex="1">
          <mxGeometry x="2377" y="589" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-48" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#B20000;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.988;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=f2br_VuPDJp7;fillColor=#e51400;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-40" target="Kg0yKlX9B3dp8cPTO4nQ-47" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2728" y="454" />
              <mxPoint x="2728" y="570" />
              <mxPoint x="2480" y="570" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-49" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;NO&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="Kg0yKlX9B3dp8cPTO4nQ-48" vertex="1">
          <mxGeometry x="-0.750272681639075" relative="1" as="geometry">
            <mxPoint x="-6" y="13" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-50" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=b2brOpQtnMK_;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-46" target="Kg0yKlX9B3dp8cPTO4nQ-47" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-51" value="evaluated props&#xa;+ common props&#xa;+ css" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#FFFFFF;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FE7070;strokeWidth=0.8;lucidId=72brrtTgc-Gu;" parent="1" vertex="1">
          <mxGeometry x="2362.5" y="675" width="235" height="105" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-52" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.004;entryPerimeter=0;lucidId=.2brkkc0G1Sr;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-47" target="Kg0yKlX9B3dp8cPTO4nQ-51" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-53" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.004;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=V6brSjGimFf7;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-51" target="Kg0yKlX9B3dp8cPTO4nQ-54" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-54" value="Create render output" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=36brZu3EAuT1;" parent="1" vertex="1">
          <mxGeometry x="2377" y="813.9999999999999" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-55" value="render output&#xa;{atomType, element, props}" style="points=[[0.834,0.462,0]];html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontFamily=Droid Sans Mono;fontColor=default;spacing=3.8;verticalAlign=middle;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFDDA6;strokeWidth=0.8;lucidId=17brnYHj08_5;" parent="1" vertex="1">
          <mxGeometry x="2300" y="899.9999999999999" width="360" height="76" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-56" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=09briWDBcKg0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-54" target="Kg0yKlX9B3dp8cPTO4nQ-55" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-57" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;dashed=1;fixDash=1;dashPattern=3 8;strokeWidth=6;rounded=1;arcSize=12;curved=1;startArrow=none;endArrow=block;endFill=1;exitX=1.002;exitY=0.5;exitPerimeter=0;entryX=0.834;entryY=0.462;entryPerimeter=0;lucidId=iecrC1nLRCuD;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-51" target="Kg0yKlX9B3dp8cPTO4nQ-55" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2658" y="755.63" />
              <mxPoint x="2678" y="855.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-58" value="Null Pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=mvcryc21Xsoq;" parent="1" vertex="1">
          <mxGeometry x="3448" y="60" width="191" height="54" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-59" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;lucidId=Mwcr0lEuirnE;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-55" target="Kg0yKlX9B3dp8cPTO4nQ-109" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2480" y="1140" />
              <mxPoint x="1358" y="1140" />
            </Array>
            <mxPoint x="1360" y="1210" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-60" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;lucidId=VwcrY3fCDHGw;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-30" target="Kg0yKlX9B3dp8cPTO4nQ-109" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="3215" y="1140" />
              <mxPoint x="1358" y="1140" />
            </Array>
            <mxPoint x="1358" y="1210" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-61" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Create render output&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=16.7;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=HQcrTI7ChMF3;" parent="1" vertex="1">
          <mxGeometry x="-190.5" y="231.5" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-62" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;empty render output&lt;br&gt;{element}&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=14;fontFamily=Droid Sans Mono;fontColor=default;spacing=3.8;verticalAlign=middle;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFDDA6;strokeWidth=0.8;lucidId=HQcr1kZ5y1.U;" parent="1" vertex="1">
          <mxGeometry x="-210" y="334" width="245" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-63" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=HQcrm9xOkuKo;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-61" target="Kg0yKlX9B3dp8cPTO4nQ-62" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-64" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#6a9955;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.012;exitY=0.5;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=QRcryEmn-D7j;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-16" target="Kg0yKlX9B3dp8cPTO4nQ-61" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-88" y="140" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-65" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;YES&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="Kg0yKlX9B3dp8cPTO4nQ-64" vertex="1">
          <mxGeometry x="-0.20080516764391376" relative="1" as="geometry">
            <mxPoint x="22" y="11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-66" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1;lucidId=nScrUZ-nr8a2;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitDx=0;exitDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-62" target="Kg0yKlX9B3dp8cPTO4nQ-109" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-87" y="1139.63" />
              <mxPoint x="1358" y="1139.63" />
            </Array>
            <mxPoint x="-68.5" y="394.3599999999999" as="sourcePoint" />
            <mxPoint x="1377" y="1210" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-67" value="renderRoot" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=CH2pACBFctD6;" parent="1" vertex="1">
          <mxGeometry x="-1663.5" y="-940" width="173" height="45" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-68" value="renderElement" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=WH2pmMZfPAdO;" parent="1" vertex="1">
          <mxGeometry x="-1682" y="-730" width="210" height="45" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-69" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.008;exitPerimeter=0;entryX=0.5;entryY=0;lucidId=GJ2pB5-q8uvt;entryDx=0;entryDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-67" target="Kg0yKlX9B3dp8cPTO4nQ-112" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-72" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.008;exitPerimeter=0;entryX=0.5;entryY=0;lucidId=MK2p6vUzAX44;entryDx=0;entryDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-68" target="Kg0yKlX9B3dp8cPTO4nQ-113" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
            <mxPoint x="-1577.75" y="-650.0000000000006" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-73" value="render Intermediate Element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=2K2pSlJ9uCWF;" parent="1" vertex="1">
          <mxGeometry x="-1697.82" y="-507.37" width="240" height="70" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-74" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;entryX=0.5;entryY=0;lucidId=iL2pz9DkctFf;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryDx=0;entryDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-113" target="Kg0yKlX9B3dp8cPTO4nQ-73" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
            <mxPoint x="-1577" y="-236.74" as="sourcePoint" />
            <mxPoint x="-1577.75" y="-272.37" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-75" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.006;entryPerimeter=0;lucidId=012px_IEI6bz;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-73" target="Kg0yKlX9B3dp8cPTO4nQ-76" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-76" value="render pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#e3fae3;dashed=1;fixDash=1;dashPattern=16 6;strokeWidth=0.8;lucidId=312pBf9_Gqsw;" parent="1" vertex="1">
          <mxGeometry x="-1697.82" y="-397.37" width="240" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-77" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=o22ptAcO_d.h;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-76" target="Kg0yKlX9B3dp8cPTO4nQ-78" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-156" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-78" target="Kg0yKlX9B3dp8cPTO4nQ-155" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-78" value="intermediate output" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffdda6;strokeWidth=0.8;lucidId=E22pizVrBhQi;" parent="1" vertex="1">
          <mxGeometry x="-1654" y="-307.37" width="155" height="155" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-79" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;entryX=0.5;entryY=0.012;entryPerimeter=0;lucidId=h42p6BSjtZa.;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-71" target="Kg0yKlX9B3dp8cPTO4nQ-85" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1571" y="113" />
              <mxPoint x="-1571" y="210" />
            </Array>
            <mxPoint x="-1560" y="110" as="sourcePoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-80" value="renderChildren" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=p42p1_CLHi--;" parent="1" vertex="1">
          <mxGeometry x="-2078" y="311" width="190" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-81" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=-0.006;exitPerimeter=0;entryX=-0.003;entryY=0.5;entryPerimeter=0;lucidId=V42ppxnbCQSa;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-80" target="Kg0yKlX9B3dp8cPTO4nQ-68" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1990" y="311" />
              <mxPoint x="-1990" y="-707" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-82" value="for&lt;br&gt;each&lt;br&gt;child" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=23;" parent="Kg0yKlX9B3dp8cPTO4nQ-81" vertex="1">
          <mxGeometry x="-0.7558899706965376" relative="1" as="geometry">
            <mxPoint y="-68" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-83" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.006;exitPerimeter=0;entryX=-0.003;entryY=0.5;entryPerimeter=0;lucidId=f52pfztVE_JT;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-80" target="Kg0yKlX9B3dp8cPTO4nQ-93" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1983" y="477" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-84" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Returns&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="Kg0yKlX9B3dp8cPTO4nQ-83" vertex="1" connectable="0">
          <mxGeometry x="-0.454" y="-2" relative="1" as="geometry">
            <mxPoint x="2" y="-34" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-85" value="has&#xa;children?" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=23;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=H52pnoIq.JFW;" parent="1" vertex="1">
          <mxGeometry x="-1648" y="289.63" width="153" height="100.73" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-86" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;fontColor=#333333;fontStyle=1;strokeColor=#2D7600;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.016;exitY=0.5;exitPerimeter=0;entryX=1.002;entryY=0.5;entryPerimeter=0;lucidId=R52pBpqkpSae;fillColor=#60a917;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-85" target="Kg0yKlX9B3dp8cPTO4nQ-80" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-87" value="Yes" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=23;" parent="Kg0yKlX9B3dp8cPTO4nQ-86" vertex="1">
          <mxGeometry x="-0.22679754080191572" relative="1" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;endArrow=none;endFill=0;strokeWidth=2;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-89" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1449" y="738.9999999999999" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-89" value="renderComponentWithStyles" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=q82pvkAQDu0c;" parent="1" vertex="1">
          <mxGeometry x="-1630.5" y="655.63" width="363" height="45" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-90" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;lucidId=Q82p.7k14b_~;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-71" target="Kg0yKlX9B3dp8cPTO4nQ-91" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1570" y="113" />
              <mxPoint x="-1570" y="246" />
              <mxPoint x="-1085" y="246" />
            </Array>
            <mxPoint x="-1560" y="110" as="sourcePoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-91" value="Find React Element of intermediate output" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=X82pE_4GNOKa;" parent="1" vertex="1">
          <mxGeometry x="-1230" y="312.63" width="290" height="84" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-92" value="&lt;font color=&quot;#ffffff&quot;&gt;current element&#39;s React Component&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#006EAF;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#1ba1e2;strokeWidth=0.8;lucidId=X92pj0l-2KM1;" parent="1" vertex="1">
          <mxGeometry x="-1171.25" y="429" width="172.5" height="160" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-93" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=992pJAcsZaLZ;" parent="1" vertex="1">
          <mxGeometry x="-1753" y="409.9" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-94" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=-0.008;entryPerimeter=0;lucidId=n-2pA5_OfBxn;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-92" target="Kg0yKlX9B3dp8cPTO4nQ-89" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1085" y="615.63" />
              <mxPoint x="-1448" y="615.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-95" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=-0.008;entryPerimeter=0;lucidId=q-2p4PT11yJh;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-93" target="Kg0yKlX9B3dp8cPTO4nQ-89" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1686" y="615.63" />
              <mxPoint x="-1448" y="615.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-96" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.004;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=t-2pTGDJVv6k;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-91" target="Kg0yKlX9B3dp8cPTO4nQ-92" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-97" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Ag3pKJvzKlf2;" parent="1" vertex="1">
          <mxGeometry x="-1738" y="409.9" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-98" value="Children&lt;br&gt;React&lt;br&gt;Nodes" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;" parent="1" vertex="1">
          <mxGeometry x="-1723" y="409.9" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-99" value="extract Valid Props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=ej3p5m..Eqit;fontColor=#ffffff;" parent="1" vertex="1">
          <mxGeometry x="-1461.99" y="311" width="214" height="45" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-100" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;entryX=0.5;entryY=-0.008;entryPerimeter=0;lucidId=2j3pe4SfPY9E;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-71" target="Kg0yKlX9B3dp8cPTO4nQ-99" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1570" y="113" />
              <mxPoint x="-1570" y="246" />
              <mxPoint x="-1355" y="246" />
            </Array>
            <mxPoint x="-1630" y="130" as="sourcePoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-101" value="valid props" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=3.8;strokeColor=#ffffff;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fe7070;strokeWidth=0.8;lucidId=Kk3pb~UwIWkm;" parent="1" vertex="1">
          <mxGeometry x="-1433.04" y="397.36" width="156.09" height="159.99" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-102" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=none;endFill=0;exitX=0.5;exitY=1.008;exitPerimeter=0;entryX=0.5;entryY=-0.003;entryPerimeter=0;lucidId=Fl3po1fG17AZ;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-99" target="Kg0yKlX9B3dp8cPTO4nQ-101" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-103" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=23;strokeColor=#3a414a;strokeOpacity=100;strokeWidth=2;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.5;exitY=1.003;exitPerimeter=0;entryX=0.5;entryY=0;lucidId=Il3pJ30-1zX-;entryDx=0;entryDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-101" target="Kg0yKlX9B3dp8cPTO4nQ-89" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1355" y="595.63" />
              <mxPoint x="-1448" y="595.63" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-104" value="" style="curved=1;endArrow=none;html=1;rounded=0;endFill=0;fillColor=#60a917;strokeColor=#82B366;strokeWidth=6;dashed=1;" parent="1" edge="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="-1430" y="-520" as="sourcePoint" />
            <mxPoint x="-380" y="-674.37" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1380" y="-350" />
              <mxPoint x="-520" y="-360" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-105" value="" style="curved=1;endArrow=none;html=1;rounded=0;endFill=0;fillColor=#60a917;strokeColor=#82B366;strokeWidth=6;dashed=1;" parent="1" edge="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="-1500" y="-150" as="sourcePoint" />
            <mxPoint x="-380" y="1265.63" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-970" y="-380" />
              <mxPoint x="-560" y="560" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-106" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#e81313;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=1;exitY=0.5;entryX=0.5;entryY=0;lucidId=uIbrn_9a1o4h;entryDx=0;entryDy=0;exitDx=0;exitDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-18" target="Kg0yKlX9B3dp8cPTO4nQ-33" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="2139" y="140" />
              <mxPoint x="2139" y="-2" />
              <mxPoint x="2513" y="-2" />
            </Array>
            <mxPoint x="1689.9999999999995" y="120.98000000000002" as="sourcePoint" />
            <mxPoint x="2514.44" y="69.48000000000002" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-107" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;NO&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="Kg0yKlX9B3dp8cPTO4nQ-106" vertex="1">
          <mxGeometry x="-0.8254076077110912" relative="1" as="geometry">
            <mxPoint x="-45" y="23" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-108" value="&lt;h2&gt;&lt;font color=&quot;#82b366&quot;&gt;Render Pipe&lt;/font&gt;&lt;/h2&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=mvcryc21Xsoq;" parent="1" vertex="1">
          <mxGeometry x="3340" y="922.4999999999999" width="381" height="165" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-109" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;intermediate output&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=16.7;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffdda6;strokeWidth=0.8;lucidId=E22pizVrBhQi;" parent="1" vertex="1">
          <mxGeometry x="1257" y="1210" width="202" height="202" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-110" value="&lt;h2 style=&quot;line-height: 10%;&quot;&gt;&lt;font color=&quot;#006eaf&quot;&gt;ElementWrapper&lt;/font&gt;&lt;/h2&gt;&lt;div style=&quot;line-height: 10%;&quot;&gt;&lt;font color=&quot;#006eaf&quot;&gt;(MOBX Observer)&lt;/font&gt;&lt;/div&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=mvcryc21Xsoq;" parent="1" vertex="1">
          <mxGeometry x="-1200" y="899.9999999999999" width="420" height="110" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-111" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;endArrow=block;endFill=1;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-112" target="Kg0yKlX9B3dp8cPTO4nQ-68" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-112" value="root element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffe342;strokeWidth=0.8;lucidId=rwpqUt~hff.z;" parent="1" vertex="1">
          <mxGeometry x="-1627" y="-865.63" width="100" height="100" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-113" value="element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#3a414a;spacing=3.8;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffe342;strokeWidth=0.8;lucidId=rwpqUt~hff.z;" parent="1" vertex="1">
          <mxGeometry x="-1628.6299999999999" y="-647.37" width="101.63" height="101.63" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-114" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;endArrow=block;endFill=1;strokeWidth=2;" parent="1" target="Kg0yKlX9B3dp8cPTO4nQ-116" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1449" y="873.9999999999999" as="sourcePoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-115" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;endArrow=block;endFill=1;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-116" target="Kg0yKlX9B3dp8cPTO4nQ-117" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1449" y="1185.63" as="targetPoint" />
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-116" value="wrap element with ErrorBoundary and return" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=q82pvkAQDu0c;" parent="1" vertex="1">
          <mxGeometry x="-1630.5" y="937.4999999999999" width="363" height="80" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-117" value="wrapped element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;" parent="1" vertex="1">
          <mxGeometry x="-1516.5" y="1100" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-118" value="rendered element" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;" parent="1" vertex="1">
          <mxGeometry x="-1516.5" y="739" width="135" height="135" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-119" value="" style="rounded=0;whiteSpace=wrap;html=1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-2170" y="1495.63" width="1820" height="380" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-120" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Legend&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;container=0;" parent="1" vertex="1">
          <mxGeometry x="-2168" y="1505.63" width="90" height="30" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-121" value="renderer.model related action" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#3a414a;spacing=9;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=30;fillColor=#c3f7c8;strokeWidth=0.8;lucidId=p42p1_CLHi--;container=0;" parent="1" vertex="1">
          <mxGeometry x="-2123" y="1585.63" width="323" height="90" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-122" value="&lt;font color=&quot;#030303&quot; style=&quot;font-size: 23px;&quot;&gt;inside the ElementWrapper (which is a react component)&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;fontSize=11;fontColor=#ffffff;fillStyle=cross-hatch;gradientColor=none;strokeWidth=0.5;arcSize=9;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1360" y="1585.63" width="330" height="90" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-123" value="&lt;font color=&quot;#000000&quot; style=&quot;font-size: 23px;&quot;&gt;the render pipe&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=13;spacing=3.8;strokeColor=#2D7600;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=31;fillColor=#60a917;fixDash=1;strokeWidth=0.5;lucidId=UHbrM3U28dgx;perimeterSpacing=43;fillStyle=hatch;fontColor=#ffffff;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1360" y="1734.38" width="330" height="90" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-124" value="React&lt;br&gt;Node" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#3a414a;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#cc4e00;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1750.5" y="1695.63" width="167.5" height="167.5" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-125" value="util function calls or some logic" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=30;fillColor=#647687;strokeWidth=0.8;lucidId=p42p1_CLHi--;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1757" y="1585.63" width="350" height="90" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-126" value="the value of props at a certian point" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#A50040;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FE7070;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-2140" y="1695.63" width="167.5" height="167.5" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-127" value="React&lt;br style=&quot;border-color: var(--border-color);&quot;&gt;Component" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#ffffff;spacing=0;strokeColor=#006EAF;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#1ba1e2;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1947" y="1695.63" width="167.5" height="167.5" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-128" value="IElement" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;ellipse;fontSize=23;fontColor=#000000;spacing=0;strokeColor=#3A414A;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#FFE342;strokeWidth=0.8;lucidId=Eg3pzosF1Hq1;container=0;" parent="1" vertex="1">
          <mxGeometry x="-1555" y="1695.63" width="167.5" height="167.5" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-133" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-1488.99" y="-737.37" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-134" value="" style="group" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-970" y="1770" width="589.5" height="30" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-135" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="Kg0yKlX9B3dp8cPTO4nQ-134" vertex="1">
          <mxGeometry y="5" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-136" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;will run once per element regardless of re-renders&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="Kg0yKlX9B3dp8cPTO4nQ-134" vertex="1">
          <mxGeometry x="39.5" width="550" height="30" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-137" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.13;exitY=0.77;exitDx=0;exitDy=0;exitPerimeter=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;curved=1;fillColor=#76608a;strokeColor=#432D57;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-139" target="Kg0yKlX9B3dp8cPTO4nQ-113" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-138" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.13;exitY=0.77;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.512;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;curved=1;fillColor=#76608a;strokeColor=#432D57;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-139" target="Kg0yKlX9B3dp8cPTO4nQ-1" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1250" y="-344" />
              <mxPoint x="-1250" y="-260" />
              <mxPoint x="-1427" y="-260" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-139" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Because&amp;nbsp;the element is a mobx&lt;br&gt;model (observable) and the ElementWrapper&lt;br&gt;is a mobx observer, it will be&lt;br&gt;re-rendered whenever the properties&lt;br&gt;of the element are changed&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;align=center;fillColor=#76608a;strokeColor=#432D57;fontColor=#ffffff;" parent="1" vertex="1">
          <mxGeometry x="-1090" y="-747.63" width="580" height="300" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-140" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.768;entryY=1.001;entryDx=0;entryDy=0;entryPerimeter=0;startArrow=block;startFill=1;endArrow=none;endFill=0;strokeWidth=2;dashed=1;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-141" target="Kg0yKlX9B3dp8cPTO4nQ-1" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-141" value="run post-render actions" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=9;strokeColor=#6c8ebf;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#dae8fc;strokeWidth=0.8;lucidId=WH2pmMZfPAdO;dashed=1;" parent="1" vertex="1">
          <mxGeometry x="-1190" y="1145" width="277.5" height="45" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-142" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-930" y="1140" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-143" value="runs in a react useEffect hook" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;spacing=9;strokeColor=#6c8ebf;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#dae8fc;strokeWidth=0.8;lucidId=WH2pmMZfPAdO;dashed=1;" parent="1" vertex="1">
          <mxGeometry x="-970" y="1591.25" width="340" height="84.38" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-144" value="" style="group" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-1698.25" y="90" width="250.5" height="83" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-71" value="new&lt;br&gt;ElementWrapper" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=23;fontColor=#ffffff;spacing=9;strokeColor=#006EAF;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#1ba1e2;strokeWidth=0.8;lucidId=nK2pQC2JeSA7;" parent="Kg0yKlX9B3dp8cPTO4nQ-144" vertex="1">
          <mxGeometry y="7" width="240" height="76" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-132" value="&lt;font style=&quot;font-size: 17px;&quot;&gt;1&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;" parent="Kg0yKlX9B3dp8cPTO4nQ-144" vertex="1">
          <mxGeometry x="227.5" width="23" height="20" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-146" value="" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=12;spacing=3.8;strokeColor=#82b366;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#d5e8d4;dashed=1;fixDash=1;strokeWidth=12;lucidId=8GbrfnMcC.ng;" parent="1" vertex="1">
          <mxGeometry x="560" y="49" width="645" height="390" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-147" value="Pre-render Pipe" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=35;fontColor=#3a414a;spacing=3.8;strokeOpacity=0;fillOpacity=0;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#ffffff;strokeWidth=0.8;lucidId=hNbr~Y2p_QlI;" parent="1" vertex="1">
          <mxGeometry x="910" y="63" width="275" height="50" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-150" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-148" target="Kg0yKlX9B3dp8cPTO4nQ-18" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1260" y="173" />
              <mxPoint x="1260" />
              <mxPoint x="1637" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-153" value="&lt;b&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;NO&lt;/font&gt;&lt;/b&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=none;" parent="Kg0yKlX9B3dp8cPTO4nQ-150" vertex="1" connectable="0">
          <mxGeometry x="-0.7508" y="2" relative="1" as="geometry">
            <mxPoint x="-75" y="13" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-151" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-148" target="Kg0yKlX9B3dp8cPTO4nQ-149" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="723" y="173" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-154" value="&lt;b&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;YES&lt;/font&gt;&lt;/b&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=none;" parent="Kg0yKlX9B3dp8cPTO4nQ-151" vertex="1" connectable="0">
          <mxGeometry x="0.3884" y="-3" relative="1" as="geometry">
            <mxPoint x="30" y="-47" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-148" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Action exist?&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=16.7;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=1spqlIge~FoM;" parent="1" vertex="1">
          <mxGeometry x="780" y="113" width="190" height="120" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-19" value="" style="html=1;jettySize=18;whiteSpace=wrap;fontSize=13;strokeColor=#e81313;strokeOpacity=100;strokeWidth=2.3;rounded=1;arcSize=12;edgeStyle=orthogonalEdgeStyle;startArrow=none;endArrow=block;endFill=1;exitX=0.988;exitY=0.5;exitPerimeter=0;lucidId=6upqgUuchVXD;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-16" target="Kg0yKlX9B3dp8cPTO4nQ-148" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="480" y="140" />
              <mxPoint x="480" y="28" />
              <mxPoint x="875" y="28" />
            </Array>
            <mxPoint x="650" y="28" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-20" value="&lt;span style=&quot;background-color: rgb(213, 232, 212);&quot;&gt;NO&lt;/span&gt;" style="text;html=1;resizable=0;labelBackgroundColor=default;align=center;verticalAlign=middle;fontStyle=1;fontColor=#333333;fontSize=13.3;" parent="Kg0yKlX9B3dp8cPTO4nQ-19" vertex="1">
          <mxGeometry x="-0.7282510802861611" relative="1" as="geometry">
            <mxPoint y="11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-152" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-149" target="Kg0yKlX9B3dp8cPTO4nQ-18" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1260" y="310" />
              <mxPoint x="1260" />
              <mxPoint x="1637" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-149" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;run pre-render action&lt;/font&gt;" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;fontSize=16.7;fontColor=#ffffff;spacing=3.8;strokeColor=#314354;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#647687;strokeWidth=0.8;lucidId=HQcrTI7ChMF3;" parent="1" vertex="1">
          <mxGeometry x="620" y="281.5" width="206" height="60" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-157" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-155" target="Kg0yKlX9B3dp8cPTO4nQ-71" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-158" value="&lt;font size=&quot;1&quot; style=&quot;&quot;&gt;&lt;b style=&quot;font-size: 23px;&quot;&gt;NO&lt;/b&gt;&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="Kg0yKlX9B3dp8cPTO4nQ-157" vertex="1" connectable="0">
          <mxGeometry x="-0.0104" y="2" relative="1" as="geometry">
            <mxPoint y="-5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-159" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;" parent="1" source="Kg0yKlX9B3dp8cPTO4nQ-155" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1850" y="80" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1850" y="-50" />
              <mxPoint x="-1850" y="70" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-160" value="&lt;font size=&quot;1&quot; style=&quot;&quot;&gt;&lt;b style=&quot;font-size: 23px;&quot;&gt;YES&lt;/b&gt;&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="Kg0yKlX9B3dp8cPTO4nQ-159" vertex="1" connectable="0">
          <mxGeometry x="0.0531" y="6" relative="1" as="geometry">
            <mxPoint x="-6" y="44" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-155" value="is render output empty?" style="html=1;overflow=block;blockSpacing=1;whiteSpace=wrap;rhombus;fontSize=23;spacing=3.8;strokeColor=#ae4132;strokeOpacity=100;fillOpacity=100;rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#fad9d5;strokeWidth=0.8;lucidId=H52pnoIq.JFW;" parent="1" vertex="1">
          <mxGeometry x="-1741" y="-110" width="328" height="120.73" as="geometry" />
        </mxCell>
        <mxCell id="Kg0yKlX9B3dp8cPTO4nQ-161" value="&lt;b&gt;&lt;font style=&quot;font-size: 23px;&quot;&gt;RETURN&lt;/font&gt;&lt;/b&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="1" vertex="1">
          <mxGeometry x="-1910" y="81" width="120" height="40" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
  <diagram id="WIsvjxugrJhxPowGkpuP" name="high-level-rendering-flow">
    <mxGraphModel dx="982" dy="1719" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="FEwLvUrbGTohm4ypaykO-8" value="" style="rounded=1;whiteSpace=wrap;html=1;align=left;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="249" y="120" width="640" height="180" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-79" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;dashed=1;dashPattern=1 4;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-65" target="FEwLvUrbGTohm4ypaykO-90" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="1070" y="1310" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-65" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="712.5" y="1110" width="715" height="200" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-1" target="FEwLvUrbGTohm4ypaykO-8" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-1" value="useRenderedPage" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="470" y="40" width="200" height="40" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#008a00;strokeColor=#005700;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-2" target="FEwLvUrbGTohm4ypaykO-4" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="380" y="179" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-10" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-5" vertex="1" connectable="0">
          <mxGeometry x="-0.4507" relative="1" as="geometry">
            <mxPoint x="-6" y="16" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#e51400;strokeColor=#B20000;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-2" target="FEwLvUrbGTohm4ypaykO-6" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="745" y="180" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-11" value="NO" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-7" vertex="1" connectable="0">
          <mxGeometry x="-0.653" y="-3" relative="1" as="geometry">
            <mxPoint x="25" y="13" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-2" value="&lt;p style=&quot;line-height: 120%; font-size: 20px;&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;is&lt;br style=&quot;font-size: 20px;&quot;&gt;Production&lt;/font&gt;&lt;/p&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="495" y="130.5" width="150" height="96" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-4" value="fetch app with current page and provider page" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="260" y="218" width="240" height="62" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-6" value="fetch app with all pages" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="620" y="218" width="250" height="62" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-8" target="FEwLvUrbGTohm4ypaykO-14" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-40" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-38" target="FEwLvUrbGTohm4ypaykO-44" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="1450" y="90" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-38" value="useRenderedComponent" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1070" y="50" width="260" height="40" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fillColor=#647687;strokeColor=#314354;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-39" target="FEwLvUrbGTohm4ypaykO-41" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-39" value="load all app&#39;s pages with their stores, elements, atoms, tags, and types" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1015" y="220" width="370" height="70" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-47" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fillColor=#647687;strokeColor=#314354;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-41" target="FEwLvUrbGTohm4ypaykO-46" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-41" value="load all app&#39;s domains" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1015" y="322.87" width="371" height="47.13" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-45" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fillColor=#647687;strokeColor=#314354;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-44" target="FEwLvUrbGTohm4ypaykO-39" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-44" value="load current app" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1117.5" y="140" width="165" height="40" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-51" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-46" target="FEwLvUrbGTohm4ypaykO-48" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1200" y="650" />
              <mxPoint x="1070" y="650" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-46" value="load the component with its elements" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1015" y="405.6" width="370" height="54.4" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-53" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;dashed=1;dashPattern=1 4;strokeWidth=2;fontSize=20;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="si2u9hwl53EASQa9dy7w-28" target="FEwLvUrbGTohm4ypaykO-52" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-41" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;" parent="1" source="FEwLvUrbGTohm4ypaykO-48" target="si2u9hwl53EASQa9dy7w-28" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1070" y="750" />
              <mxPoint x="1070" y="750" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-48" value="addRenderer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="990" y="690" width="160" height="40" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-50" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-14" target="FEwLvUrbGTohm4ypaykO-48" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="570" y="650" />
              <mxPoint x="1070" y="650" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-64" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;dashed=1;strokeWidth=2;jumpSize=9;jumpStyle=none;rounded=0;dashPattern=1 4;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-52" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="1070.0000000000002" y="1110" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-52" value="render root element" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="945" y="1020" width="250" height="40" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-55" value="&lt;p style=&quot;line-height: 120%; font-size: 20px;&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;is&lt;br style=&quot;font-size: 20px;&quot;&gt;Production&lt;/font&gt;&lt;/p&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="990" y="1120" width="160" height="85.46" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-56" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#008a00;strokeColor=#005700;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-55" target="FEwLvUrbGTohm4ypaykO-61" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="872" y="1163" />
            </Array>
            <mxPoint x="929.97" y="1210.103548387097" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-57" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-56" vertex="1" connectable="0">
          <mxGeometry x="-0.4507" relative="1" as="geometry">
            <mxPoint y="14" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-58" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#e51400;strokeColor=#B20000;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-55" target="FEwLvUrbGTohm4ypaykO-62" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1245" y="1163" />
            </Array>
            <mxPoint x="1169.97" y="1210.91" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-59" value="NO" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-58" vertex="1" connectable="0">
          <mxGeometry x="-0.653" y="-3" relative="1" as="geometry">
            <mxPoint x="7" y="11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-61" value="evalue state variables in&amp;nbsp;customTextProp" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="730" y="1210" width="284.5" height="80" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-62" value="keep state variables in&amp;nbsp;customTextProp not evaluated" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1090" y="1210" width="310" height="80" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-66" value="evaluating props" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="727" y="1125" width="110" height="24.55" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-89" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;dashed=1;dashPattern=1 4;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-69" target="FEwLvUrbGTohm4ypaykO-80" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-69" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="710" y="1630" width="720" height="220" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-70" value="injecting text editor for custom text when no children exist" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="721" y="1670" width="248" height="24.55" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-71" value="&lt;p style=&quot;line-height: 120%; font-size: 20px;&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;is&lt;br style=&quot;font-size: 20px;&quot;&gt;Production&amp;nbsp;&lt;/font&gt;&lt;span style=&quot;background-color: initial; font-size: 20px;&quot;&gt;(or preview)&lt;/span&gt;&lt;/p&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="975.5" y="1670.23" width="191" height="85.45" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-72" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#008a00;strokeColor=#005700;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;exitX=0;exitY=0.5;exitDx=0;exitDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-71" target="FEwLvUrbGTohm4ypaykO-76" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="895" y="1713" />
            </Array>
            <mxPoint x="929.97" y="1769.8835483870969" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-73" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-72" vertex="1" connectable="0">
          <mxGeometry x="-0.4507" relative="1" as="geometry">
            <mxPoint y="15" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-74" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#e51400;strokeColor=#B20000;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-71" target="FEwLvUrbGTohm4ypaykO-77" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1225" y="1713.23" />
            </Array>
            <mxPoint x="1169.97" y="1770.69" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-75" value="NO" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-74" vertex="1" connectable="0">
          <mxGeometry x="-0.653" y="-3" relative="1" as="geometry">
            <mxPoint x="7" y="12" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-76" value="make text editor readonly" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="805" y="1769.78" width="180" height="60.22" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-77" value="make text editor editable" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1135" y="1769.78" width="180" height="60.22" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-100" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-80" target="FEwLvUrbGTohm4ypaykO-101" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="1071.6000000000004" y="2166.7200000000003" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-80" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="711" y="1910" width="720" height="190" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-81" value="the current element is a GridLayout" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="727" y="1930" width="176" height="52" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-82" value="&lt;p style=&quot;line-height: 120%; font-size: 20px;&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;is&lt;br style=&quot;font-size: 20px;&quot;&gt;&lt;/font&gt;&lt;span style=&quot;background-color: initial; font-size: 20px;&quot;&gt;preview&lt;/span&gt;&lt;/p&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="990" y="1938.5500000000002" width="160" height="90" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-83" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#008a00;strokeColor=#005700;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;exitX=0;exitY=0.5;exitDx=0;exitDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-82" target="FEwLvUrbGTohm4ypaykO-87" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="895" y="1984" />
            </Array>
            <mxPoint x="929.97" y="2029.6535483870966" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-84" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-83" vertex="1" connectable="0">
          <mxGeometry x="-0.4507" relative="1" as="geometry">
            <mxPoint x="2" y="21" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-85" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#e51400;strokeColor=#B20000;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-82" target="FEwLvUrbGTohm4ypaykO-88" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1265" y="1984" />
            </Array>
            <mxPoint x="1169.97" y="2030.46" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-86" value="NO" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-85" vertex="1" connectable="0">
          <mxGeometry x="-0.653" y="-3" relative="1" as="geometry">
            <mxPoint x="9" y="18" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-87" value="static = true" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="820" y="2028.5500000000002" width="150" height="40" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-88" value="static = false" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1190" y="2028.5500000000002" width="150" height="40" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-99" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;dashed=1;dashPattern=1 4;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-90" target="FEwLvUrbGTohm4ypaykO-69" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-90" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="710" y="1375" width="720" height="190" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-91" value="getting element&#39;s css styles" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="730" y="1390" width="177.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-92" value="&lt;p style=&quot;line-height: 120%; font-size: 20px;&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;is&lt;br style=&quot;font-size: 20px;&quot;&gt;&lt;/font&gt;&lt;span style=&quot;background-color: initial; font-size: 20px;&quot;&gt;Production&lt;/span&gt;&lt;/p&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="974.5" y="1400" width="191" height="85.45" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-93" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#008a00;strokeColor=#005700;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;exitX=0;exitY=0.5;exitDx=0;exitDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-92" target="FEwLvUrbGTohm4ypaykO-97" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="864" y="1443" />
            </Array>
            <mxPoint x="928.97" y="1499.6535483870969" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-94" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-93" vertex="1" connectable="0">
          <mxGeometry x="-0.4507" relative="1" as="geometry">
            <mxPoint x="-2" y="17" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-95" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#e51400;strokeColor=#B20000;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-92" target="FEwLvUrbGTohm4ypaykO-98" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1275" y="1443" />
              <mxPoint x="1275" y="1453" />
              <mxPoint x="1275" y="1453" />
            </Array>
            <mxPoint x="1168.97" y="1500.46" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-96" value="NO" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-95" vertex="1" connectable="0">
          <mxGeometry x="-0.653" y="-3" relative="1" as="geometry">
            <mxPoint x="11" y="14" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-97" value="mediaQueryString = &#39;@media&#39;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="734" y="1489.32" width="260" height="60.68" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-98" value="mediaQueryString = &#39;@container root&lt;span style=&quot;background-color: initial; font-size: 20px;&quot;&gt;&#39;&lt;/span&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1140" y="1489.32" width="269" height="60.45" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-101" value="Element is rendered with its children" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#ffff88;strokeColor=#36393d;" parent="1" vertex="1">
          <mxGeometry x="1031" y="2160" width="80" height="80" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-105" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=20;" parent="1" target="FEwLvUrbGTohm4ypaykO-1" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="330.0022580645161" y="-78.68" as="sourcePoint" />
            <mxPoint x="597.53" y="50.00000000000029" as="targetPoint" />
            <Array as="points">
              <mxPoint x="330" y="10" />
              <mxPoint x="570" y="10" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-106" value="&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;RendererType.&lt;/div&gt;&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;&lt;span style=&quot;color: rgb(79, 193, 255); font-size: 20px;&quot;&gt;PageBuilder&lt;/span&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];fontSize=20;" parent="FEwLvUrbGTohm4ypaykO-105" vertex="1" connectable="0">
          <mxGeometry x="-0.2878" y="2" relative="1" as="geometry">
            <mxPoint x="-119" y="-39" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-102" value="platform/&lt;br style=&quot;font-size: 20px;&quot;&gt;pages/&lt;br style=&quot;font-size: 20px;&quot;&gt;apps/&lt;br style=&quot;font-size: 20px;&quot;&gt;[userName]/&lt;br style=&quot;font-size: 20px;&quot;&gt;[appSlug]/&lt;br style=&quot;font-size: 20px;&quot;&gt;pages/&lt;br style=&quot;font-size: 20px;&quot;&gt;[pageSlug]/&lt;br style=&quot;font-size: 20px;&quot;&gt;builder.tsx" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="250" y="-320" width="160" height="240" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-107" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-103" target="FEwLvUrbGTohm4ypaykO-1" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-108" value="&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;RendererType.&lt;/div&gt;&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;&lt;span style=&quot;color: rgb(79, 193, 255); font-size: 20px;&quot;&gt;Preview&lt;/span&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];fontSize=20;" parent="FEwLvUrbGTohm4ypaykO-107" vertex="1" connectable="0">
          <mxGeometry x="-0.2528" relative="1" as="geometry">
            <mxPoint x="-80" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-103" value="platform/&lt;br style=&quot;font-size: 20px;&quot;&gt;pages/&lt;br style=&quot;font-size: 20px;&quot;&gt;apps/&lt;br style=&quot;font-size: 20px;&quot;&gt;[userName]/&lt;br style=&quot;font-size: 20px;&quot;&gt;[appSlug]/&lt;br style=&quot;font-size: 20px;&quot;&gt;pages/&lt;br style=&quot;font-size: 20px;&quot;&gt;[pageSlug]/&lt;br style=&quot;font-size: 20px;&quot;&gt;index.tsx" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="490" y="-320" width="160" height="240" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-109" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-104" target="FEwLvUrbGTohm4ypaykO-1" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="810" y="10" />
              <mxPoint x="570" y="10" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-110" value="&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;RendererType.&lt;/div&gt;&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;&lt;span style=&quot;color: rgb(79, 193, 255); font-size: 20px;&quot;&gt;Production&lt;/span&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];fontSize=20;" parent="FEwLvUrbGTohm4ypaykO-109" vertex="1" connectable="0">
          <mxGeometry x="-0.7429" relative="1" as="geometry">
            <mxPoint x="-83" y="-6" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-104" value="websites/&lt;br style=&quot;font-size: 20px;&quot;&gt;pages/&lt;br style=&quot;font-size: 20px;&quot;&gt;[domain]/&lt;br style=&quot;font-size: 20px;&quot;&gt;[...page].tsx" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="730" y="-320" width="160" height="240" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-114" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-111" target="FEwLvUrbGTohm4ypaykO-38" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1074" y="10" />
              <mxPoint x="1200" y="10" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-115" value="&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;RendererType.&lt;/div&gt;&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;&lt;span style=&quot;color: rgb(79, 193, 255); font-size: 20px;&quot;&gt;ComponentBuilder&lt;/span&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];fontSize=20;" parent="FEwLvUrbGTohm4ypaykO-114" vertex="1" connectable="0">
          <mxGeometry x="-0.6148" y="3" relative="1" as="geometry">
            <mxPoint x="-108" y="-9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-111" value="platform/&lt;br style=&quot;font-size: 20px;&quot;&gt;pages/&lt;br style=&quot;font-size: 20px;&quot;&gt;apps/&lt;br style=&quot;font-size: 20px;&quot;&gt;[userName]/&lt;br style=&quot;font-size: 20px;&quot;&gt;[appSlug]/&lt;br style=&quot;font-size: 20px;&quot;&gt;components/&lt;br style=&quot;font-size: 20px;&quot;&gt;[componentSlug]/&lt;br style=&quot;font-size: 20px;&quot;&gt;builder.tsx" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="976" y="-320" width="194" height="240" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-113" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-112" target="FEwLvUrbGTohm4ypaykO-38" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1325" y="10" />
              <mxPoint x="1200" y="10" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-116" value="&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;RendererType.&lt;/div&gt;&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 20px; line-height: 19px;&quot;&gt;&lt;span style=&quot;color: rgb(79, 193, 255); font-size: 20px;&quot;&gt;Preview&lt;/span&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];fontSize=20;" parent="FEwLvUrbGTohm4ypaykO-113" vertex="1" connectable="0">
          <mxGeometry x="-0.6134" y="-2" relative="1" as="geometry">
            <mxPoint x="-73" y="-9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-112" value="websites/&lt;br style=&quot;font-size: 20px;&quot;&gt;pages/&lt;br style=&quot;font-size: 20px;&quot;&gt;[domain]/&lt;br style=&quot;font-size: 20px;&quot;&gt;[...page].tsx" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1250" y="-320" width="165" height="240" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-14" value="" style="rounded=1;whiteSpace=wrap;html=1;align=left;container=0;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="250" y="350" width="640" height="270" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-15" value="Load all types for element" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="270" y="362.87" width="160" height="50" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-37" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-16" target="FEwLvUrbGTohm4ypaykO-21" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-16" value="load components used by the elements" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="427.5" y="390" width="285" height="55.6" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-21" value="&lt;p style=&quot;line-height: 120%; font-size: 20px;&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;is&lt;br style=&quot;font-size: 20px;&quot;&gt;Production&lt;/font&gt;&lt;/p&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="500" y="473.09" width="140" height="86.91" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#008a00;strokeColor=#005700;strokeWidth=2;fontSize=20;entryX=0.203;entryY=0.704;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="FEwLvUrbGTohm4ypaykO-21" target="FEwLvUrbGTohm4ypaykO-14" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="400" y="517" />
              <mxPoint x="380" y="517" />
            </Array>
            <mxPoint x="380" y="530" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-18" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-17" vertex="1" connectable="0">
          <mxGeometry x="-0.4507" relative="1" as="geometry">
            <mxPoint y="15" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-23" value="load elements types" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="645" y="552.11" width="210" height="32.73" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#e51400;strokeColor=#B20000;strokeWidth=2;fontSize=20;" parent="1" source="FEwLvUrbGTohm4ypaykO-21" target="FEwLvUrbGTohm4ypaykO-23" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="750" y="517" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-20" value="NO" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="FEwLvUrbGTohm4ypaykO-19" vertex="1" connectable="0">
          <mxGeometry x="-0.653" y="-3" relative="1" as="geometry">
            <mxPoint x="7" y="12" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-35" value="Nothing" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="300" y="552.1143695014663" width="160" height="24.545454545454554" as="geometry" />
        </mxCell>
        <mxCell id="FEwLvUrbGTohm4ypaykO-9" value="Fetch data" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="270" y="130.5" width="100" height="22.5" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-1" value="&lt;div style=&quot;border-color: var(--border-color); font-size: 20px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; line-height: 19px;&quot;&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;container=0;" parent="1" vertex="1">
          <mxGeometry x="260" y="1705" width="380" height="534.54" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-2" value="&lt;font style=&quot;font-size: 23px;&quot;&gt;Legend&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;container=0;" parent="1" vertex="1">
          <mxGeometry x="275" y="1719.54" width="90" height="30" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-15" value="Page from&lt;br&gt;which a&lt;br&gt;renderer is created" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="279.5" y="1789.54" width="160" height="130" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#60a917;strokeColor=#2D7600;strokeWidth=2;" parent="1" source="si2u9hwl53EASQa9dy7w-16" target="si2u9hwl53EASQa9dy7w-17" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-24" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="si2u9hwl53EASQa9dy7w-23" vertex="1" connectable="0">
          <mxGeometry x="-0.2632" relative="1" as="geometry">
            <mxPoint x="-2" y="11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-16" value="&lt;p style=&quot;line-height: 120%; font-size: 20px;&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;is&lt;br style=&quot;font-size: 20px;&quot;&gt;Production&lt;/font&gt;&lt;/p&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="279.5" y="1955.77" width="125" height="116" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-17" value="&lt;div style=&quot;color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace; font-size: 14px; line-height: 19px;&quot;&gt;rendererType = &lt;span style=&quot;color: #4ec9b0;&quot;&gt;RendererType&lt;/span&gt;.&lt;span style=&quot;color: #4fc1ff;&quot;&gt;Production&lt;/span&gt;&lt;/div&gt;" style="text;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="418" y="2037.3199999999997" width="196" height="51.45" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-26" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;strokeWidth=2;jumpSize=9;jumpStyle=none;rounded=0;dashPattern=1 4;fontSize=20;" parent="1" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="341.83" y="2139.54" as="sourcePoint" />
            <mxPoint x="341.83" y="2199.54" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-27" value="next step follows the previous one but not immedietly (many steps omitted)" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="387" y="2149.54" width="213" height="30" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-28" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="712.5" y="770" width="715" height="200" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-37" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#e51400;strokeColor=#B20000;strokeWidth=2;" parent="1" source="si2u9hwl53EASQa9dy7w-29" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="1339" y="890" as="targetPoint" />
            <Array as="points">
              <mxPoint x="1339" y="823" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-38" value="&lt;font style=&quot;font-size: 20px;&quot;&gt;NO&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=none;" parent="si2u9hwl53EASQa9dy7w-37" vertex="1" connectable="0">
          <mxGeometry x="-0.4122" y="-1" relative="1" as="geometry">
            <mxPoint y="16" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-29" value="&lt;p style=&quot;line-height: 120%; font-size: 20px;&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;is&lt;br style=&quot;font-size: 20px;&quot;&gt;ComponentBuilder&lt;/font&gt;&lt;/p&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="942" y="780" width="256" height="85.46" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#008a00;strokeColor=#005700;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=2;fontSize=20;" parent="1" source="si2u9hwl53EASQa9dy7w-29" target="si2u9hwl53EASQa9dy7w-34" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="872" y="823" />
            </Array>
            <mxPoint x="929.97" y="870.1035483870969" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-31" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=20;labelBackgroundColor=none;" parent="si2u9hwl53EASQa9dy7w-30" vertex="1" connectable="0">
          <mxGeometry x="-0.4507" relative="1" as="geometry">
            <mxPoint y="14" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-34" value="add runtime props of the component to the renderer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="730" y="870" width="284.5" height="80" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-36" value="while creating a new renderer" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="727" y="785" width="192" height="24.55" as="geometry" />
        </mxCell>
        <mxCell id="si2u9hwl53EASQa9dy7w-40" value="Nothing" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;" parent="1" vertex="1">
          <mxGeometry x="1259" y="897.7243695014663" width="160" height="24.545454545454554" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
  <diagram id="tCFwBeKftPlXcInq0PA1" name="rendering-sequence-diageam">
    <mxGraphModel dx="1832" dy="619" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="JF0S_IfBw413eRiIVJxL-8" value="RendererModel" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="80" y="120" width="100" height="750" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-9" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="JF0S_IfBw413eRiIVJxL-8" vertex="1">
          <mxGeometry x="45" y="87.5" width="10" height="532.5" as="geometry" />
        </mxCell>
        <mxCell id="JF0S_IfBw413eRiIVJxL-9" value="RuntimeContainerNode" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="196" y="120" width="160" height="930" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-10" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="JF0S_IfBw413eRiIVJxL-9" vertex="1">
          <mxGeometry x="75" y="97.5" width="10" height="732.5" as="geometry" />
        </mxCell>
        <mxCell id="JF0S_IfBw413eRiIVJxL-10" value="RuntimeElementNode" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="380" y="120" width="140" height="750" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-13" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="JF0S_IfBw413eRiIVJxL-10" vertex="1">
          <mxGeometry x="65" y="113" width="10" height="627" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-1" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="JF0S_IfBw413eRiIVJxL-10" vertex="1">
          <mxGeometry x="60" y="406" width="20" height="314" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-2" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="JF0S_IfBw413eRiIVJxL-10" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="74.99999999999977" y="386" as="sourcePoint" />
            <mxPoint x="79.99999999999977" y="415" as="targetPoint" />
            <Array as="points">
              <mxPoint x="236" y="386" />
              <mxPoint x="236" y="415" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-3" value="&lt;div style=&quot;text-align: left;&quot;&gt;renderChildren&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="WWn2rpnDwWi13MfnrQoF-2" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint x="-76" y="-18" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-4" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="JF0S_IfBw413eRiIVJxL-10" vertex="1">
          <mxGeometry x="57" y="460" width="26" height="220" as="geometry" />
        </mxCell>
        <mxCell id="JF0S_IfBw413eRiIVJxL-11" value="PreRenderPipe" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#f8cecc;strokeColor=#b85450;" parent="1" vertex="1">
          <mxGeometry x="601" y="120" width="100" height="350" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-25" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#f8cecc;strokeColor=#b85450;" parent="JF0S_IfBw413eRiIVJxL-11" vertex="1">
          <mxGeometry x="45" y="166" width="10" height="174" as="geometry" />
        </mxCell>
        <mxCell id="JF0S_IfBw413eRiIVJxL-12" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="-55" y="208.5" as="sourcePoint" />
            <mxPoint x="125" y="208.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="JF0S_IfBw413eRiIVJxL-13" value="render" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="JF0S_IfBw413eRiIVJxL-12" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="JF0S_IfBw413eRiIVJxL-14" value="RendererApplicationService" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-140" y="120" width="160" height="750" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-8" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#e1d5e7;strokeColor=#9673a6;" parent="JF0S_IfBw413eRiIVJxL-14" vertex="1">
          <mxGeometry x="75" y="75" width="10" height="545" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-1" value="RootRenderer.tsx" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="-379" y="120" width="160" height="750" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-7" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#fff2cc;strokeColor=#d6b656;" parent="XH1Q3W5CKidq3MoOrYId-1" vertex="1">
          <mxGeometry x="75" y="70" width="10" height="550" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-2" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" source="XH1Q3W5CKidq3MoOrYId-7" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="-375" y="196" as="sourcePoint" />
            <mxPoint x="-65" y="196" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-3" value="renderRoot(IRendererModel)" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-2" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint x="-10" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-11" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" target="XH1Q3W5CKidq3MoOrYId-10" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="135" y="220" as="sourcePoint" />
            <mxPoint x="275" y="220" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-12" value="render" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-11" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-14" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" source="XH1Q3W5CKidq3MoOrYId-10" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="285" y="235" as="sourcePoint" />
            <mxPoint x="445" y="235" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-15" value="render" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-14" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-16" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="445" y="260.5" as="sourcePoint" />
            <mxPoint x="135" y="260.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-17" value="get renderPipe" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-16" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint x="68" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-19" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;dashed=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="135" y="279" as="sourcePoint" />
            <mxPoint x="445" y="279" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-20" value="IRenderPipe" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-19" vertex="1" connectable="0">
          <mxGeometry x="0.4685" y="1" relative="1" as="geometry">
            <mxPoint x="-1" y="-7" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-21" value="AtomRenderPipe" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#f8cecc;strokeColor=#b85450;" parent="1" vertex="1">
          <mxGeometry x="900" y="120" width="100" height="350" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-30" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#f8cecc;strokeColor=#b85450;" parent="XH1Q3W5CKidq3MoOrYId-21" vertex="1">
          <mxGeometry x="45" y="210" width="10" height="120" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-22" value="NullRenderPipe" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#f8cecc;strokeColor=#b85450;" parent="1" vertex="1">
          <mxGeometry x="1080" y="120" width="100" height="350" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-31" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#f8cecc;strokeColor=#b85450;" parent="XH1Q3W5CKidq3MoOrYId-22" vertex="1">
          <mxGeometry x="45" y="253" width="10" height="27" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-23" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" target="XH1Q3W5CKidq3MoOrYId-25" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="455" y="290.5" as="sourcePoint" />
            <mxPoint x="595" y="290.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-24" value="&lt;div style=&quot;text-align: left;&quot;&gt;render(RuntimeElementNode)&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-23" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint x="-2" y="-11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-26" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" source="XH1Q3W5CKidq3MoOrYId-25" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="616" y="313.5" as="sourcePoint" />
            <mxPoint x="455" y="313.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-27" value="runPreRenderAction" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-26" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint x="4" y="-9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-28" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="656" y="333.5" as="sourcePoint" />
            <mxPoint x="945" y="333.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-29" value="&lt;div style=&quot;text-align: left;&quot;&gt;render(RuntimeElementNode)&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-28" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-32" value="&lt;font style=&quot;font-size: 8px;&quot;&gt;alt&lt;/font&gt;" style="shape=umlFrame;whiteSpace=wrap;html=1;pointerEvents=0;recursiveResize=0;container=1;collapsible=0;width=30;height=20;fillColor=#f8cecc;strokeColor=#b85450;" parent="1" vertex="1">
          <mxGeometry x="700" y="350" width="460" height="110" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-33" value="&lt;p style=&quot;line-height: 80%;&quot;&gt;&lt;font style=&quot;font-size: 8px;&quot;&gt;[RenderType is not Atom ||&lt;br&gt;(!ReactComponent &amp;amp;&amp;amp; !externalSourceType)]&lt;/font&gt;&lt;/p&gt;" style="text;html=1;" parent="XH1Q3W5CKidq3MoOrYId-32" vertex="1">
          <mxGeometry width="210" height="40" relative="1" as="geometry">
            <mxPoint x="34" y="-16" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-34" value="" style="line;strokeWidth=1;dashed=1;labelPosition=center;verticalLabelPosition=bottom;align=left;verticalAlign=top;spacingLeft=20;spacingTop=15;html=1;whiteSpace=wrap;" parent="XH1Q3W5CKidq3MoOrYId-32" vertex="1">
          <mxGeometry y="62" width="460" height="10" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-38" value="&lt;p style=&quot;line-height: 110%;&quot;&gt;&lt;span style=&quot;font-size: 8px;&quot;&gt;[Else]&lt;/span&gt;&lt;/p&gt;" style="text;html=1;" parent="XH1Q3W5CKidq3MoOrYId-32" vertex="1">
          <mxGeometry x="3" y="50" width="27" height="50" as="geometry" />
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-36" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="955" y="376.5" as="sourcePoint" />
            <mxPoint x="1125" y="376.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-37" value="&lt;div style=&quot;text-align: left;&quot;&gt;render(RuntimeElementNode)&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-36" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-40" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;dashed=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="1125" y="398.5" as="sourcePoint" />
            <mxPoint x="955" y="398.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-41" value="Empty RenderOutput" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-40" vertex="1" connectable="0">
          <mxGeometry x="0.4685" y="1" relative="1" as="geometry">
            <mxPoint x="49" y="-11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-42" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;dashed=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="945" y="405.5" as="sourcePoint" />
            <mxPoint x="656" y="405.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-43" value="Empty RenderOutput" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-42" vertex="1" connectable="0">
          <mxGeometry x="0.4685" y="1" relative="1" as="geometry">
            <mxPoint x="79" y="-11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-44" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;dashed=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="646" y="452.5" as="sourcePoint" />
            <mxPoint x="455" y="452.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-45" value="RenderOutput" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-44" vertex="1" connectable="0">
          <mxGeometry x="0.4685" y="1" relative="1" as="geometry">
            <mxPoint x="44" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-46" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;dashed=1;rounded=0;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="945" y="441.5" as="sourcePoint" />
            <mxPoint x="656" y="441.5" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="XH1Q3W5CKidq3MoOrYId-47" value="RenderOutput with Atom" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="XH1Q3W5CKidq3MoOrYId-46" vertex="1" connectable="0">
          <mxGeometry x="0.4685" y="1" relative="1" as="geometry">
            <mxPoint x="81" y="-11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-5" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" target="WWn2rpnDwWi13MfnrQoF-4" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="459.9999999999998" y="555" as="sourcePoint" />
            <mxPoint x="464.9999999999998" y="584" as="targetPoint" />
            <Array as="points">
              <mxPoint x="621" y="555" />
              <mxPoint x="621" y="584" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-6" value="&lt;div style=&quot;text-align: left;&quot;&gt;get children&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="WWn2rpnDwWi13MfnrQoF-5" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint x="-76" y="-20" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-7" value="ContainerModel" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="660" y="480" width="100" height="350" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-8" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="WWn2rpnDwWi13MfnrQoF-7" vertex="1">
          <mxGeometry x="45" y="80" width="10" height="174" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-9" value="ElementModel" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="820" y="480" width="100" height="350" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-10" value="" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="WWn2rpnDwWi13MfnrQoF-9" vertex="1">
          <mxGeometry x="45" y="80" width="10" height="174" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-11" value="&lt;font style=&quot;font-size: 8px;&quot;&gt;alt&lt;/font&gt;" style="shape=umlFrame;whiteSpace=wrap;html=1;pointerEvents=0;recursiveResize=0;container=1;collapsible=0;width=30;height=20;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="150" y="593" width="370" height="177" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-12" value="&lt;p style=&quot;line-height: 80%;&quot;&gt;&lt;font style=&quot;font-size: 8px;&quot;&gt;[instance of component]&lt;/font&gt;&lt;/p&gt;" style="text;html=1;horizontal=1;verticalAlign=middle;" parent="WWn2rpnDwWi13MfnrQoF-11" vertex="1">
          <mxGeometry width="90" height="20" relative="1" as="geometry">
            <mxPoint x="30" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-13" value="" style="line;strokeWidth=1;dashed=1;labelPosition=center;verticalLabelPosition=bottom;align=left;verticalAlign=top;spacingLeft=20;spacingTop=15;html=1;whiteSpace=wrap;" parent="WWn2rpnDwWi13MfnrQoF-11" vertex="1">
          <mxGeometry y="92" width="370" height="10" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-15" value="&lt;p style=&quot;line-height: 80%;&quot;&gt;&lt;font style=&quot;font-size: 8px;&quot;&gt;[else]&lt;/font&gt;&lt;/p&gt;" style="text;html=1;horizontal=1;verticalAlign=middle;" parent="WWn2rpnDwWi13MfnrQoF-11" vertex="1">
          <mxGeometry x="1" y="97" width="29" height="20" as="geometry" />
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-7" value="&lt;p style=&quot;line-height: 70%;&quot;&gt;&lt;font style=&quot;font-size: 8px;&quot;&gt;loop: for evey child&lt;/font&gt;&lt;/p&gt;" style="shape=umlFrame;whiteSpace=wrap;html=1;pointerEvents=0;width=50;height=30;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="WWn2rpnDwWi13MfnrQoF-11" vertex="1">
          <mxGeometry x="60" y="105" width="270" height="65" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-16" value="&lt;font style=&quot;font-size: 8px;&quot;&gt;alt&lt;/font&gt;" style="shape=umlFrame;whiteSpace=wrap;html=1;pointerEvents=0;recursiveResize=0;container=1;collapsible=0;width=30;height=20;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="260" y="840" width="240" height="140" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-17" value="&lt;p style=&quot;line-height: 80%;&quot;&gt;&lt;font style=&quot;font-size: 8px;&quot;&gt;[closest container is page]&lt;/font&gt;&lt;/p&gt;" style="text;html=1;horizontal=1;verticalAlign=middle;" parent="WWn2rpnDwWi13MfnrQoF-16" vertex="1">
          <mxGeometry width="90" height="20" relative="1" as="geometry">
            <mxPoint x="30" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-18" value="" style="line;strokeWidth=1;dashed=1;labelPosition=center;verticalLabelPosition=bottom;align=left;verticalAlign=top;spacingLeft=20;spacingTop=15;html=1;whiteSpace=wrap;" parent="WWn2rpnDwWi13MfnrQoF-16" vertex="1">
          <mxGeometry y="62" width="240" height="10" as="geometry" />
        </mxCell>
        <mxCell id="WWn2rpnDwWi13MfnrQoF-19" value="&lt;p style=&quot;line-height: 80%;&quot;&gt;&lt;font style=&quot;font-size: 8px;&quot;&gt;[closest contianer is component]&lt;/font&gt;&lt;/p&gt;" style="text;html=1;horizontal=1;verticalAlign=middle;" parent="WWn2rpnDwWi13MfnrQoF-16" vertex="1">
          <mxGeometry x="1" y="67" width="29" height="20" as="geometry" />
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-1" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" target="XH1Q3W5CKidq3MoOrYId-10" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="437" y="650" as="sourcePoint" />
            <mxPoint x="285" y="650" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-2" value="addContainerNode(&lt;br&gt;&amp;nbsp; &amp;nbsp; staticContainerModel,&lt;br&gt;&amp;nbsp; &amp;nbsp; parentRuntimeElement,&lt;br&gt;&amp;nbsp; &amp;nbsp; staticParentChildren)" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];" parent="REx9z6_rn849p5gLiFLR-1" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint x="-72" y="-30" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-3" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;dashed=1;rounded=0;" parent="1" source="XH1Q3W5CKidq3MoOrYId-10" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="285" y="673.75" as="sourcePoint" />
            <mxPoint x="437" y="673.75" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-4" value="newly created runtimeContainer" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="REx9z6_rn849p5gLiFLR-3" vertex="1" connectable="0">
          <mxGeometry x="0.4685" y="1" relative="1" as="geometry">
            <mxPoint x="-37" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-5" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;rounded=0;" parent="1" target="XH1Q3W5CKidq3MoOrYId-10" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="437" y="731" as="sourcePoint" />
            <mxPoint x="285" y="731" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-6" value="addElementNode(&lt;br&gt;staticChild)" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];" parent="REx9z6_rn849p5gLiFLR-5" vertex="1" connectable="0">
          <mxGeometry x="-0.0117" relative="1" as="geometry">
            <mxPoint x="-50" y="-15" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-8" value="" style="html=1;verticalAlign=bottom;labelBackgroundColor=none;endArrow=block;endFill=1;dashed=1;rounded=0;" parent="1" source="XH1Q3W5CKidq3MoOrYId-10" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="285" y="753.75" as="sourcePoint" />
            <mxPoint x="437" y="753.75" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="REx9z6_rn849p5gLiFLR-9" value="newly created runtimeElement" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="REx9z6_rn849p5gLiFLR-8" vertex="1" connectable="0">
          <mxGeometry x="0.4685" y="1" relative="1" as="geometry">
            <mxPoint x="-37" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
  <diagram id="cKDJ-med8rCtDbiu6YN3" name="class-diagram">
    <mxGraphModel dx="1832" dy="1719" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-8" target="sHiqDn5GmMzHxa4ofvi1-11" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="985" y="900" as="targetPoint" />
            <Array as="points">
              <mxPoint x="724" y="820" />
              <mxPoint x="904" y="820" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=10;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-8" target="sHiqDn5GmMzHxa4ofvi1-10" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="724" y="820" />
              <mxPoint x="905" y="820" />
              <mxPoint x="905" y="910" />
              <mxPoint x="724" y="910" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-1" value="RuntimeContainerNodeModel" style="html=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="580" y="200" width="190" height="50" as="geometry" />
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-6" value="RuntimeElementModel" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="970" y="200" width="190" height="50" as="geometry" />
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-7" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="970" y="210" as="sourcePoint" />
            <mxPoint x="770" y="210" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-8" value="runtimeElements" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-7" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="-7" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-9" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-7" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="13" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-10" value="*" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-7" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="-1" y="-8" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-11" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;exitX=0;exitY=0.75;exitDx=0;exitDy=0;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" source="pH0DHsDNboKmxwCTMPaj-6" target="pH0DHsDNboKmxwCTMPaj-1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="980" y="230" as="sourcePoint" />
            <mxPoint x="780" y="230" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-12" value="runtimeParent" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-11" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="-7" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-13" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-11" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="13" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-14" value="*" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-11" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="-1" y="-8" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-15" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;exitX=0.79;exitY=1.002;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;exitPerimeter=0;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" source="pH0DHsDNboKmxwCTMPaj-1" target="pH0DHsDNboKmxwCTMPaj-1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="751.25" y="300" as="sourcePoint" />
            <mxPoint x="630" y="290" as="targetPoint" />
            <Array as="points">
              <mxPoint x="730" y="310" />
              <mxPoint x="675" y="310" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-16" value="runtimeContainerNodes" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-15" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="-8" y="10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-17" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-15" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="13" y="-5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-18" value="*" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="pH0DHsDNboKmxwCTMPaj-15" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="-4" y="5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-23" value="RuntimeContainerNodeModel" style="html=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;textOpacity=50;opacity=50;" parent="1" vertex="1">
          <mxGeometry x="-370" y="200" width="190" height="50" as="geometry" />
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-24" value="RuntimeElementModel" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;textOpacity=50;opacity=50;" parent="1" vertex="1">
          <mxGeometry x="20" y="200" width="190" height="50" as="geometry" />
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-29" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;fillColor=#e1d5e7;strokeColor=#9673a6;textOpacity=50;opacity=50;" parent="1" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="20" y="212" as="sourcePoint" />
            <mxPoint x="-180" y="212" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-30" value="runtimeRootElement" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-29" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="-12" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-31" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-29" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="13" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-32" value="*" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-29" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="-12" y="-8" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-37" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;exitX=1;exitY=0.75;exitDx=0;exitDy=0;fillColor=#e1d5e7;strokeColor=#9673a6;textOpacity=50;opacity=50;" parent="1" source="pH0DHsDNboKmxwCTMPaj-23" target="pH0DHsDNboKmxwCTMPaj-24" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="100" y="300" as="sourcePoint" />
            <mxPoint x="-100" y="300" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-38" value="runtimeChildren" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-37" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="12" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-39" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-37" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="-12" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-40" value="*" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-37" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="10" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-44" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;entryX=0.25;entryY=1;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;fillColor=#e1d5e7;strokeColor=#9673a6;textOpacity=50;opacity=50;" parent="1" source="pH0DHsDNboKmxwCTMPaj-24" target="pH0DHsDNboKmxwCTMPaj-24" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="70" y="380" as="sourcePoint" />
            <mxPoint x="85" y="350" as="targetPoint" />
            <Array as="points">
              <mxPoint x="115" y="310" />
              <mxPoint x="68" y="310" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-45" value="runtimeChildren" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-44" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="-6" y="10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-46" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-44" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="-15" y="-5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="pH0DHsDNboKmxwCTMPaj-47" value="*" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="pH0DHsDNboKmxwCTMPaj-44" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="10" y="3" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="eINiFpQEoDWat8VBW15k-1" value="StaticComponent" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="690" y="80" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-61" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;endArrow=block;endFill=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" source="8QumjKNLFnNuwXaDdLTI-1" target="sHiqDn5GmMzHxa4ofvi1-59" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-1" value="StaticElement" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="1020.5" y="80" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-58" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;endArrow=block;endFill=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" source="8QumjKNLFnNuwXaDdLTI-2" target="sHiqDn5GmMzHxa4ofvi1-56" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-2" value="StaticPage" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="869.75" y="80" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-3" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-59" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="645" y="80" as="sourcePoint" />
            <mxPoint x="645" y="200" as="targetPoint" />
            <Array as="points">
              <mxPoint x="645" y="-70" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-4" value="subtrees" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-3" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="-5" y="-3" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-5" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-3" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="8" y="17" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-6" value="*" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-3" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="66" y="5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-15" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.578;entryY=0.021;entryDx=0;entryDy=0;fillColor=#dae8fc;strokeColor=#6c8ebf;entryPerimeter=0;" parent="1" source="8QumjKNLFnNuwXaDdLTI-1" target="pH0DHsDNboKmxwCTMPaj-6" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="1493" y="80" as="sourcePoint" />
            <mxPoint x="1160" y="200" as="targetPoint" />
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-16" value="element" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-15" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint y="-7" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-17" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-15" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="8" y="-24" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-18" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-15" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="6" y="5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-19" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-56" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="675" y="80" as="sourcePoint" />
            <mxPoint x="675" y="200" as="targetPoint" />
            <Array as="points">
              <mxPoint x="675" y="10" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-20" value="container" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-19" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="35" y="-29" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-21" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-19" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="8" y="-14" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-22" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8QumjKNLFnNuwXaDdLTI-19" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="66" y="5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-28" value="StaticElement" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;textOpacity=50;opacity=50;" parent="1" vertex="1">
          <mxGeometry x="55" y="80" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-37" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;fillColor=#dae8fc;strokeColor=#6c8ebf;entryX=0.5;entryY=0;entryDx=0;entryDy=0;textOpacity=50;opacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-71" target="pH0DHsDNboKmxwCTMPaj-23" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="-275" y="80.00000000000023" as="sourcePoint" />
            <mxPoint x="-320" y="120" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-275" y="10" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-38" value="container" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="8QumjKNLFnNuwXaDdLTI-37" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="30" y="-30" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-39" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="8QumjKNLFnNuwXaDdLTI-37" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="9" y="-21" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-40" value="*" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="8QumjKNLFnNuwXaDdLTI-37" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="9" y="6" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-45" value="" style="endArrow=diamondThin;endFill=0;endSize=24;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#dae8fc;strokeColor=#6c8ebf;textOpacity=50;opacity=50;" parent="1" source="8QumjKNLFnNuwXaDdLTI-28" target="pH0DHsDNboKmxwCTMPaj-24" edge="1">
          <mxGeometry width="160" relative="1" as="geometry">
            <mxPoint x="114.58000000000004" y="70" as="sourcePoint" />
            <mxPoint x="114.58000000000004" y="191" as="targetPoint" />
            <Array as="points" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-46" value="element" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="8QumjKNLFnNuwXaDdLTI-45" vertex="1" connectable="0">
          <mxGeometry x="-0.1229" relative="1" as="geometry">
            <mxPoint x="-3" y="-6" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-47" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="8QumjKNLFnNuwXaDdLTI-45" vertex="1" connectable="0">
          <mxGeometry x="0.8257" y="-1" relative="1" as="geometry">
            <mxPoint x="7" y="-21" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="8QumjKNLFnNuwXaDdLTI-48" value="1" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="8QumjKNLFnNuwXaDdLTI-45" vertex="1" connectable="0">
          <mxGeometry x="-0.9171" y="-1" relative="1" as="geometry">
            <mxPoint x="6" y="5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-1" value="body" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="828.75" y="530" width="116.25" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-2" target="sHiqDn5GmMzHxa4ofvi1-5" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="888" y="510" />
              <mxPoint x="1055" y="510" />
              <mxPoint x="1055" y="610" />
              <mxPoint x="724" y="610" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" target="sHiqDn5GmMzHxa4ofvi1-7" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="887.5016077170418" y="470" as="sourcePoint" />
            <mxPoint x="1065" y="630" as="targetPoint" />
            <Array as="points">
              <mxPoint x="888" y="510" />
              <mxPoint x="1056" y="510" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-2" target="sHiqDn5GmMzHxa4ofvi1-6" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="888" y="510" />
              <mxPoint x="1055" y="510" />
              <mxPoint x="1055" y="610" />
              <mxPoint x="888" y="610" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-2" target="sHiqDn5GmMzHxa4ofvi1-8" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="755" y="500" as="sourcePoint" />
            <Array as="points">
              <mxPoint x="645" y="450" />
              <mxPoint x="645" y="760" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-18" value="RintimeContainerNodes" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="sHiqDn5GmMzHxa4ofvi1-17" vertex="1" connectable="0">
          <mxGeometry x="-0.609" y="4" relative="1" as="geometry">
            <mxPoint x="2" y="-4" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-2" value="page" style="html=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="828.75" y="430" width="116.25" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-5" value="child element 3&lt;br&gt;(instance of comp 1)" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="665" y="640" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-6" value="child element 2" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="828.75" y="640" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-7" value="child element 1" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="996" y="640" width="119" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-8" target="sHiqDn5GmMzHxa4ofvi1-5" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-20" value="RuntimeParent" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="sHiqDn5GmMzHxa4ofvi1-19" vertex="1" connectable="0">
          <mxGeometry x="-0.0564" y="-1" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-8" target="sHiqDn5GmMzHxa4ofvi1-9" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-22" value="RuntimeElements" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=#FFFFFF;" parent="sHiqDn5GmMzHxa4ofvi1-21" vertex="1" connectable="0">
          <mxGeometry x="-0.1416" relative="1" as="geometry">
            <mxPoint x="-2" y="-3" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-8" value="Comp 1" style="html=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="665" y="740" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-9" value="component root" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="665" y="840" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-10" value="child element 2" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="665" y="940" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-11" value="child element 1" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="846" y="940" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-2" target="sHiqDn5GmMzHxa4ofvi1-1" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-13" value="RuntimeElements" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="sHiqDn5GmMzHxa4ofvi1-12" vertex="1" connectable="0">
          <mxGeometry x="-0.1795" y="-1" relative="1" as="geometry">
            <mxPoint x="1" y="-1" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-47" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;textOpacity=50;opacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-27" target="sHiqDn5GmMzHxa4ofvi1-34" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-88" y="600" />
              <mxPoint x="-251" y="600" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-48" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;textOpacity=50;opacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-27" target="sHiqDn5GmMzHxa4ofvi1-35" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-49" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;textOpacity=50;opacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-27" target="sHiqDn5GmMzHxa4ofvi1-36" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-88" y="600" />
              <mxPoint x="81" y="600" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-50" value="RuntimeChildren" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="sHiqDn5GmMzHxa4ofvi1-49" vertex="1" connectable="0">
          <mxGeometry x="-0.8478" relative="1" as="geometry">
            <mxPoint y="-2" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-27" value="body" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-146.25" y="530" width="116.25" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-33" value="page" style="html=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-146.25" y="430" width="116.25" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-51" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;textOpacity=50;opacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-34" target="sHiqDn5GmMzHxa4ofvi1-41" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-52" value="RuntimeChildren" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="sHiqDn5GmMzHxa4ofvi1-51" vertex="1" connectable="0">
          <mxGeometry x="0.0014" y="1" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-34" value="child element 3&lt;br&gt;(instance of comp 1)" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-310" y="640" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-35" value="child element 2" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-146.25" y="640" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-36" value="child element 1" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="21" y="640" width="119" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-39" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;opacity=50;textOpacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-41" target="sHiqDn5GmMzHxa4ofvi1-42" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-40" value="RuntimeRootElement" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=#FFFFFF;textOpacity=50;" parent="sHiqDn5GmMzHxa4ofvi1-39" vertex="1" connectable="0">
          <mxGeometry x="-0.1416" relative="1" as="geometry">
            <mxPoint x="-2" y="-3" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-41" value="Comp 1" style="html=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-310" y="740" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-53" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;textOpacity=50;opacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-42" target="sHiqDn5GmMzHxa4ofvi1-43" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-54" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;textOpacity=50;opacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-42" target="sHiqDn5GmMzHxa4ofvi1-44" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-251" y="910" />
              <mxPoint x="-70" y="910" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-55" value="RuntimeChildren" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="sHiqDn5GmMzHxa4ofvi1-54" vertex="1" connectable="0">
          <mxGeometry x="-0.8286" y="2" relative="1" as="geometry">
            <mxPoint y="-5" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-42" value="component root" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-310" y="840" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-43" value="child element 2" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-310" y="940" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-44" value="child element 1" style="html=1;whiteSpace=wrap;fillColor=#fff2cc;strokeColor=#d6b656;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-129" y="940" width="117.5" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-45" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;opacity=50;textOpacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-33" target="sHiqDn5GmMzHxa4ofvi1-27" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-46" value="RuntimeRootElement" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];textOpacity=50;" parent="sHiqDn5GmMzHxa4ofvi1-45" vertex="1" connectable="0">
          <mxGeometry x="-0.1795" y="-1" relative="1" as="geometry">
            <mxPoint x="1" y="-1" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-60" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-56" target="sHiqDn5GmMzHxa4ofvi1-59" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="836" y="-30" />
              <mxPoint x="1080" y="-30" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-56" value="StaticContainer" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="776.25" y="-10" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-57" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;endArrow=block;endFill=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" source="eINiFpQEoDWat8VBW15k-1" target="sHiqDn5GmMzHxa4ofvi1-56" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-59" value="SubTree" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="1020" y="-90" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-67" value="StaticComponent" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-265" y="80" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-68" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;endArrow=block;endFill=1;fillColor=#dae8fc;strokeColor=#6c8ebf;opacity=50;textOpacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-69" target="sHiqDn5GmMzHxa4ofvi1-71" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-69" value="StaticPage" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-85.25" y="80" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-71" value="StaticContainer" style="html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;opacity=50;textOpacity=50;" parent="1" vertex="1">
          <mxGeometry x="-180" y="-10" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-72" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;endArrow=block;endFill=1;fillColor=#dae8fc;strokeColor=#6c8ebf;opacity=50;textOpacity=50;" parent="1" source="sHiqDn5GmMzHxa4ofvi1-67" target="sHiqDn5GmMzHxa4ofvi1-71" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sHiqDn5GmMzHxa4ofvi1-75" value="&lt;font style=&quot;font-size: 80px;&quot;&gt;Current&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="1" vertex="1">
          <mxGeometry x="699.75" y="-270" width="290" height="110" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
  <diagram id="Y6ep6_4rFip_h6NxUm0T" name="rendering flow chart ">
    <mxGraphModel dx="5232" dy="1719" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="kv6zbQ4E_pOpdboZQpdz-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="kv6zbQ4E_pOpdboZQpdz-1" target="kv6zbQ4E_pOpdboZQpdz-2" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="kv6zbQ4E_pOpdboZQpdz-1" value="RenderModel.render" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
          <mxGeometry x="-1037.5900000000001" y="-200" width="130" height="40" as="geometry" />
        </mxCell>
        <mxCell id="5eKJm5dKhdLg_Gj6tWDs-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="kv6zbQ4E_pOpdboZQpdz-2" target="5eKJm5dKhdLg_Gj6tWDs-1" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="kv6zbQ4E_pOpdboZQpdz-2" value="RuntimeContainerNode.render" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-1062.5900000000001" y="-120" width="180" height="40" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.25;entryDx=0;entryDy=0;exitX=0.75;exitY=1;exitDx=0;exitDy=0;" parent="1" source="5eKJm5dKhdLg_Gj6tWDs-1" target="_Iyk3ngRzhn9fWUdyX0j-2" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-902.5900000000001" y="185" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="5eKJm5dKhdLg_Gj6tWDs-1" target="4tHIPWkd4uBjSFziIRR4-1" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-979.19" y="15" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1042.19" y="15" />
              <mxPoint x="-1042.19" y="15" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="5eKJm5dKhdLg_Gj6tWDs-1" value="render" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="-1112.5900000000001" y="-40" width="280" height="40" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-1" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="-933.9100000000001" y="140" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.75;entryY=0;entryDx=0;entryDy=0;exitX=0;exitY=0.75;exitDx=0;exitDy=0;" parent="1" source="_Iyk3ngRzhn9fWUdyX0j-2" target="_Iyk3ngRzhn9fWUdyX0j-6" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-902.5900000000001" y="225" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-2" value="RenderPipe" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;" parent="1" vertex="1">
          <mxGeometry x="-799.19" y="165" width="120" height="80" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.25;entryY=0;entryDx=0;entryDy=0;exitX=1;exitY=0.75;exitDx=0;exitDy=0;" parent="1" source="_Iyk3ngRzhn9fWUdyX0j-13" target="_Iyk3ngRzhn9fWUdyX0j-6" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1018.2150000000001" y="280" as="sourcePoint" />
            <Array as="points">
              <mxPoint x="-1042.19" y="208" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.75;entryDx=0;entryDy=0;" parent="1" source="_Iyk3ngRzhn9fWUdyX0j-6" target="_Iyk3ngRzhn9fWUdyX0j-13" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-966.19" y="500" />
              <mxPoint x="-1377.19" y="500" />
              <mxPoint x="-1377.19" y="208" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-22" value="for each child" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="_Iyk3ngRzhn9fWUdyX0j-20" vertex="1" connectable="0">
          <mxGeometry x="0.5067" y="-3" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-6" value="React.createElement" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e3c800;strokeColor=#B09500;fontColor=#000000;" parent="1" vertex="1">
          <mxGeometry x="-1112.5900000000001" y="430" width="280" height="40" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-9" value="children&lt;br&gt;(ReactNode)" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e3c800;strokeColor=#B09500;fontColor=#000000;" parent="1" vertex="1">
          <mxGeometry x="-1080.5900000000001" y="300" width="78.75" height="80" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-12" value="render output&lt;br&gt;Atom + Props" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d80073;strokeColor=#A50040;fontColor=#ffffff;" parent="1" vertex="1">
          <mxGeometry x="-940.5900000000001" y="300" width="78.75" height="80" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="_Iyk3ngRzhn9fWUdyX0j-13" target="_Iyk3ngRzhn9fWUdyX0j-15" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1303.5900000000001" y="50" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-21" value="For each child" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="_Iyk3ngRzhn9fWUdyX0j-14" vertex="1" connectable="0">
          <mxGeometry x="-0.2371" y="-3" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-13" value="RuntimeElementNode.renderChildren" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="-1360.0900000000001" y="155" width="227.5" height="70" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="_Iyk3ngRzhn9fWUdyX0j-15" target="kv6zbQ4E_pOpdboZQpdz-2" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-18" value="Yes" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="_Iyk3ngRzhn9fWUdyX0j-16" vertex="1" connectable="0">
          <mxGeometry x="-0.3911" y="-3" relative="1" as="geometry">
            <mxPoint x="10" y="-3" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="_Iyk3ngRzhn9fWUdyX0j-15" target="5eKJm5dKhdLg_Gj6tWDs-1" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1252.5900000000001" y="-20" />
            </Array>
            <mxPoint x="-1182.5900000000001" y="-20" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-19" value="No" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="_Iyk3ngRzhn9fWUdyX0j-17" vertex="1" connectable="0">
          <mxGeometry x="0.2417" y="-1" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-15" value="is&lt;br&gt;Component" style="rhombus;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;" parent="1" vertex="1">
          <mxGeometry x="-1307.5900000000001" y="-135" width="110" height="70" as="geometry" />
        </mxCell>
        <mxCell id="_Iyk3ngRzhn9fWUdyX0j-23" value="ReactNode" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e3c800;strokeColor=#B09500;fontColor=#000000;" parent="1" vertex="1">
          <mxGeometry x="-1347.5900000000001" y="460" width="78.75" height="80" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.25;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-1" target="_Iyk3ngRzhn9fWUdyX0j-13" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-1" value="compute children" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="-1102.19" y="35" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-4" value="" style="rounded=1;whiteSpace=wrap;html=1;movable=1;resizable=1;rotatable=1;deletable=1;editable=1;locked=0;connectable=1;arcSize=6;fillColor=#FFEA2E;strokeColor=#d6b656;gradientColor=none;fillStyle=hatch;" parent="1" vertex="1">
          <mxGeometry x="-3450" y="-260" width="1900" height="969.5" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-7" value="&lt;font color=&quot;#ff6666&quot;&gt;*&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="-999.19" y="45" width="10" height="10" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-14" value="" style="group" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-1104.99" y="132" width="67.39999999999998" height="69" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-15" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="4tHIPWkd4uBjSFziIRR4-14" vertex="1">
          <mxGeometry width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-16" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="4tHIPWkd4uBjSFziIRR4-14" vertex="1">
          <mxGeometry x="2" y="2" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-17" value="Runtime&lt;div&gt;Container&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="4tHIPWkd4uBjSFziIRR4-14" vertex="1">
          <mxGeometry x="4" y="4" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-13" value="" style="group;fontSize=13;" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-1069.19" y="95" width="67.39999999999998" height="69" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-10" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="4tHIPWkd4uBjSFziIRR4-13" vertex="1">
          <mxGeometry width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-11" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="4tHIPWkd4uBjSFziIRR4-13" vertex="1">
          <mxGeometry x="2" y="2" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-12" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="4tHIPWkd4uBjSFziIRR4-13" vertex="1">
          <mxGeometry x="4" y="4" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-18" target="R_athaa2V95gyXuJbiak-14" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-2617" y="55" />
              <mxPoint x="-2617" y="90" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-21" value="YES" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="4tHIPWkd4uBjSFziIRR4-20" vertex="1" connectable="0">
          <mxGeometry x="-0.2096" y="1" relative="1" as="geometry">
            <mxPoint x="-69" y="1" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-18" target="jNEkG2hTFtdNsukyUM2E-7" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-3070" y="99" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-24" value="No" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="4tHIPWkd4uBjSFziIRR4-23" vertex="1" connectable="0">
          <mxGeometry x="-0.327" y="2" relative="1" as="geometry">
            <mxPoint x="59" y="-2" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-58" value="For each&lt;div&gt;child of&lt;div&gt;current&lt;/div&gt;&lt;div&gt;element&lt;/div&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="4tHIPWkd4uBjSFziIRR4-23" vertex="1" connectable="0">
          <mxGeometry x="0.458" y="1" relative="1" as="geometry">
            <mxPoint x="14" y="-6" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-18" value="is current element an&lt;div&gt;instance of component&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-2977" y="10" width="165" height="90" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-19" target="4tHIPWkd4uBjSFziIRR4-54" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-2690" y="167" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-2770" y="270" />
              <mxPoint x="-2770" y="270" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-19" value="Create new RuntimeContainerNode" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-2850" y="190" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-39" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-34" target="4tHIPWkd4uBjSFziIRR4-38" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-34" value="Create new RuntimeElementNode" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-3400" y="200" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-43" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-36" target="4tHIPWkd4uBjSFziIRR4-41" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-2770" y="520" />
              <mxPoint x="-2895" y="520" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-36" value="Attach child as SubTrees to the&amp;nbsp;&lt;span style=&quot;background-color: initial;&quot;&gt;new container&lt;/span&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-2850" y="389" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-38" target="4tHIPWkd4uBjSFziIRR4-41" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-3320" y="520" />
              <mxPoint x="-2895" y="520" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-38" value="attach children to the closest RuntimeContainer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-3400" y="284" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-40" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="4tHIPWkd4uBjSFziIRR4-41" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-2895" y="670" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-2895" y="660" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-41" value="Add to children list" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="-2975" y="584.5" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-64" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=-0.006;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-74" target="jNEkG2hTFtdNsukyUM2E-7" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-2010" y="-360" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-2327" y="360" />
              <mxPoint x="-2190" y="360" />
              <mxPoint x="-2190" y="-130" />
              <mxPoint x="-3167" y="-130" />
              <mxPoint x="-3167" y="89" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-65" value="for each" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="4tHIPWkd4uBjSFziIRR4-64" vertex="1" connectable="0">
          <mxGeometry x="-0.0238" relative="1" as="geometry">
            <mxPoint x="31" y="435" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-75" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-53" target="4tHIPWkd4uBjSFziIRR4-74" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-53" value="is current element set as content container" style="rhombus;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-2410" y="10" width="165" height="90" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-59" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-54" target="4tHIPWkd4uBjSFziIRR4-36" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-2690" y="220" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-60" value="For each static child element in current element" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="4tHIPWkd4uBjSFziIRR4-59" vertex="1" connectable="0">
          <mxGeometry x="0.2857" y="2" relative="1" as="geometry">
            <mxPoint x="-2" y="-10" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-54" value="Attach new container to the closest RuntimeContainer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-2850" y="273" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-57" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-55" target="4tHIPWkd4uBjSFziIRR4-18" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-62" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-55" target="4tHIPWkd4uBjSFziIRR4-53" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-37" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-55" target="R_athaa2V95gyXuJbiak-5" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-55" value="Find Closest RuntimeContainer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
          <mxGeometry x="-2770" y="-70" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-56" value="" style="group" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-2612.5" y="-230" width="270" height="30" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-6" value="&lt;font style=&quot;font-size: 41px;&quot;&gt;compute children&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="4tHIPWkd4uBjSFziIRR4-56" vertex="1">
          <mxGeometry x="-67.5" y="10" width="340" height="30" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-8" value="&lt;font style=&quot;font-size: 60px;&quot; color=&quot;#ff6666&quot;&gt;*&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="4tHIPWkd4uBjSFziIRR4-56" vertex="1">
          <mxGeometry x="242.5" y="-10" width="50" height="50" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-70" value="" style="group;fontSize=13;" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-2360" y="180" width="67.39999999999998" height="69" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-71" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="4tHIPWkd4uBjSFziIRR4-70" vertex="1">
          <mxGeometry width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-72" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="4tHIPWkd4uBjSFziIRR4-70" vertex="1">
          <mxGeometry x="2" y="2" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-73" value="&lt;div&gt;Static&lt;/div&gt;&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="4tHIPWkd4uBjSFziIRR4-70" vertex="1">
          <mxGeometry x="4" y="4" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-74" value="get Subtrees attached to closest runtime container" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-2407.5" y="123" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="jNEkG2hTFtdNsukyUM2E-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="jNEkG2hTFtdNsukyUM2E-7" target="4tHIPWkd4uBjSFziIRR4-34" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-3320" y="135" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-9" value="No" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="jNEkG2hTFtdNsukyUM2E-8" vertex="1" connectable="0">
          <mxGeometry x="-0.4444" y="3" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="jNEkG2hTFtdNsukyUM2E-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="jNEkG2hTFtdNsukyUM2E-7" target="4tHIPWkd4uBjSFziIRR4-41" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-3030" y="135" />
              <mxPoint x="-3030" y="520" />
              <mxPoint x="-2895" y="520" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-8" value="Yes" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="jNEkG2hTFtdNsukyUM2E-9" vertex="1" connectable="0">
          <mxGeometry x="-0.8756" y="-3" relative="1" as="geometry">
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="jNEkG2hTFtdNsukyUM2E-7" value="exists in closest RuntimeContainer&#39;s&lt;div&gt;cache?&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-3250" y="90" width="165" height="90" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-46" value="" style="group;fontSize=13;" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-3000" y="480" width="67.39999999999998" height="69" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-47" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="4tHIPWkd4uBjSFziIRR4-46" vertex="1">
          <mxGeometry width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-48" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="4tHIPWkd4uBjSFziIRR4-46" vertex="1">
          <mxGeometry x="2" y="2" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-49" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="4tHIPWkd4uBjSFziIRR4-46" vertex="1">
          <mxGeometry x="4" y="4" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-1" value="" style="group;fontSize=13;" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-3090" y="21" width="67.39999999999998" height="69" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-2" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="R_athaa2V95gyXuJbiak-1" vertex="1">
          <mxGeometry width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-3" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="R_athaa2V95gyXuJbiak-1" vertex="1">
          <mxGeometry x="2" y="2" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-4" value="&lt;div&gt;Static&lt;/div&gt;&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="R_athaa2V95gyXuJbiak-1" vertex="1">
          <mxGeometry x="4" y="4" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="R_athaa2V95gyXuJbiak-5" target="R_athaa2V95gyXuJbiak-20" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-1740" y="130" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1740" y="55" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-7" value="Yes" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="R_athaa2V95gyXuJbiak-6" vertex="1" connectable="0">
          <mxGeometry x="0.0457" y="-3" relative="1" as="geometry">
            <mxPoint x="-38" y="-32" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-13" value="for each item in the array" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="R_athaa2V95gyXuJbiak-6" vertex="1" connectable="0">
          <mxGeometry x="0.5965" y="-2" relative="1" as="geometry">
            <mxPoint y="-66" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="R_athaa2V95gyXuJbiak-5" target="R_athaa2V95gyXuJbiak-12" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-2060" y="120" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-11" value="No" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="R_athaa2V95gyXuJbiak-10" vertex="1" connectable="0">
          <mxGeometry x="-0.3466" y="1" relative="1" as="geometry">
            <mxPoint x="-17" y="-3" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-5" value="child mapper prop exists?" style="rhombus;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-1980" y="10" width="165" height="90" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-12" value="Do nothing" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="-2100" y="120" width="80" height="30" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="R_athaa2V95gyXuJbiak-14" target="4tHIPWkd4uBjSFziIRR4-19" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-2770" y="135" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-16" value="No" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="R_athaa2V95gyXuJbiak-15" vertex="1" connectable="0">
          <mxGeometry x="-0.1716" y="4" relative="1" as="geometry">
            <mxPoint y="-4" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="R_athaa2V95gyXuJbiak-14" target="4tHIPWkd4uBjSFziIRR4-41" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-2490" y="135" />
              <mxPoint x="-2490" y="520" />
              <mxPoint x="-2895" y="520" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-18" value="Yes" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="R_athaa2V95gyXuJbiak-17" vertex="1" connectable="0">
          <mxGeometry x="-0.9481" y="-4" relative="1" as="geometry">
            <mxPoint y="-4" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-14" value="exists in closest RuntimeContainer&#39;s&lt;div&gt;cache?&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry x="-2700" y="90" width="165" height="90" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-19" value="&lt;div&gt;Static&lt;/div&gt;&lt;div&gt;Component&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="-2753.3999999999996" y="20.5" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="4tHIPWkd4uBjSFziIRR4-50" value="Runtime&lt;div&gt;Container&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-2860" y="485" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="R_athaa2V95gyXuJbiak-20" target="R_athaa2V95gyXuJbiak-22" edge="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-20" value="Create new RuntimeContainerNode" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-1820" y="187.5" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="R_athaa2V95gyXuJbiak-22" target="R_athaa2V95gyXuJbiak-28" edge="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="-1740" y="576" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-38" value="for each newly created node" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="R_athaa2V95gyXuJbiak-29" vertex="1" connectable="0">
          <mxGeometry x="0.356" y="-1" relative="1" as="geometry">
            <mxPoint x="-40" y="31" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-39" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="R_athaa2V95gyXuJbiak-22" target="4tHIPWkd4uBjSFziIRR4-41" edge="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="-2520" y="650" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1740" y="440" />
              <mxPoint x="-1950" y="440" />
              <mxPoint x="-1950" y="520" />
              <mxPoint x="-2895" y="520" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-22" value="Attach new container to the closest RuntimeContainer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-1820" y="280" width="160" height="41" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-23" value="&lt;div&gt;Static&lt;/div&gt;&lt;div&gt;Component&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
          <mxGeometry x="-1775.8500000000001" y="98" width="71.7" height="68" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-28" value="delete any cached node having the same index as the newly created node" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
          <mxGeometry x="-1835.1499999999999" y="575.5" width="190.3" height="50" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-33" value="" style="group" parent="1" vertex="1" connectable="0">
          <mxGeometry x="-1775.8499999999997" y="344" width="67.39999999999998" height="69" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-34" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="R_athaa2V95gyXuJbiak-33" vertex="1">
          <mxGeometry width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-35" value="Runtime&lt;div&gt;Element&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="R_athaa2V95gyXuJbiak-33" vertex="1">
          <mxGeometry x="2" y="2" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-36" value="Runtime&lt;div&gt;Container&lt;/div&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="R_athaa2V95gyXuJbiak-33" vertex="1">
          <mxGeometry x="4" y="4" width="63.4" height="65" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-44" value="Return the list" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="-2937" y="665" width="84" height="30" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-45" value="&lt;font style=&quot;font-size: 80px;&quot;&gt;Rendering flow chart&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="-1400" y="-560" width="755" height="30" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-46" value="&lt;font style=&quot;font-size: 60px;&quot;&gt;High Level&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="-1180" y="-390" width="360" height="30" as="geometry" />
        </mxCell>
        <mxCell id="R_athaa2V95gyXuJbiak-47" value="&lt;font style=&quot;font-size: 60px;&quot;&gt;High Level&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="330" y="-390" width="360" height="30" as="geometry" />
        </mxCell>
        <mxCell id="Yzu-_Kt0Tu45RbOJ3_MM-1" value="" style="curved=1;endArrow=none;html=1;rounded=0;endFill=0;fillColor=#60a917;strokeColor=#82B366;strokeWidth=6;dashed=1;entryX=0;entryY=0;entryDx=0;entryDy=0;exitX=0.989;exitY=0.013;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-4" target="4tHIPWkd4uBjSFziIRR4-1" edge="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="-2325" y="-445.63" as="sourcePoint" />
            <mxPoint x="-1275" y="-600" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1470" y="-70" />
              <mxPoint x="-1180" y="70" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="Yzu-_Kt0Tu45RbOJ3_MM-2" value="" style="curved=1;endArrow=none;html=1;rounded=0;endFill=0;fillColor=#60a917;strokeColor=#82B366;strokeWidth=6;dashed=1;entryX=0;entryY=1;entryDx=0;entryDy=0;exitX=0.999;exitY=0.971;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="4tHIPWkd4uBjSFziIRR4-4" target="4tHIPWkd4uBjSFziIRR4-1" edge="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="-1561" y="-237" as="sourcePoint" />
            <mxPoint x="-1092" y="45" as="targetPoint" />
            <Array as="points">
              <mxPoint x="-1560" y="-30" />
            </Array>
          </mxGeometry>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
  <diagram id="tC5XvlV2PizadYa8za_t" name="runtime-schema">
    <mxGraphModel dx="786" dy="495" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="NQOU99vVYn--T0qDfMhu-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;startArrow=ERmandOne;startFill=0;endArrow=ERoneToMany;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-2" target="NQOU99vVYn--T0qDfMhu-5">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="280.29" y="450" />
              <mxPoint x="280.29" y="450" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-18" value="Must contain root element" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="NQOU99vVYn--T0qDfMhu-17">
          <mxGeometry x="0.4" y="2" relative="1" as="geometry">
            <mxPoint x="70" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-56" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=ERmandOne;startFill=0;endArrow=ERmandOne;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-2" target="NQOU99vVYn--T0qDfMhu-55">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-2" value="Page" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="230" y="360" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-22" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0;entryDx=0;entryDy=0;startArrow=ERzeroToOne;startFill=0;endArrow=ERzeroToOne;endFill=0;exitX=0;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-5" target="NQOU99vVYn--T0qDfMhu-23">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="280.29" y="560" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-25" value="firstChild" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="NQOU99vVYn--T0qDfMhu-22">
          <mxGeometry x="-0.8083" y="1" relative="1" as="geometry">
            <mxPoint x="-15" y="-11" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-26" value="parentElement" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="NQOU99vVYn--T0qDfMhu-22">
          <mxGeometry x="0.6083" y="1" relative="1" as="geometry">
            <mxPoint x="15" y="9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-37" value="" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=ERmandOne;startFill=0;endArrow=ERmandOne;endFill=0;entryX=1;entryY=1;entryDx=0;entryDy=0;exitX=0;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-5" target="NQOU99vVYn--T0qDfMhu-36">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-50" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;startArrow=ERzeroToOne;startFill=0;endArrow=ERzeroToOne;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-5" target="NQOU99vVYn--T0qDfMhu-47">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-52" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;startArrow=ERzeroToOne;startFill=0;endArrow=ERzeroToOne;endFill=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-5" target="NQOU99vVYn--T0qDfMhu-42">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-5" value="Element" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="230" y="470" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-11" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://i.stack.imgur.com/rb3Ig.jpg;" vertex="1" parent="1">
          <mxGeometry x="10" y="10" width="187.71" height="150" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;startArrow=ERmandOne;startFill=0;endArrow=ERzeroToMany;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-12" target="NQOU99vVYn--T0qDfMhu-13">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-43" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=ERmandOne;startFill=0;endArrow=ERzeroToMany;endFill=0;entryX=0.104;entryY=0.045;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-12" target="NQOU99vVYn--T0qDfMhu-42">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-12" value="User" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="229.99999999999997" y="160" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;startArrow=ERmandOne;startFill=0;endArrow=ERoneToMany;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-13" target="NQOU99vVYn--T0qDfMhu-2">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-16" value="Must contain system pages" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="NQOU99vVYn--T0qDfMhu-15">
          <mxGeometry x="0.4593" relative="1" as="geometry">
            <mxPoint x="72" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-13" value="App" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="230" y="250" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;startArrow=ERzeroToOne;startFill=0;endArrow=ERzeroToOne;endFill=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-23" target="NQOU99vVYn--T0qDfMhu-29">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="362.29" y="610" as="sourcePoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-31" value="nextSibling" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="NQOU99vVYn--T0qDfMhu-30">
          <mxGeometry x="-0.5772" relative="1" as="geometry">
            <mxPoint x="40" y="-9" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-32" value="prevSibling" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="NQOU99vVYn--T0qDfMhu-30">
          <mxGeometry x="0.7564" y="2" relative="1" as="geometry">
            <mxPoint x="38" y="4" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-23" value="Element" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry y="510" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-29" value="Element" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry y="640" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-36" value="Prop" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry y="430" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-62" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=ERmandOne;startFill=0;endArrow=ERmandOne;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-38" target="NQOU99vVYn--T0qDfMhu-61">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-66" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=ERmandOne;startFill=0;endArrow=ERzeroToOne;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-38" target="NQOU99vVYn--T0qDfMhu-65">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-38" value="RuntimeElement" style="whiteSpace=wrap;html=1;align=center;direction=west;" vertex="1" parent="1">
          <mxGeometry x="800" y="480" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-58" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.25;entryY=0;entryDx=0;entryDy=0;startArrow=ERzeroToOne;startFill=0;endArrow=ERmandOne;endFill=0;exitX=0.25;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="830" y="410" as="sourcePoint" />
            <mxPoint x="830" y="480" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-60" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=ERmandOne;startFill=0;endArrow=ERmandOne;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-39" target="NQOU99vVYn--T0qDfMhu-59">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-39" value="RuntimePage" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="800" y="370" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-42" value="Component" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="460" y="470" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-48" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=ERmandOne;startFill=0;endArrow=ERoneToMany;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-46" target="NQOU99vVYn--T0qDfMhu-47">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="280" y="660" />
              <mxPoint x="280" y="660" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-46" value="Admin" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="227.5" y="700" width="105" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-47" value="Atom" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="227.5" y="590" width="105" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-55" value="Store" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="460" y="360" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-57" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.904;exitY=0.995;exitDx=0;exitDy=0;exitPerimeter=0;startArrow=ERmandOne;startFill=0;endArrow=ERmandOne;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-55">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="550" y="470" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-59" value="RuntimeStore" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="640" y="480" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-61" value="RuntimeProp" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="980" y="480" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-69" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;startArrow=ERmandOne;startFill=0;endArrow=ERmandOne;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-65" target="NQOU99vVYn--T0qDfMhu-61">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-70" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;startArrow=ERmandOne;startFill=0;endArrow=ERmandOne;endFill=0;" edge="1" parent="1" source="NQOU99vVYn--T0qDfMhu-65" target="NQOU99vVYn--T0qDfMhu-59">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-65" value="RuntimeComponent" style="whiteSpace=wrap;html=1;align=center;" vertex="1" parent="1">
          <mxGeometry x="800" y="600" width="100" height="40" as="geometry" />
        </mxCell>
        <mxCell id="NQOU99vVYn--T0qDfMhu-71" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=ERmandOne;startFill=0;endArrow=ERoneToMany;endFill=0;" edge="1" parent="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="860" y="480" as="sourcePoint" />
            <mxPoint x="900" y="480" as="targetPoint" />
            <Array as="points">
              <mxPoint x="860" y="480" />
              <mxPoint x="860" y="440" />
              <mxPoint x="900" y="440" />
            </Array>
          </mxGeometry>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>