<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-7.5 -8 542.3125 796.234375" height="796.234375" xmlns="http://www.w3.org/2000/svg" width="542.3125" id="container"><style>#container{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#container .error-icon{fill:#552222;}#container .error-text{fill:#552222;stroke:#552222;}#container .edge-thickness-normal{stroke-width:2px;}#container .edge-thickness-thick{stroke-width:3.5px;}#container .edge-pattern-solid{stroke-dasharray:0;}#container .edge-pattern-dashed{stroke-dasharray:3;}#container .edge-pattern-dotted{stroke-dasharray:2;}#container .marker{fill:#333333;stroke:#333333;}#container .marker.cross{stroke:#333333;}#container svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#container .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#container .cluster-label text{fill:#333;}#container .cluster-label span,#container p{color:#333;}#container .label text,#container span,#container p{fill:#333;color:#333;}#container .node rect,#container .node circle,#container .node ellipse,#container .node polygon,#container .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#container .flowchart-label text{text-anchor:middle;}#container .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#container .node .label{text-align:center;}#container .node.clickable{cursor:pointer;}#container .arrowheadPath{fill:#333333;}#container .edgePath .path{stroke:#333333;stroke-width:2.0px;}#container .flowchart-link{stroke:#333333;fill:none;}#container .edgeLabel{background-color:#e8e8e8;text-align:center;}#container .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#container .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#container .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#container .cluster text{fill:#333;}#container .cluster span,#container p{color:#333;}#container div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#container .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#container :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="container_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="container_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="container_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(-7.5, -8)" class="root"><g class="clusters"><g id="Components" class="cluster default flowchart-label"><rect height="780.234375" width="526.3125" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(225.5234375, 8)" class="cluster-label"><foreignObject height="19" width="91.265625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Components</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(25.5, 35)" class="root"><g class="clusters"><g id="subGraph0" class="cluster default flowchart-label"><rect height="114.078125" width="476.3125" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(225.4375, 8)" class="cluster-label"><foreignObject height="19" width="41.4375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 1</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(75.0390625, 65.0390625)" data-id="b1" data-node="true" id="flowchart-b1-0" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(189.1171875, 65.0390625)" data-id="b2" data-node="true" id="flowchart-b2-1" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(303.1953125, 65.0390625)" data-id="b3" data-node="true" id="flowchart-b3-2" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(417.2734375, 65.0390625)" data-id="b4" data-node="true" id="flowchart-b4-3" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g></g></g><g transform="translate(139.578125, 199.078125)" class="root"><g class="clusters"><g id="subGraph1" class="cluster default flowchart-label"><rect height="114.078125" width="248.15625" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(110.8671875, 8)" class="cluster-label"><foreignObject height="19" width="42.421875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 2</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(75.0390625, 65.0390625)" data-id="b5" data-node="true" id="flowchart-b5-4" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(189.1171875, 65.0390625)" data-id="b6" data-node="true" id="flowchart-b6-5" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g></g></g><g transform="translate(177.0078125, 363.15625)" class="root"><g class="clusters"><g id="subGraph2" class="cluster default flowchart-label"><rect height="84" width="173.296875" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(73.40625, 8)" class="cluster-label"><foreignObject height="19" width="42.484375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 3</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(94.6484375, 50)" data-id="m1" data-node="true" id="flowchart-m1-6" class="node default default flowchart-label"><rect height="34" width="103.296875" y="-17" x="-51.6484375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-44.1484375, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="88.296875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Select Menu</span></div></foreignObject></g></g></g></g><g transform="translate(82.5390625, 497.15625)" class="root"><g class="clusters"><g id="subGraph3" class="cluster default flowchart-label"><rect height="114.078125" width="362.234375" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(167.609375, 8)" class="cluster-label"><foreignObject height="19" width="43.015625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 4</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(75.0390625, 65.0390625)" data-id="b7" data-node="true" id="flowchart-b7-7" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(189.1171875, 65.0390625)" data-id="b8" data-node="true" id="flowchart-b8-8" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g><g transform="translate(303.1953125, 65.0390625)" data-id="b9" data-node="true" id="flowchart-b9-9" class="node default default flowchart-label"><circle height="34" width="64.078125" r="32.0390625" ry="0" rx="0" style=""></circle><g transform="translate(-24.5390625, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="49.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Button</span></div></foreignObject></g></g></g></g><g transform="translate(177.0078125, 661.234375)" class="root"><g class="clusters"><g id="subGraph4" class="cluster default flowchart-label"><rect height="84" width="173.296875" y="8" x="8" ry="0" rx="0" style=""></rect><g transform="translate(73.390625, 8)" class="cluster-label"><foreignObject height="19" width="42.515625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Row 5</span></div></foreignObject></g></g></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g transform="translate(94.6484375, 50)" data-id="m2" data-node="true" id="flowchart-m2-10" class="node default default flowchart-label"><rect height="34" width="103.296875" y="-17" x="-51.6484375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-44.1484375, -9.5)" style="" class="label"><rect></rect><foreignObject height="19" width="88.296875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Select Menu</span></div></foreignObject></g></g></g></g></g></g></g></g></g></svg>
0 commit comments