key.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="721px" height="991px" viewBox="-0.5 -0.5 721 991" content="&lt;mxfile&gt;&lt;diagram id=&quot;JAabDbVQ3hAPyOzEe2bT&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs>
        <clipPath id="mx-clip-334-661-132-26-0">
            <rect x="334" y="661" width="132" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-334-687-132-26-0">
            <rect x="334" y="687" width="132" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-334-713-132-26-0">
            <rect x="334" y="713" width="132" height="26"/>
        </clipPath>
    </defs>
    <g>
        <rect x="230" y="0" width="230" height="20" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 10px; margin-left: 231px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <font style="font-size: 16px">
                                    <b>
                                        Key for flowcharts
                                    </b>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="345" y="14" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Key for flowcharts
                </text>
            </switch>
        </g>
        <path d="M 120 145 L 260 145 L 263.63 145" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 268.88 145 L 261.88 148.5 L 263.63 145 L 261.88 141.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 145px; margin-left: 195px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">
                                Yes
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="195" y="148" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Yes
                </text>
            </switch>
        </g>
        <path d="M 75 200 L 75 270 L 75 273.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 75 278.88 L 71.5 271.88 L 75 273.63 L 78.5 271.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 240px; margin-left: 75px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">
                                No
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="75" y="243" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    No
                </text>
            </switch>
        </g>
        <path d="M 75 90 L 120 145 L 75 200 L 30 145 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 145px; margin-left: 31px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <font style="font-size: 10px">
                                    Question with several
                                    <br/>
                                    outcomes
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="75" y="149" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Question with s...
                </text>
            </switch>
        </g>
        <path d="M 15 400 L 35 340 L 115 340 L 135 400 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 370px; margin-left: 16px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Warning with ref to text number
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="75" y="374" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Warning with ref to...
                </text>
            </switch>
        </g>
        <a xlink:href="https://www.dropbox.com/s/v2fymi8i0cdrffv/Extracted%20Texts%20from%20Zeplin.xlsx?dl=0">
            <path d="M 480 107.5 L 610 107.5 L 610 171.25 Q 577.5 151 545 171.25 Q 512.5 191.5 480 171.25 L 480 118.75 Z" fill="#1ba1e2" stroke="#006eaf" stroke-miterlimit="10" pointer-events="all"/>
            <g transform="translate(-0.5 -0.5)">
                <switch>
                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 134px; margin-left: 481px;">
                            <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                                <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                    Text file - extracted texts in Excel (until text tool)
                                    <br/>
                                    (Click to open the file)
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                    <text x="545" y="137" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                        Text file - extracted...
                    </text>
                </switch>
            </g>
        </a>
        <path d="M 510 220 C 486 220 480 240 499.2 244 C 480 252.8 501.6 272 517.2 264 C 528 280 564 280 576 264 C 600 264 600 248 585 240 C 600 224 576 208 555 216 C 540 204 516 204 510 220 Z" fill="#d80073" stroke="#a50040" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 240px; margin-left: 481px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Ref to Zeplin showing details
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="540" y="244" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Ref to Zeplin showin...
                </text>
            </switch>
        </g>
        <rect x="490" y="320" width="100" height="20" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 330px; margin-left: 491px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Ref to component
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="540" y="334" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Ref to component
                </text>
            </switch>
        </g>
        <rect x="15" y="440" width="120" height="60" rx="9" ry="9" fill="#76608a" stroke="#432d57" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 470px; margin-left: 16px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Process for creator to do
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="75" y="474" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Process for creator...
                </text>
            </switch>
        </g>
        <rect x="15" y="520" width="120" height="60" rx="9" ry="9" fill="#a0522d" stroke="#6d1f00" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 550px; margin-left: 16px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Process for programmer to do
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="75" y="554" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Process for programm...
                </text>
            </switch>
        </g>
        <path d="M 40 720 L 120 720 L 120 780 L 10 780 L 10 750 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 750px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Tab option
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="65" y="754" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Tab option
                </text>
            </switch>
        </g>
        <path d="M 10 810 L 70 850 L 10 890 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 850px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Continue
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="40" y="854" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Continue
                </text>
            </switch>
        </g>
        <ellipse cx="35" cy="955" rx="35" ry="35" fill="#ffffff" stroke="#000000" pointer-events="all"/>
        <ellipse cx="35" cy="955" rx="31" ry="31" fill="none" stroke="#000000" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 60px; height: 1px; padding-top: 955px; margin-left: 5px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Radio buttons
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="35" y="959" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Radio butt...
                </text>
            </switch>
        </g>
        <path d="M 30 630 L 110 630 L 130 655 L 110 680 L 30 680 L 10 655 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 655px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Item in list
                                <br/>
                                (menu item)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="70" y="659" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Item in list...
                </text>
            </switch>
        </g>
        <path d="M 160 820 L 280 820 L 280 870 L 240 870 L 220 900 L 220 870 L 160 870 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 845px; margin-left: 161px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Comment
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="220" y="849" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Comment
                </text>
            </switch>
        </g>
        <ellipse cx="540" cy="520" rx="60" ry="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 520px; margin-left: 481px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Anything in green is a starting point
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="540" y="524" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Anything in green is...
                </text>
            </switch>
        </g>
        <rect x="620" y="230" width="100" height="20" fill="#d80073" stroke="#a50040" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 240px; margin-left: 621px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Ref to zeplin
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="670" y="244" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Ref to zeplin
                </text>
            </switch>
        </g>
        <rect x="190" y="625" width="120" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/>
        <path d="M 202 625 L 202 685 M 298 625 L 298 685" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 94px; height: 1px; padding-top: 655px; margin-left: 203px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Entity in list
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="250" y="659" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Entity in list
                </text>
            </switch>
        </g>
        <rect x="490" y="370" width="100" height="20" fill="#e51400" stroke="#b20000" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 380px; margin-left: 491px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Ref to module
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="540" y="384" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Ref to module
                </text>
            </switch>
        </g>
        <path d="M 595 640 L 693.63 640" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 698.88 640 L 691.88 643.5 L 693.63 640 L 691.88 636.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 640px; margin-left: 648px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">
                                On click
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="648" y="643" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    On click
                </text>
            </switch>
        </g>
        <path d="M 495 610 L 595 610 L 595 670 L 495 670 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 495 670 L 495 610 L 505 620 L 505 660 Z" fill="#ffffff" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 495 610 L 595 610 L 585 620 L 505 620 Z" fill="#ffffff" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 595 610 L 595 670 L 585 660 L 585 620 Z" fill="#ffffff" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 495 670 L 505 660 L 585 660 L 595 670 Z" fill="#ffffff" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 495 670 L 495 610 L 505 620 L 505 660 Z" fill="#ffffff" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 640px; margin-left: 545px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">
                                Button
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="545" y="644" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Button
                </text>
            </switch>
        </g>
        <path d="M 597.75 728.5 L 643.9 728.5 L 683.63 728.45" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 688.88 728.44 L 681.89 731.95 L 683.63 728.45 L 681.88 724.95 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 728px; margin-left: 644px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">
                                On click
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="644" y="732" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    On click
                </text>
            </switch>
        </g>
        <rect x="492.25" y="720" width="105.5" height="16.88" rx="2.53" ry="2.53" fill="#ffffff" stroke="#666666" stroke-width="2" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 104px; height: 1px; padding-top: 728px; margin-left: 493px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <font color="#3333ff">
                                    <u>
                                        Link
                                    </u>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="545" y="731" fill="#ffffff" font-family="Helvetica" font-size="10px" text-anchor="middle">
                    Link
                </text>
            </switch>
        </g>
        <path d="M 525 795 L 683.63 795" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 688.88 795 L 681.88 798.5 L 683.63 795 L 681.88 791.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 795px; margin-left: 608px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">
                                on toggle
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="608" y="798" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    on toggle
                </text>
            </switch>
        </g>
        <rect x="495" y="780" width="30" height="30" rx="3" ry="3" fill="none" stroke="#ffffff" stroke-width="2" pointer-events="all"/>
        <rect x="495" y="780" width="0" height="0" fill="none" stroke="#ffffff" stroke-width="2" pointer-events="all"/>
        <path d="M 495 783 C 495 781.34 496.34 780 498 780 L 522 780 C 523.66 780 525 781.34 525 783 L 525 807 C 525 808.66 523.66 810 522 810 L 498 810 C 496.34 810 495 808.66 495 807 Z M 498.12 799.02 L 505.92 806.1 L 522.06 787.5 L 519.45 785.19 L 505.62 801.24 L 500.43 796.47 Z" fill="none" stroke="none" pointer-events="all"/>
        <g fill="#000000" font-family="Helvetica" font-size="12px">
            <text x="526.5" y="799.5">
                Checkbox
            </text>
        </g>
        <path d="M 542.25 930 L 497.75 930 Q 492.25 930 492.25 924.5 L 492.25 901.5 Q 492.25 896 497.57 894.62 L 586.93 871.38 Q 592.25 870 592.25 875.5 L 592.25 924.5 Q 592.25 930 586.75 930 Z" fill="#ffffff" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 900px; margin-left: 493px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000033; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Input field
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="542" y="904" fill="#000033" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Input field
                </text>
            </switch>
        </g>
        <path d="M 330 656 L 330 630 L 470 630 L 470 656" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 330 656 L 330 734 L 470 734 L 470 656" fill="none" stroke="#000000" stroke-miterlimit="10"/>
        <path d="M 330 656 L 470 656" fill="none" stroke="#000000" stroke-miterlimit="10"/>
        <g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="12px">
            <text x="399.5" y="647.5">
                List
            </text>
        </g>
        <rect x="330" y="656" width="140" height="26" fill="none" stroke="none"/>
        <g fill="#000000" font-family="Helvetica" clip-path="url(#mx-clip-334-661-132-26-0)" font-size="12px">
            <text x="335.5" y="673.5">
                Item 1
            </text>
        </g>
        <rect x="330" y="682" width="140" height="26" fill="none" stroke="none"/>
        <g fill="#000000" font-family="Helvetica" clip-path="url(#mx-clip-334-687-132-26-0)" font-size="12px">
            <text x="335.5" y="699.5">
                Item 2
            </text>
        </g>
        <rect x="330" y="708" width="140" height="26" fill="none" stroke="none"/>
        <g fill="#000000" font-family="Helvetica" clip-path="url(#mx-clip-334-713-132-26-0)" font-size="12px">
            <text x="335.5" y="725.5">
                Item 3
            </text>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Viewer does not support full SVG 1.1
            </text>
        </a>
    </switch>
</svg>