gfx/chapter-3/html-client-sequence-diagram.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="389px" height="522px" viewBox="-0.5 -0.5 389 522" content="&lt;mxfile&gt;&lt;diagram id=&quot;gHvkfmA-AxV_9GJVG0dX&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <ellipse cx="17" cy="5" rx="5" ry="5" fill="#b2c9ab" stroke="#788aa3" pointer-events="all"/>
        <path d="M 17 10 L 17 26.67 M 17 13.33 L 7 13.33 M 17 13.33 L 27 13.33 M 17 26.67 L 7 40 M 17 26.67 L 27 40" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 17 40 L 17 520" fill="none" stroke="#788aa3" stroke-miterlimit="10" stroke-dasharray="3 3" 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 flex-start; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 43px; margin-left: 8px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " 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; background-color: rgb(178, 201, 171); white-space: normal; overflow-wrap: normal;">
                                Bruker
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="17" y="55" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Bru...
                </text>
            </switch>
        </g>
        <ellipse cx="187" cy="20" rx="20" ry="20" fill="rgb(255, 255, 255)" stroke="#788aa3" pointer-events="all"/>
        <path d="M 172 40 L 202 40" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 187 40 L 187 520" fill="none" stroke="#788aa3" stroke-miterlimit="10" stroke-dasharray="3 3" 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 flex-start; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 43px; margin-left: 168px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " 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; background-color: rgb(178, 201, 171); white-space: normal; overflow-wrap: normal;">
                                Nettleser
                                <br/>
                                (klient)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="187" y="55" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Nettles...
                </text>
            </switch>
        </g>
        <path d="M 187 200 L 247.19 200 Q 257.19 200 267.19 200 L 364.26 200" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 352.38 206.5 L 365.38 200 L 352.38 193.5" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 200px; margin-left: 270px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                HTTP GET collection.css
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="270" y="204" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    HTTP GET collection.css
                </text>
            </switch>
        </g>
        <path d="M 187 420 Q 247.33 441 189.13 459.33" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 198.51 449.56 L 188.06 459.66 L 202.42 461.96" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 440px; margin-left: 219px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                Update DOM
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="219" y="443" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Update DOM
                </text>
            </switch>
        </g>
        <ellipse cx="367" cy="20" rx="20" ry="20" fill="#b2c9ab" stroke="#788aa3" pointer-events="all"/>
        <path d="M 352 40 L 382 40" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 367 40 L 367 510" fill="none" stroke="#788aa3" stroke-miterlimit="10" stroke-dasharray="3 3" 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 flex-start; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 43px; margin-left: 348px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " 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; background-color: rgb(178, 201, 171); white-space: normal; overflow-wrap: normal;">
                                Server
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="367" y="55" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Server
                </text>
            </switch>
        </g>
        <path d="M 16.67 90 L 77 90 Q 87 90 97 90 L 184.26 90" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 172.38 96.5 L 185.38 90 L 172.38 83.5" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 90px; margin-left: 95px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                localhost:3000
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="95" y="94" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    localhost:3000
                </text>
            </switch>
        </g>
        <path d="M 187 110 L 247.19 110 Q 257.19 110 267.19 110 L 364.26 110" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 352.38 116.5 L 365.38 110 L 352.38 103.5" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 110px; margin-left: 270px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                HTTP GET localhost:3000
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="270" y="114" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    HTTP GET localhost:3000
                </text>
            </switch>
        </g>
        <path d="M 366.5 130 L 297 130 Q 287 130 277 130 L 188.9 130" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 200.78 123.5 L 187.78 130 L 200.78 136.5" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 130px; margin-left: 271px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                Index.html
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="271" y="134" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Index.html
                </text>
            </switch>
        </g>
        <path d="M 366.69 220 L 297.19 220 Q 287.19 220 277.19 220 L 189.24 220" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 201.12 213.5 L 188.12 220 L 201.12 226.5" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 220px; margin-left: 271px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                collection.css
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="271" y="224" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    collection.css
                </text>
            </switch>
        </g>
        <path d="M 187 250 L 247.19 250 Q 257.19 250 267.19 250 L 364.26 250" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 352.38 256.5 L 365.38 250 L 352.38 243.5" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 250px; margin-left: 270px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                HTTP GET collection.js
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="270" y="254" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    HTTP GET collection.js
                </text>
            </switch>
        </g>
        <path d="M 366.69 270 L 297.19 270 Q 287.19 270 277.19 270 L 189.24 270" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 201.12 263.5 L 188.12 270 L 201.12 276.5" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 270px; margin-left: 271px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                collection.js
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="271" y="274" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    collection.js
                </text>
            </switch>
        </g>
        <path d="M 186.67 149 Q 247 170 188.8 188.33" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 198.18 178.56 L 187.73 188.66 L 202.09 190.96" fill="none" stroke="rgb(0, 0, 0)" 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: 1px; height: 1px; padding-top: 169px; margin-left: 219px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                Render HTML
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="219" y="172" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Render HTML
                </text>
            </switch>
        </g>
        <path d="M 187 290 Q 247.33 311 189.13 329.33" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 198.51 319.56 L 188.06 329.66 L 202.42 331.96" 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: 1px; height: 1px; padding-top: 310px; margin-left: 219px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                Execute JavaScript
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="219" y="313" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Execute JavaScript
                </text>
            </switch>
        </g>
        <path d="M 187 360 L 247.19 360 Q 257.19 360 267.19 360 L 364.26 360" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 352.38 366.5 L 365.38 360 L 352.38 353.5" 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: 1px; height: 1px; padding-top: 360px; margin-left: 270px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                HTTP GET /collection/tasks/
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="270" y="364" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    HTTP GET /collection/tasks/
                </text>
            </switch>
        </g>
        <path d="M 366.69 390 L 297.19 390 Q 287.19 390 277.19 390 L 189.24 390" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 201.12 383.5 L 188.12 390 L 201.12 396.5" 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: 1px; height: 1px; padding-top: 400px; margin-left: 277px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                Content-Type: application/collection+json
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="277" y="404" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Content-Type: application/collection+json
                </text>
            </switch>
        </g>
        <path d="M 17.17 90 L 77 90 Q 87 90 97 90 L 184.26 90" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 172.38 96.5 L 185.38 90 L 172.38 83.5" 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: 1px; height: 1px; padding-top: 90px; margin-left: 96px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                localhost:3000
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="96" y="94" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    localhost:3000
                </text>
            </switch>
        </g>
        <path d="M 187 110 L 247.19 110 Q 257.19 110 267.19 110 L 364.26 110" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 352.38 116.5 L 365.38 110 L 352.38 103.5" 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: 1px; height: 1px; padding-top: 110px; margin-left: 270px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                HTTP GET localhost:3000
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="270" y="114" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    HTTP GET localhost:3000
                </text>
            </switch>
        </g>
        <path d="M 366.5 130 L 297 130 Q 287 130 277 130 L 188.9 130" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 200.78 123.5 L 187.78 130 L 200.78 136.5" 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: 1px; height: 1px; padding-top: 130px; margin-left: 271px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                Index.html
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="271" y="134" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Index.html
                </text>
            </switch>
        </g>
        <path d="M 186.67 149 Q 247 170 188.8 188.33" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 198.18 178.56 L 187.73 188.66 L 202.09 190.96" 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: 1px; height: 1px; padding-top: 169px; margin-left: 219px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                Render HTML
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="219" y="172" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Render HTML
                </text>
            </switch>
        </g>
        <ellipse cx="187" cy="20" rx="20" ry="20" fill="#b2c9ab" stroke="#788aa3" pointer-events="all"/>
        <path d="M 172 40 L 202 40" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 187 40 L 187 520" fill="none" stroke="#788aa3" stroke-miterlimit="10" stroke-dasharray="3 3" 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 flex-start; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 43px; margin-left: 168px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " 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; background-color: rgb(178, 201, 171); white-space: normal; overflow-wrap: normal;">
                                Nettleser
                                <br/>
                                (klient)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="187" y="55" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Nettles...
                </text>
            </switch>
        </g>
        <path d="M 187 200 L 247.19 200 Q 257.19 200 267.19 200 L 364.26 200" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 352.38 206.5 L 365.38 200 L 352.38 193.5" 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: 1px; height: 1px; padding-top: 200px; margin-left: 270px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                HTTP GET collection.css
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="270" y="204" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    HTTP GET collection.css
                </text>
            </switch>
        </g>
        <path d="M 187 420 Q 247.33 441 189.13 459.33" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 198.51 449.56 L 188.06 459.66 L 202.42 461.96" 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: 1px; height: 1px; padding-top: 440px; margin-left: 219px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                Update DOM
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="219" y="443" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Update DOM
                </text>
            </switch>
        </g>
        <path d="M 366.69 220 L 297.19 220 Q 287.19 220 277.19 220 L 189.24 220" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 201.12 213.5 L 188.12 220 L 201.12 226.5" 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: 1px; height: 1px; padding-top: 220px; margin-left: 271px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                collection.css
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="271" y="224" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    collection.css
                </text>
            </switch>
        </g>
        <path d="M 187 250 L 247.19 250 Q 257.19 250 267.19 250 L 364.26 250" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 352.38 256.5 L 365.38 250 L 352.38 243.5" 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: 1px; height: 1px; padding-top: 250px; margin-left: 270px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                HTTP GET collection.js
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="270" y="254" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    HTTP GET collection.js
                </text>
            </switch>
        </g>
        <path d="M 366.69 270 L 297.19 270 Q 287.19 270 277.19 270 L 189.24 270" fill="none" stroke="#788aa3" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 201.12 263.5 L 188.12 270 L 201.12 276.5" 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: 1px; height: 1px; padding-top: 270px; margin-left: 271px;">
                        <div data-drawio-colors="color: #000000; background-color: #B2C9AB; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(178, 201, 171); white-space: nowrap;">
                                collection.js
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="271" y="274" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    collection.js
                </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>