docs/diagrams/architecture_overview.drawio.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="661px" height="271px" viewBox="-0.5 -0.5 661 271" content="&lt;mxfile host=&quot;c4b57bd2-9699-405d-96d2-819dcbf8c52f&quot; modified=&quot;2020-09-18T09:59:53.692Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.49.0 Chrome/83.0.4103.122 Electron/9.2.1 Safari/537.36&quot; etag=&quot;Ppj_bXnrjXU6EchHyhFm&quot; version=&quot;13.1.3&quot;&gt;&lt;diagram id=&quot;6hGFLwfOUW9BJ-s0fimq&quot; name=&quot;Page-1&quot;&gt;5ZhNc5swEIZ/jY/tAAJCjomdfswk08x4Om2PAgQokREjRGz667uAZEyEE7cmcdo6h0jvSkJ6dllJzNB8tfkocJHd8JiwmWPFmxlazBzHts4C+Ncodaf4CHVCKmisGvXCkv4kuqdSKxqTctBQcs4kLYZixPOcRHKgYSH4etgs4Wz41AKnxBCWEWam+o3GMuvUwDnr9U+Eppl+su2fd5YV1o3VSsoMx3y9I6GrGZoLzmVXWm3mhDXwNJeu34c91u3EBMnlIR2Q6vGAWaUWpyYma73aVPCqMAfWPYmQZDOGHYd6hH5lEBKEr4gUNbRTvbZurfWcVH3ds7U1sGyH67nSsHJnuh26XzEU1KLHATgHAID15zFpOlgzdLnOqCTLAkeNdQ0BDlomV/CAhQ3FhDI254yLti9KksSJItBLKfg92bHEfuh7PlhMtGgfW5Phc4z8KRg5UzPiuVRvtW2ZzGJMgmSUmR8FJEyOZVYP0TyHEE2BMBhB6DN4wmUIhbQp3FzfQoslEbAEbYRxt/Zp49Jr/kYZtz/lpR29+4HeEKaQDC8YTXOwSV6MeuRwh2hrMEwENjI9hPwRD9nuBC7yDb4khqyvqlzIjKc8x+yqVy+HHujbXPOGScv9jkhZq2DHleRDr+ylVvJKRGoe6m2TWKREx2QnNTN8kqwgDEv6MNy3jgpkdApMQEfU31X/tvKjqbz3dHWx2TUualX7U7z2+cn4GnniGwmbPZVRWEN5XA6IcZm1bZ8MvcMzqH1oCp1iF/Le7PuJzAByTxU/yIifblv5+nnS7SP2SBC7Y9tH4ITIHz/W/PaG4FiPNoTXjDd9mv+HMp1rBmpwqkB19wTqxe3fGKnuKSPVPFsuMNy+cEkMknDfLJpiVDMKSMXzOMOO/XW4FXB0n7Ye+VJJGIXsOWAGERm/+ISB53pPxuzh3P3H3D2T+9iJMZgAu+0b3GeulfI7ct90ZcW7ioKZ0VBgNfKbujEdnY63XzFe5QZ1kv3/RdOxPmW+iYODnoyRkG8Fj6vo2KPnFJ9Fjg5YZL3m+cH6z9MDesEPLFDtP5K2tp1PzejqFw==&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <rect x="210" y="180" width="120" height="60" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/>
        <rect x="210" y="240" width="120" height="30" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/>
        <rect x="180" y="0" width="360" height="140" fill="#f5f5f5" stroke="#666666" 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 flex-start; justify-content: unsafe center; width: 358px; height: 1px; padding-top: 7px; 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: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <b>
                                    MLP Server
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="360" y="19" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    MLP Server
                </text>
            </switch>
        </g>
        <path d="M 120 60 L 193.63 60" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 198.88 60 L 191.88 63.5 L 193.63 60 L 191.88 56.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 120 60 L 160 60 L 160 200 L 193.63 200" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 198.88 200 L 191.88 203.5 L 193.63 200 L 191.88 196.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="30" width="120" height="60" fill="#ffffff" stroke="#000000" stroke-dasharray="3 3" 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: 60px; margin-left: 1px;">
                        <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; ">
                                Web clients
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="64" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Web clients
                </text>
            </switch>
        </g>
        <path d="M 320 60 L 393.63 60" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 398.88 60 L 391.88 63.5 L 393.63 60 L 391.88 56.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="200" y="30" width="120" height="60" fill="#d5e8d4" stroke="#82b366" 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: 60px; margin-left: 201px;">
                        <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; ">
                                MLP UI
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="260" y="64" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    MLP UI
                </text>
            </switch>
        </g>
        <path d="M 520 60 L 593.63 60" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 598.88 60 L 591.88 63.5 L 593.63 60 L 591.88 56.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="400" y="30" width="120" height="60" fill="#d5e8d4" stroke="#82b366" 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: 60px; margin-left: 401px;">
                        <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; ">
                                MLP API
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="460" y="64" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    MLP API
                </text>
            </switch>
        </g>
        <path d="M 600 36 C 600 14.67 660 14.67 660 36 L 660 84 C 660 105.33 600 105.33 600 84 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 600 36 C 600 52 660 52 660 36" fill="none" stroke="#b85450" stroke-miterlimit="10" 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: 58px; height: 1px; padding-top: 72px; margin-left: 601px;">
                        <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; ">
                                Database
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="630" y="76" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Database
                </text>
            </switch>
        </g>
        <rect x="200" y="90" width="120" height="30" 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 center; width: 118px; height: 1px; padding-top: 105px; margin-left: 201px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                @caraml-dev/ui-lib library
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="260" y="108" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">
                    @caraml-dev/ui-lib library
                </text>
            </switch>
        </g>
        <path d="M 320 200 L 360 200 L 360 60 L 393.63 60" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 398.88 60 L 391.88 63.5 L 393.63 60 L 391.88 56.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="200" y="170" width="120" height="60" 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 center; width: 118px; height: 1px; padding-top: 200px; margin-left: 201px;">
                        <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; ">
                                MLP Products
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="260" y="204" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    MLP Products
                </text>
            </switch>
        </g>
        <rect x="200" y="230" width="120" height="30" 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 center; width: 118px; height: 1px; padding-top: 245px; margin-left: 201px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                @caraml-dev/ui-lib library
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="260" y="248" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">
                    @caraml-dev/ui-lib library
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" 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>