design.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="450px" height="411px" viewBox="-0.5 -0.5 450 411" content="&lt;mxfile&gt;&lt;diagram id=&quot;TV80CCRCneU7qHkHg6yK&quot; name=&quot;Page-1&quot;&gt;zZbbjpswEIafhtuKAGHp7WazbdVWqpRKbS/dMAVXDoOcISF9+pplwHjNnrTZbm+Q5/eMPf7GB4J4tWvfaVGXnzEHFURh3gbxVRBFyzAz30449UKaxb1QaJn30sIKG/kHWAxZbWQOe8eREBXJ2hW3WFWwJUcTWuPRdfuFyp21FgV4wmYrlK9+kzmVw7JCq78HWZQ8czR07MTgy8K+FDkeJ1K8DuKVRqS+tWtXoDp0A5Y+7vqO3jEvDRU9KiDiPOg0rA1ys1Q2UVOJBVZCra16qbGpcuhGCI1lfT4h1kZcGPE3EJ24bqIhNFJJO8W90Er63oW/WbL1gwfr2lft1Dix0efZJXfnUlnaY6O37BWPTM1WBNwB6ZNx0aAEyYM7lOBNUYx+Y+gXlGaSKOT9myw5hLdvFGXuECR0AcRRFr9pTNKw0k1R5gvE5+IgVMPZegWz5ejYHktJsKnFDYGjOX0u+lxqcyAkVsY2oLrtyGgPoAna++H6JIeA0AXC5tEejmTQysnBSIa4OfYOtXsQRR6i/VYDVEE343V3y8iDB+0BTGdAkrlIMh/JqE2RjOJzkCQeksuGyBT9WXvnDFDMHelQiWewXMxROQOUpQflQ1U39PpMFg8ziV+ISeox+VjhT/9NUMo8rfBvcNyikfo00hka6RloXPx/NMblvwKOzMPxVZKB8MS79IWenLe3wMzcr3NgkqeDMab9I+vfcPtXG6//Ag==&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <path d="M 420 205 L 441 205 L 441 201.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 441 206.88 L 437.5 199.88 L 441 201.63 L 444.5 199.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="5" y="-5" width="410" height="420" rx="61.5" ry="61.5" fill="#ffffff" stroke="#000000" transform="rotate(90,210,205)" pointer-events="all"/>
        <rect x="70" y="60" width="280" height="280" fill="#ffffff" 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: 278px; height: 1px; padding-top: 200px; margin-left: 71px;">
                        <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; ">
                                screen / div
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="210" y="204" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    screen / div
                </text>
            </switch>
        </g>
        <rect x="240" y="360" width="70" height="20" rx="3" ry="3" fill="#ffffff" 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: 68px; height: 1px; padding-top: 370px; margin-left: 241px;">
                        <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; ">
                                Button
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="275" y="374" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Button
                </text>
            </switch>
        </g>
        <rect x="200" y="360" width="30" height="20" rx="3" ry="3" fill="#ffffff" 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: 28px; height: 1px; padding-top: 370px; margin-left: 201px;">
                        <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; ">
                                Input
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="215" y="374" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Input
                </text>
            </switch>
        </g>
        <ellipse cx="40" cy="370" rx="30" ry="30" fill="#ffffff" 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: 58px; height: 1px; padding-top: 370px; 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; ">
                                Knob
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="40" y="374" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Knob
                </text>
            </switch>
        </g>
        <ellipse cx="380" cy="370" rx="30" ry="30" fill="#ffffff" 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: 58px; height: 1px; padding-top: 370px; margin-left: 351px;">
                        <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; ">
                                Knob
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="374" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Knob
                </text>
            </switch>
        </g>
        <rect x="190" y="-100" width="40" height="260" fill="#ffffff" stroke="#000000" transform="rotate(90,210,30)" 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: 258px; height: 1px; padding-top: 30px; margin-left: 81px;">
                        <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; ">
                                Title
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="210" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Title
                </text>
            </switch>
        </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>