system_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="721px" height="447px" viewBox="-0.5 -0.5 721 447" content="&lt;mxfile&gt;&lt;diagram id=&quot;EM7m3pq3Wrsrs64wPRRN&quot; name=&quot;ページ1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
    <defs/>
    <g>
        <rect x="29" y="275" width="376" height="140" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <rect x="30" y="106" width="372" height="140" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <path d="M 377 156.14 L 579.63 156.84" fill="none" stroke="#666666" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 584.88 156.86 L 577.87 160.33 L 579.63 156.84 L 577.89 153.33 Z" fill="#666666" stroke="#666666" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 297 140 C 297 131.72 314.91 125 337 125 C 347.61 125 357.78 126.58 365.28 129.39 C 372.79 132.21 377 136.02 377 140 L 377 200 C 377 208.28 359.09 215 337 215 C 314.91 215 297 208.28 297 200 Z" fill="#6666ff" stroke="#006eaf" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 377 140 C 377 148.28 359.09 155 337 155 C 314.91 155 297 148.28 297 140" fill="none" stroke="#006eaf" 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: 78px; height: 1px; padding-top: 183px; margin-left: 298px;">
                        <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; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                Ghibli
                                <br/>
                                Movies App
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="337" y="186" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Ghibli...
                </text>
            </switch>
        </g>
        <path d="M 338.59 76.25 L 337.87 118.63" fill="none" stroke="#666666" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 337.78 123.88 L 334.4 116.82 L 337.87 118.63 L 341.4 116.94 Z" fill="#666666" stroke="#666666" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 321.24 61.89 C 318.88 61.89 316 59.79 316 56.35 L 316 33.43 C 316 30.53 318.42 28 321.3 28 L 356.75 28 C 359.38 28 362 30.32 362 33.66 L 362 56.36 C 362 59.43 359.47 61.89 356.76 61.89 Z M 319.46 76.25 C 317.47 76.25 316 74.52 316 72.66 L 316 67.4 C 316 65.65 317.44 63.87 319.41 63.87 L 358.59 63.87 C 360.36 63.87 362 65.47 362 67.56 L 362 72.55 C 362 74.7 360.32 76.25 358.54 76.25 Z" fill="#d2d3d3" stroke="none" pointer-events="all"/>
        <path d="M 362 54.34 L 362 56.36 C 362 59.42 359.48 61.89 356.76 61.89 L 321.24 61.89 C 318.88 61.89 316 59.77 316 56.35 L 316 54.36 C 316 57.31 318.51 59.8 321.24 59.8 L 356.81 59.8 C 359.43 59.8 362 57.4 362 54.34 Z M 362 70.26 L 362 72.55 C 362 74.72 360.32 76.25 358.54 76.25 L 319.46 76.25 C 317.47 76.25 316 74.52 316 72.66 L 316 70.54 C 316 72.3 317.44 74.08 319.41 74.08 L 358.59 74.08 C 359.98 74.08 362 72.87 362 70.26 Z" fill-opacity="0.3" fill="#000000" stroke="none" pointer-events="all"/>
        <rect x="316" y="28" width="0" height="0" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <path d="M 321.29 55.83 C 320.55 55.83 319.77 55.1 319.77 54.26 L 319.77 33.46 C 319.77 32.65 320.45 31.84 321.32 31.84 L 356.68 31.84 C 357.61 31.84 358.26 32.65 358.26 33.49 L 358.26 54.21 C 358.26 55.03 357.59 55.83 356.67 55.83 Z M 342.39 70.45 C 341.66 70.45 341.01 69.7 341.01 69.03 C 341.01 68.15 341.7 67.5 342.41 67.5 L 357.02 67.5 C 357.73 67.5 358.44 68.14 358.44 68.98 C 358.44 69.7 357.79 70.45 357.06 70.45 Z" fill="#ffffff" stroke="none" pointer-events="all"/>
        <path d="M 626 216 L 626 255 Q 626 265 616 265 L 347 265 Q 337 265 337 255 L 337 221.37" fill="none" stroke="#666666" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 337 216.12 L 340.5 223.12 L 337 221.37 L 333.5 223.12 Z" fill="#666666" stroke="#666666" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 586 141 C 586 132.72 603.91 126 626 126 C 636.61 126 646.78 127.58 654.28 130.39 C 661.79 133.21 666 137.02 666 141 L 666 201 C 666 209.28 648.09 216 626 216 C 603.91 216 586 209.28 586 201 Z" fill="#00994d" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 666 141 C 666 149.28 648.09 156 626 156 C 603.91 156 586 149.28 586 141" fill="none" stroke="#000000" 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: 78px; height: 1px; padding-top: 184px; margin-left: 587px;">
                        <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; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                TMDB
                                <br/>
                                API
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="626" y="187" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    TMDB...
                </text>
            </switch>
        </g>
        <rect x="313" y="0" width="49" height="26" 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: 1px; height: 1px; padding-top: 13px; margin-left: 338px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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: nowrap;">
                                <font color="#666666">
                                    Client
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="338" y="17" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Client
                </text>
            </switch>
        </g>
        <rect x="420" y="117" width="153" height="41" 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: 1px; height: 1px; padding-top: 138px; margin-left: 497px;">
                        <div data-drawio-colors="color: #666666; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(102, 102, 102); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                Search
                                <br/>
                                using Serverless-function
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="497" y="141" fill="#666666" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Search...
                </text>
            </switch>
        </g>
        <rect x="435" y="275" width="190" height="120" fill="#eeeeee" stroke="#36393d" 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 flex-start; width: 182px; height: 1px; padding-top: 265px; margin-left: 440px;">
                        <div data-drawio-colors="color: #1A1A1A; " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 130px; overflow: hidden;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(26, 26, 26); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <h1>
                                    <font style="font-size: 17px">
                                        Movie data
                                    </font>
                                </h1>
                                <p>
                                    such as :
                                </p>
                                <p>
                                    <span>
                                        title, release date, genre,director , poster , backdrop
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="440" y="277" fill="#1A1A1A" font-family="Helvetica" font-size="12px">
                    Movie data...
                </text>
            </switch>
        </g>
        <rect x="453" y="245" width="70" height="20" 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: 1px; height: 1px; padding-top: 255px; margin-left: 488px;">
                        <div data-drawio-colors="color: #666666; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(102, 102, 102); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                fetch json
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="488" y="259" fill="#666666" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    fetch json
                </text>
            </switch>
        </g>
        <rect x="44" y="110" width="70" height="20" 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: 1px; height: 1px; padding-top: 120px; margin-left: 79px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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; font-weight: bold; white-space: nowrap;">
                                front-end
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="79" y="124" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    front-end
                </text>
            </switch>
        </g>
        <path d="M 321 298 L 321 221.37" fill="none" stroke="#666666" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 321 216.12 L 324.5 223.12 L 321 221.37 L 317.5 223.12 Z" fill="#666666" stroke="#666666" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 297 313 C 297 304.72 314.91 298 337 298 C 347.61 298 357.78 299.58 365.28 302.39 C 372.79 305.21 377 309.02 377 313 L 377 373 C 377 381.28 359.09 388 337 388 C 314.91 388 297 381.28 297 373 Z" fill="#6666ff" stroke="#006eaf" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 377 313 C 377 321.28 359.09 328 337 328 C 314.91 328 297 321.28 297 313" fill="none" stroke="#006eaf" 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: 78px; height: 1px; padding-top: 356px; margin-left: 298px;">
                        <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; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                Ghibli
                                <br/>
                                Movies App
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="337" y="359" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Ghibli...
                </text>
            </switch>
        </g>
        <rect x="39" y="281" width="90" height="20" 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: 1px; height: 1px; padding-top: 291px; margin-left: 84px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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; font-weight: bold; white-space: nowrap;">
                                Source code
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="84" y="295" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Source code
                </text>
            </switch>
        </g>
        <rect x="271" y="253" width="50" height="20" 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: 1px; height: 1px; padding-top: 263px; margin-left: 296px;">
                        <div data-drawio-colors="color: #666666; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(102, 102, 102); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                deploy
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="296" y="267" fill="#666666" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    deploy
                </text>
            </switch>
        </g>
        <rect x="44" y="130" width="110" height="20" 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: 1px; height: 1px; padding-top: 140px; margin-left: 99px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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: nowrap;">
                                Webhost : Netlify
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="99" y="144" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Webhost : Netlify
                </text>
            </switch>
        </g>
        <rect x="44" y="301" width="50" height="20" 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: 1px; height: 1px; padding-top: 311px; margin-left: 69px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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: nowrap;">
                                GitHub
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="69" y="315" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    GitHub
                </text>
            </switch>
        </g>
        <rect x="256" y="85" width="60" height="20" 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: 1px; height: 1px; padding-top: 95px; margin-left: 286px;">
                        <div data-drawio-colors="color: #666666; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(102, 102, 102); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                http get
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="286" y="99" fill="#666666" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    http get
                </text>
            </switch>
        </g>
        <rect x="342" y="86" width="80" height="20" 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: 1px; height: 1px; padding-top: 96px; margin-left: 382px;">
                        <div data-drawio-colors="color: #666666; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(102, 102, 102); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                http request
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="382" y="100" fill="#666666" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    http request
                </text>
            </switch>
        </g>
        <path d="M 321 125 L 321 81.37" fill="none" stroke="#666666" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 321 76.12 L 324.5 83.12 L 321 81.37 L 317.5 83.12 Z" fill="#666666" stroke="#666666" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="67" y="327" width="180" height="63" fill="none" stroke="none" pointer-events="all"/>
        <rect x="67" y="327" width="96" height="32" fill="#cccccc" stroke="#666666" pointer-events="none"/>
        <rect x="163" y="327" width="84" height="32" fill="#c9c9c9" stroke="#666666" pointer-events="none"/>
        <rect x="67" y="359" width="96" height="31" fill="none" stroke="rgb(0, 0, 0)" pointer-events="none"/>
        <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: 94px; height: 1px; padding-top: 375px; margin-left: 68px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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: none; white-space: normal; overflow-wrap: normal;">
                                Serverless-function
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="115" y="378" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Serverless-funct...
                </text>
            </switch>
        </g>
        <rect x="163" y="359" width="84" height="31" fill="none" stroke="rgb(0, 0, 0)" pointer-events="none"/>
        <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: 82px; height: 1px; padding-top: 375px; margin-left: 164px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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: none; white-space: normal; overflow-wrap: normal;">
                                get-api.js
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="205" y="378" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    get-api.js
                </text>
            </switch>
        </g>
        <rect x="67" y="167" width="180" height="63" fill="none" stroke="rgb(0, 0, 0)" pointer-events="none"/>
        <rect x="67" y="167" width="96" height="32" fill="#cccccc" stroke="#666666" pointer-events="none"/>
        <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: 94px; height: 1px; padding-top: 183px; margin-left: 68px;">
                        <div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                Environment variables
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="115" y="187" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Environment vari...
                </text>
            </switch>
        </g>
        <rect x="163" y="167" width="84" height="32" fill="#c9c9c9" stroke="#666666" pointer-events="none"/>
        <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: 82px; height: 1px; padding-top: 183px; margin-left: 164px;">
                        <div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    API_Keys
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="205" y="187" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    API_Keys
                </text>
            </switch>
        </g>
        <rect x="67" y="199" width="96" height="31" fill="none" stroke="rgb(0, 0, 0)" pointer-events="none"/>
        <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: 94px; height: 1px; padding-top: 215px; margin-left: 68px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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: none; white-space: normal; overflow-wrap: normal;">
                                Serverless-function
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="115" y="218" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Serverless-funct...
                </text>
            </switch>
        </g>
        <rect x="163" y="199" width="84" height="31" fill="none" stroke="rgb(0, 0, 0)" pointer-events="none"/>
        <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: 82px; height: 1px; padding-top: 215px; margin-left: 164px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " 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: none; white-space: normal; overflow-wrap: normal;">
                                get-api.js
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="205" y="218" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    get-api.js
                </text>
            </switch>
        </g>
        <rect x="0" y="3" width="720" height="443" rx="22.15" ry="22.15" fill="none" stroke="#666666" pointer-events="none"/>
    </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>