architecture.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(255, 255, 255);"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="581px" height="551px"
     viewBox="-0.5 -0.5 581 551"
     content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2021-02-13T12:59:46.074Z&quot; agent=&quot;5.0 (X11)&quot; etag=&quot;j_Ai23AP8vVpy07AFlXB&quot; version=&quot;14.3.1&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;he1gkJqfujpFt_-Sp7BZ&quot; name=&quot;Page-1&quot;&gt;1VnbctsgEP0aPaYjoYudx8RxL9N2xplMm+QRSUgiQULF+KJ+fcFC99hxnTjYMx6bPewC2rPLImzYk3T9hcE8+UlDRAxghmvDvjEAsBwADPkxw6JEvEsFxAyHSqkB7vBfpEBToQsconlHkVNKOM67YECzDAW8g0HG6KqrFlHSnTWHMRoAdwEkQ/Qehzwp0bFrNvhXhOOkmtkyVU8KK2UFzBMY0lULsqeGPWGU8rKVrieISOdVfintPm/prRfGUMb3MWA+z28vVqvv8fRp9ptav/zbhwvglMMsIVmoJzaAR8SA1yFeimYsm9MghfOA4ZwLBKa5gDJ/Ln8MOan8vke++L6afZtX9j6rzCtErK01qPIKLypXM7rIQiRXa4ruVYI5usthIHtXIrgElvCUCMkSzQgTMqGEso2tHUURCAKBzzmjz6jVE3q+53qiBxIcZwIjKGqmXyLG0XqrR62aJxHgiKaIs0KoKANPMatCG9hKXjWB4o4VlrSCxK4UoQrOuB664U80FIX/Qad1uZtOs3KCQP8sZORdb9xRSxU5MwJxJvQ7zB+bxBCicfQiiV4wRn70ESRae3JYp/X7czigMKAMvc3R7+Ane9yL9qGjLPCCo7xj+Wk8cAkKxdatRMp4QmOaQTJt0Ouu0xqdH5TmylVPiPNC1SG44LTrSLTG/EGaf3KV9KgGk+2bdVsolFCuUy5ut+vFs9AFC9COZ1a1k0MWI/5aDA2pZIhAjpfddbw7MWAQwL6sw4hdBDRNaXZ6oTzSHcujc4ll4WFWlEbAreTHakApNHYb6QhJYJ9DEtiDJChimjNxPg6etScAcHpFz9WdABbQmwHggBSwNMW/s2f82zrj37LPbkvr8KlGOC1GgVZGHb2Mjg6qUiNdVWpfTt9apTamV4zBoqWQU5zxeWvkmQTaLz29E5Dbuzvo6TujnfqiUa6gia76UQ4PuOHVhLr50V4/XavrDudSe/10dSan1c7Meut9LTe1bbfunqnpaN1uvXPcbrW9FOzLqd4SqvnO4pBTbi9NRyeYp1pKaH0B1qsB20poX99zj19BwdnckZ3TFqL1vcodHIpgnhMciKlP4GYNfODBSIjNn2dlxjR/QdrTfw==&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <rect x="0" y="220" width="580" height="330" fill="#fff2cc" stroke="#d6b656"
              pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none"
                               width="100%" height="100%"
                               requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 578px; height: 1px; padding-top: 385px; margin-left: 2px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: left; ">
                            <div
                                style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <div>Ecmascript  + Web APIs
                                    <br/>
                                </div>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="2" y="389" fill="#000000" font-family="Helvetica" font-size="12px">
                    Ecmascript  + Web APIs&#xa;
                </text>
            </switch>
        </g>
        <rect x="0" y="0" width="580" height="220" fill="#dae8fc" stroke="#6c8ebf"
              pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none"
                               width="100%" height="100%"
                               requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 578px; height: 1px; padding-top: 110px; margin-left: 2px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: left; ">
                            <div
                                style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <div align="left">Plain Ecmascript</div>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="2" y="114" fill="#000000" font-family="Helvetica" font-size="12px">Plain
                    Ecmascript
                </text>
            </switch>
        </g>
        <rect x="320" y="10" width="120" height="60" fill="#ffffff" stroke="#000000"
              pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none"
                               width="100%" height="100%"
                               requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 40px; margin-left: 321px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div
                                style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                core
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="44" fill="#000000" font-family="Helvetica" font-size="12px"
                      text-anchor="middle">core
                </text>
            </switch>
        </g>
        <path d="M 380 260 L 380 76.37" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 380 71.12 L 383.5 78.12 L 380 76.37 L 376.5 78.12 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="320" y="260" width="120" height="60" fill="#ffffff" stroke="#000000"
              pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none"
                               width="100%" height="100%"
                               requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 290px; margin-left: 321px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div
                                style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                browser-common
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="294" fill="#000000" font-family="Helvetica" font-size="12px"
                      text-anchor="middle">browser-common
                </text>
            </switch>
        </g>
        <path d="M 240 140 L 240 105 L 350 105 L 350 76.37" fill="none" stroke="#000000"
              stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 350 71.12 L 353.5 78.12 L 350 76.37 L 346.5 78.12 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="180" y="140" width="120" height="60" fill="#ffffff" stroke="#000000"
              pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none"
                               width="100%" height="100%"
                               requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 170px; margin-left: 181px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div
                                style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                ygoprodeck
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="240" y="174" fill="#000000" font-family="Helvetica" font-size="12px"
                      text-anchor="middle">ygoprodeck
                </text>
            </switch>
        </g>
        <path d="M 480 480 L 480 340 L 300 340 L 300 206.37" fill="none" stroke="#000000"
              stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 300 201.12 L 303.5 208.12 L 300 206.37 L 296.5 208.12 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 510 480 L 510 290 L 446.37 290" fill="none" stroke="#000000"
              stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 441.12 290 L 448.12 286.5 L 446.37 290 L 448.12 293.5 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 540 480 L 540 240 L 410 240 L 410 76.37" fill="none" stroke="#000000"
              stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 410 71.12 L 413.5 78.12 L 410 76.37 L 406.5 78.12 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="450" y="480" width="120" height="60" fill="#ffffff" stroke="#000000"
              pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none"
                               width="100%" height="100%"
                               requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 510px; margin-left: 451px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div
                                style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                tooltip
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="510" y="514" fill="#000000" font-family="Helvetica" font-size="12px"
                      text-anchor="middle">tooltip
                </text>
            </switch>
        </g>
        <path d="M 270 510 L 443.63 510" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 448.88 510 L 441.88 513.5 L 443.63 510 L 441.88 506.5 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 240 480 L 240 400 L 350 400 L 350 326.37" fill="none" stroke="#000000"
              stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 350 321.12 L 353.5 328.12 L 350 326.37 L 346.5 328.12 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 180 480 L 160 480 L 160 55 L 313.63 55" fill="none" stroke="#000000"
              stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 318.88 55 L 311.88 58.5 L 313.63 55 L 311.88 51.5 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 210 480 L 210 206.37" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 210 201.12 L 213.5 208.12 L 210 206.37 L 206.5 208.12 Z" fill="#000000"
              stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="150" y="480" width="120" height="60" fill="#ffffff" stroke="#000000"
              pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none"
                               width="100%" height="100%"
                               requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 510px; margin-left: 151px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div
                                style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                application
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="210" y="514" fill="#000000" font-family="Helvetica" font-size="12px"
                      text-anchor="middle">application
                </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>