gfx/chapter-3/architecture.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="391px" height="361px" viewBox="-0.5 -0.5 391 361" content="&lt;mxfile&gt;&lt;diagram id=&quot;L5bVONF9GFe_AcN-vsmY&quot; name=&quot;Page-1&quot;&gt;3Vffb5swEP5rkLaHVcEOkDymtGs3tVolJnV9dOAKbh2MjNOQ/fWzwfwMaaK26rrlIfJ99h32fR93xsL+qrgQJEuueQTMQpOosPCZhZA7R+pfA1sD2F4FxIJGFWS3QEB/gwEnBl3TCPLeQsk5kzTrgyFPUwhlDyNC8E1/2T1n/admJIYdIAgJ20VvaSSTCp0hr8UvgcZJ/WTbnVczK1IvNifJExLxTQfC5xb2BeeyGq0KH5jOXZ2Xyu/rntlmYwJSeYyDIeKJsLU5m4VcplxPl2oQ68EtLL88MqoDmikVrpltlosaufx5fWUhX0X1g6AafA/MaeW2TqHg6zQCvYuJ8tkkVEKQkVDPbpRmFJbIFVOWrYb3lDGfMy5KX3yK/PniVOG5FPwROjPebLZYYO3BU9nBJ+Wv3O4wPyZlTyAkFB3I5OsC+Aqk2Kol9ezccGfEa7vG3rRSsKcGS7oywAYkRn5xE7tlSA0MSeOE4cOEBSDUaY4ji2TZyUOuAn6CIhOQ56WlOYOH/PN/xNp02mcNOe/J2vQwaz5fh8nZcpy2AQ2qamR6GG4ZVXwIfJiMZcXc1bIBSPgYl3z+WEsVBgyeV9XWdp7h4xkG93D+FgzO+gw2jHYYdEcInL0Bf84IfwNOII0WurVoWhjJcxoO3oY9uYSCyl/6hTpxjHVnPPT4rDDvWmlsayNV++84afOuO9e6lVbP7wYEVQkAYcD9ZO4lLedrEUKvIEkiYpA9tUPU66K7xHaIc0aIqzEBjEj61O+9Y2yaJ9xwqntVrRts93XjoIEgqtMYr26vHAZyBwL0BoGqHOwEKsXVHPsovbkv1FuutiBfJUO7I8JWkodk2BPhCXIO6PCVkkO7ksMfSnJo/laSm76b5LwjWtTVt8FNsL1IjPWtj3bt2+k1I0o7+tqH3/UCMfunC4L32oIweK8PVghvT4X4az1oePvEzssKwtQZqBANAr24ICiz/eyslrff7vj8Dw==&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <rect x="0" y="0" width="140" height="130" fill="#b2c9ab" stroke="#788aa3" 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: 65px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    Web-klient
                                </b>
                                <br/>
                                HTML, CSS, JS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="70" y="69" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Web-klient...
                </text>
            </switch>
        </g>
        <rect x="250" y="90" width="140" height="130" fill="#b2c9ab" stroke="#788aa3" 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: 155px; margin-left: 251px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    Server
                                </b>
                                <br/>
                                app.js (express.js, ejs)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="320" y="159" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Server...
                </text>
            </switch>
        </g>
        <path d="M 290 295 C 290 286.72 303.43 280 320 280 C 327.96 280 335.59 281.58 341.21 284.39 C 346.84 287.21 350 291.02 350 295 L 350 345 C 350 353.28 336.57 360 320 360 C 303.43 360 290 353.28 290 345 Z" fill="#b2c9ab" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 350 295 C 350 303.28 336.57 310 320 310 C 303.43 310 290 303.28 290 295" fill="none" stroke="#788aa3" stroke-miterlimit="10" 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: 58px; height: 1px; padding-top: 333px; margin-left: 291px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    CouchDb
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="320" y="336" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    CouchDb
                </text>
            </switch>
        </g>
        <path d="M 320 220 L 320 273.63" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 320 278.88 L 316.5 271.88 L 320 273.63 L 323.5 271.88 Z" fill="#788aa3" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 145.64 67.95 L 244.36 119.55" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 140.99 65.52 L 148.82 65.66 L 145.64 67.95 L 145.57 71.86 Z" fill="#788aa3" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 249.01 121.98 L 241.18 121.84 L 244.36 119.55 L 244.43 115.64 Z" fill="#788aa3" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="190" width="140" height="130" fill="#b2c9ab" stroke="#788aa3" 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: 255px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    CLI-klient
                                    <br/>
                                </b>
                                JS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="70" y="259" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    CLI-klient...
                </text>
            </switch>
        </g>
        <path d="M 145.43 251.67 L 244.57 190.83" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 140.95 254.42 L 145.09 247.77 L 145.43 251.67 L 148.75 253.74 Z" fill="#788aa3" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 249.05 188.08 L 244.91 194.73 L 244.57 190.83 L 241.25 188.76 Z" fill="#788aa3" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
    </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>