doc/test-components.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="752px" height="471px" viewBox="-0.5 -0.5 752 471" content="&lt;mxfile&gt;&lt;diagram id=&quot;NGK93fDsRziGN37oF_dM&quot; name=&quot;Page-1&quot;&gt;7Vpbk+IoFP41vloJJEYfvfVM1cyuVtu10/3IGDTUxmAhtrq/fsFArmjH3phYM+uDlXMIl/N9HA4H0oHjzfELQ9vgD+rjsAMs/9iBkw4A7sAR/1JxihW248JYs2bEV7pUsSD/YKW0lHZPfLzLvcgpDTnZ5pVLGkV4yXM6xBg95F9b0TDf6xatcUmxWKKwrP1BfB4ord0bpAVfMVkHqus+8OKCDdIvK0t2AfLpIaOC0w4cM0p5/LQ5jnEowdO4xPWeLpQmA2M44lUqQDWOdxTulXFqYPykrWV0H/lYVrA6cHQICMeLLVrK0oPgV+gCvgmFZIvHFQnDMQ0pO9eFPQsNbE/qacQz+tX5J/Q7zujfWJdENMKqkYUaQID4UmA2KlumjH3HjONjRqUs/YLpBnN2Eq+oUqevrFXzDnpKPqQkQj3Hggx/tqOUSE2cddJ2iq14UPBe4KZ/X6gty7Xw6lGgziPdLwPtOAagQR1AAwPOvVD0MPopHtbyYTF9/mv6rNWiwaSkTUrONezJaFwPB8L5ciTYVpkFGxhY6NVBQr+EJPbFIqpEynhA1zRC4TTVZpEUZrPTq0L9LLxJoQtcLU+O2dLJSUkxpHpZBleWpBL4YOL1LOsa+ByxNea5aSatusoGwyHi5D0fOkzQqqpzSkSvCYs2zLNYYmdH92yJVa2UoCFj6JR5bStf2FXvx7bdAt9xiyn7iY2VJgT82Cvnz7PXt1/cKb0LbDbik4P7+KTXqk/G818Flabc9FbvAsW12KnXu5z/5F3qTaY1ByKIAtZPtCNLaeReir+MCwKrRR90P94EigoikcEfo4p22zi7WZGjZKIIs9+3LA/eAvPQtSznqrfdsAUsLHUJpBmYTSiDGlAe/DYoJ6jqnMZuDmXd1aPD7BMmmiY0EnoRLXhNOQ5w24PehPSnQnkixKH89kiOj4S/pnWF9KZriue0GSnoVu4U/W3DLt2tO/xXZsh9FIZuRzvhNMtowq+Z008zpL3m3omUa+fd1dEMfZBIfWI3Bno1cZ+h+y1b1jj33p3IH7TlnvBh3NMMOLgOeIMrKIRtcaRHcy2rGc7n1XKaDSJRB4zP4xSJC8MslvachISfSrOhwVPvSjRV35e4lpdf6Az7kvudMcCH86uu04eVtyZSmGNGhOGY3dnZQAPblU+dVniFDFmfDdZ1WqEtv+bYL9PFy+Luh4HtemrPAe15qm1KkgskTGbjb/KexPpz+vJj9vzt0Q5n1SVWDVQULqwMR0LmC6saiIAVwtz32Xj4/ets8fJoHlEjA4XbWdfgDMbb2Vo4cGoKW9kbqqa27JWiDTREG9DWzk4Ppqbz6m632+YqVPe97aUbvyaiAjTd0/0+Z3qw+IlIg2d6sFeCPuBcQDqUTYCnkC5RGNCd2Kg9mWa8MJHn8b/4xUdBhUKylkAuBXBy1zuSgBHR21AVbIjvh5cIz3ua6YMSSa/6isvulek+L3H9mpIfdW2tCRwMyr5jCuSwDgK96wTuMHuXaef/7FVd+hzT0lcTfUJMv7OLk5j0a0U4/Rc=&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs>
        <pattern patternUnits="userSpaceOnUse" width="11.5" height="11.5" x="0" y="0" patternTransform="rotate(45)" id="mx-pattern-hatch-1-60a917-0">
            <line x1="0" y1="0" x2="0" y2="11.5" stroke="#60a917" stroke-width="1.5"/>
        </pattern>
        <pattern patternUnits="userSpaceOnUse" width="11.5" height="11.5" x="0" y="0" patternTransform="rotate(45)" id="mx-pattern-hatch-1-0050ef-0">
            <line x1="0" y1="0" x2="0" y2="11.5" stroke="#0050ef" stroke-width="1.5"/>
        </pattern>
    </defs>
    <g>
        <rect x="440" y="310" width="310" height="140" fill="url(#mx-pattern-hatch-1-60a917-0)" stroke="none" pointer-events="all"/>
        <rect x="0" y="20" width="440" height="240" fill="url(#mx-pattern-hatch-1-0050ef-0)" stroke="none" pointer-events="all"/>
        <rect x="320" y="40" width="120" height="60" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <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: 70px; margin-left: 321px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    SERVER
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="74" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    SERVER
                </text>
            </switch>
        </g>
        <path d="M 90 200 L 90 65 Q 90 55 100 55 L 311.76 55" fill="none" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 317.76 55 L 309.76 59 L 311.76 55 L 309.76 51 Z" fill="#2d7600" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="30" y="200" width="120" height="60" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <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: 230px; margin-left: 31px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    PROXY
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="90" y="234" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    PROXY
                </text>
            </switch>
        </g>
        <path d="M 220 200 L 220 95 Q 220 85 230 85 L 311.76 85" fill="none" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 317.76 85 L 309.76 89 L 311.76 85 L 309.76 81 Z" fill="#2d7600" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="160" y="200" width="120" height="60" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <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: 230px; margin-left: 161px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    PROXY
                                </b>
                                <br/>
                                with basic auth
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="220" y="234" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    PROXY...
                </text>
            </switch>
        </g>
        <ellipse cx="440" cy="70" rx="10" ry="10" fill="#d80073" stroke="#a50040" pointer-events="all"/>
        <ellipse cx="90" cy="260" rx="10" ry="10" fill="#d80073" stroke="#a50040" pointer-events="all"/>
        <ellipse cx="220" cy="260" rx="10" ry="10" fill="#d80073" stroke="#a50040" transform="rotate(90,220,260)" pointer-events="all"/>
        <path d="M 527 350 L 527 80 Q 527 70 517 70 L 458.24 70" fill="none" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 452.24 70 L 460.24 66 L 458.24 70 L 460.24 74 Z" fill="#2d7600" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 467 380 L 230 380 Q 220 380 220 370 L 220 278.24" fill="none" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 220 272.24 L 224 280.24 L 220 278.24 L 216 280.24 Z" fill="#2d7600" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 467 395 L 100 395 Q 90 395 90 385 L 90 278.24" fill="none" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 90 272.24 L 94 280.24 L 90 278.24 L 86 280.24 Z" fill="#2d7600" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 467 365 L 360 365 Q 350 365 350 355 L 350 278.24" fill="none" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 350 272.24 L 354 280.24 L 350 278.24 L 346 280.24 Z" fill="#2d7600" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="467" y="350" width="120" height="60" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <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: 380px; margin-left: 468px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    APP
                                </b>
                                <br/>
                                main, renderer, utility
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="527" y="384" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    APP...
                </text>
            </switch>
        </g>
        <path d="M 659.96 350 L 660 80 Q 660 70 650 70 L 458.24 70" fill="none" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 452.24 70 L 460.24 66 L 458.24 70 L 460.24 74 Z" fill="#2d7600" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="602" y="350" width="120" height="60" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <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: 380px; margin-left: 603px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    TESTS
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="662" y="384" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    TESTS
                </text>
            </switch>
        </g>
        <rect x="0" y="0" width="440" height="20" fill="#0050ef" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 438px; height: 1px; padding-top: 10px; margin-left: 1px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    DOCKER NETWORK
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="220" y="14" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    DOCKER NETWORK
                </text>
            </switch>
        </g>
        <rect x="440" y="450" width="310" height="20" fill="#60a917" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 460px; margin-left: 441px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    LOCALHOST
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="595" y="464" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    LOCALHOST
                </text>
            </switch>
        </g>
        <path d="M 350 200 L 350 108.24" fill="none" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 350 102.24 L 354 110.24 L 350 108.24 L 346 110.24 Z" fill="#2d7600" stroke="#2d7600" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="290" y="200" width="120" height="60" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <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: 230px; margin-left: 291px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    PROXY
                                </b>
                                <br/>
                                ...
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="350" y="234" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    PROXY...
                </text>
            </switch>
        </g>
        <ellipse cx="350" cy="260" rx="10" ry="10" fill="#d80073" stroke="#a50040" transform="rotate(90,350,260)" pointer-events="all"/>
        <rect x="475" y="39" width="140" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 54px; margin-left: 476px;">
                        <div data-drawio-colors="color: #60a918; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(96, 169, 24); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                http://localhost/...
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="545" y="59" fill="#60a918" font-family="Helvetica" font-size="16px" text-anchor="middle">
                    http://localhost/...
                </text>
            </switch>
        </g>
        <rect x="290" y="400" width="140" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 415px; margin-left: 291px;">
                        <div data-drawio-colors="color: #60a918; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(96, 169, 24); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                http://server/...
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="360" y="420" fill="#60a918" font-family="Helvetica" font-size="16px" text-anchor="middle">
                    http://server/...
                </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%">
                Text is not SVG - cannot display
            </text>
        </a>
    </switch>
</svg>