diagram.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:p="http://www.evolus.vn/Namespace/Pencil" xmlns:pencil="http://www.evolus.vn/Namespace/Pencil" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0" xmlns:style="urn:oasis:names:tc:opendocument:xmlns:style:1.0" xmlns:text="urn:oasis:names:tc:opendocument:xmlns:text:1.0" xmlns:table="urn:oasis:names:tc:opendocument:xmlns:table:1.0" xmlns:draw="urn:oasis:names:tc:opendocument:xmlns:drawing:1.0" xmlns:fo="urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:meta="urn:oasis:names:tc:opendocument:xmlns:meta:1.0" xmlns:number="urn:oasis:names:tc:opendocument:xmlns:datastyle:1.0" xmlns:svg="urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0" xmlns:chart="urn:oasis:names:tc:opendocument:xmlns:chart:1.0" xmlns:dr3d="urn:oasis:names:tc:opendocument:xmlns:dr3d:1.0" xmlns:math="http://www.w3.org/1998/Math/MathML" xmlns:form="urn:oasis:names:tc:opendocument:xmlns:form:1.0" xmlns:script="urn:oasis:names:tc:opendocument:xmlns:script:1.0" xmlns:ooo="http://openoffice.org/2004/office" xmlns:ooow="http://openoffice.org/2004/writer" xmlns:oooc="http://openoffice.org/2004/calc" xmlns:dom="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:rpt="http://openoffice.org/2005/report" xmlns:of="urn:oasis:names:tc:opendocument:xmlns:of:1.2" xmlns:rdfa="http://docs.oasis-open.org/opendocument/meta/rdfa#" xmlns:field="urn:openoffice:names:experimental:ooo-ms-interop:xmlns:field:1.0" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:em="http://exslt.org/math" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="1036" height="573" id="exportedSVG" version="1.1" pencil:version="1.2.2" sodipodi:docname=""><g inkscape:label="How this works" inkscape:groupmode="layer" id="layer_how_this_works"><g><rect x="0" y="0" width="1036" height="573" fill="none"/><g p:type="Shape" p:def="Evolus.Common:RoundedRect" id="2bfc655fac9c4b4ab1654d30084687a5" transform="matrix(1,0,0,1,136,251)"><p:metadata><p:property name="box">740,310</p:property><p:property name="withBlur">false</p:property><p:property name="radius">0,0</p:property><p:property name="textPadding">0,38.75</p:property><p:property name="fillColor">#FFFFFFFF</p:property><p:property name="strokeColor">#999999FF</p:property><p:property name="strokeStyle">2|</p:property><p:property name="textContent">Django Project Container</p:property><p:property name="textFont">Arial|normal|normal|16px|none</p:property><p:property name="textColor">#666666FF</p:property><p:property name="textAlign">1,2</p:property></p:metadata>

            <defs>
                <rect width="738" height="308" rx="0" ry="0" x="0" y="0" style="stroke-width: 2; fill: rgb(255, 255, 255); fill-opacity: 1; stroke: rgb(153, 153, 153); stroke-opacity: 1;" p:name="rrRect" id="8e44c8ada3184758a50cf4bec0baf28e" transform="translate(1,1)"/>
                <filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="4f2708e55fbe4cad98ee39401ca8e7a5">
                    <feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
                </filter>
            </defs>
            <use xlink:href="#8e44c8ada3184758a50cf4bec0baf28e" transform="translate(2, 2)" p:filter="url(#4f2708e55fbe4cad98ee39401ca8e7a5)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="acd435e6cb544acfbff86f91db0cebfd"/>
            <use xlink:href="#8e44c8ada3184758a50cf4bec0baf28e"/>
            <foreignObject x="38.75" y="249" width="662.5" height="22" p:name="text" id="ecf4454a1bed44709337a26edacd8272" style="font-family: Arial; font-size: 16px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(102, 102, 102); fill-opacity: 1; color: rgb(102, 102, 102); text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml">Django Project Container</div></foreignObject>
        </g><g p:type="Shape" p:def="Evolus.Common:RoundedRect" id="4ce924d32a2f44b687ded6eec75e373c" transform="matrix(1,0,0,1,592,338)"><p:metadata><p:property name="box">230,115</p:property><p:property name="withBlur">false</p:property><p:property name="radius">0,0</p:property><p:property name="textPadding">0,14.375000000000002</p:property><p:property name="fillColor">#FFFFFFFF</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">2|</p:property><p:property name="textContent">&lt;span xmlns="http://www.w3.org/1999/xhtml" style="font-size: 1em;"&gt;Serves the React Application&lt;br /&gt;+&lt;br /&gt;Also Handles Sign-In&lt;br /&gt;&lt;br /&gt;&lt;span style="font-weight: bold;"&gt;React Container Application&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;</p:property><p:property name="textFont">Arial|normal|normal|13px|none</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>

            <defs>
                <rect width="228" height="113" rx="0" ry="0" x="0" y="0" style="stroke-width: 2; fill: rgb(255, 255, 255); fill-opacity: 1; stroke: rgb(102, 102, 102); stroke-opacity: 1;" p:name="rrRect" id="8ecd22df82af4b10979f1e3e52dbcba2" transform="translate(1,1)"/>
                <filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="a6d6cbd590934033bdab18ecf0e80e3a">
                    <feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
                </filter>
            </defs>
            <use xlink:href="#8ecd22df82af4b10979f1e3e52dbcba2" transform="translate(2, 2)" p:filter="url(#a6d6cbd590934033bdab18ecf0e80e3a)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="628dfba786614329a185083ff6f9fc48"/>
            <use xlink:href="#8ecd22df82af4b10979f1e3e52dbcba2"/>
            <foreignObject x="14.375" y="13" width="201.25" height="90" p:name="text" id="8255ff3bf2f643689410a063780759de" style="font-family: Arial; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(0, 0, 0); fill-opacity: 1; color: rgb(0, 0, 0); text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml"><span style="font-size: 1em;">Serves the React Application<br />+<br />Also Handles Sign-In<br /><br /><span style="font-weight: bold;">React Container Application</span><br /></span></div></foreignObject>
        </g><g p:type="Shape" p:def="Evolus.Common:RoundedRect" id="8aabdd8dc4d842faa7d10dff13041044" transform="matrix(1,0,0,1,232,338)"><p:metadata><p:property name="box">230,115</p:property><p:property name="withBlur">false</p:property><p:property name="radius">0,0</p:property><p:property name="textPadding">0,14.375000000000002</p:property><p:property name="fillColor">#FFFFFFFF</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">2|</p:property><p:property name="textContent">&lt;span xmlns="http://www.w3.org/1999/xhtml" style="font-size: 1em;"&gt;Serves the Data Required for the React Application&lt;br /&gt;(&lt;span style="font-style: italic;"&gt;Example API included for To-Do Application&lt;/span&gt;)&lt;br /&gt;&lt;br /&gt;&lt;span style="font-weight: bold;"&gt;API Application&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;</p:property><p:property name="textFont">Arial|normal|normal|13px|none</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>

            <defs>
                <rect width="228" height="113" rx="0" ry="0" x="0" y="0" style="stroke-width: 2; fill: rgb(255, 255, 255); fill-opacity: 1; stroke: rgb(102, 102, 102); stroke-opacity: 1;" p:name="rrRect" id="8f8ac6b58a73481db2122f358c2db098" transform="translate(1,1)"/>
                <filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="4c53af0014f44d1eaa11f452c3380749">
                    <feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
                </filter>
            </defs>
            <use xlink:href="#8f8ac6b58a73481db2122f358c2db098" transform="translate(2, 2)" p:filter="url(#4c53af0014f44d1eaa11f452c3380749)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="f63231bf63e344889bbd1e8898ac6394"/>
            <use xlink:href="#8f8ac6b58a73481db2122f358c2db098"/>
            <foreignObject x="14.375" y="4" width="201.25" height="108" p:name="text" id="e4082a7d3d7f4f5b80aa828f4b76744c" style="font-family: Arial; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(0, 0, 0); fill-opacity: 1; color: rgb(0, 0, 0); text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml"><span style="font-size: 1em;">Serves the Data Required for the React Application<br />(<span style="font-style: italic;">Example API included for To-Do Application</span>)<br /><br /><span style="font-weight: bold;">API Application</span><br /></span></div></foreignObject>
        </g><g p:type="Shape" p:def="Evolus.AndroidICSHIFI:contactPictureIcon" id="026a8fc14cdc463ea741323b29496a55" transform="matrix(1,0,0,1,840,82)"><p:metadata><p:property name="type">1</p:property></p:metadata>
            <image x="0" y="0" width="64" height="64" preserveAspectRatio="none" p:name="image" id="3e4dec7b71bf49a789e464ef830636bb" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAKPWlDQ1BpY2MAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4BUaaISkgChhBgSQOyIqMCIoiKCFRkUccDREZCxIoqFQbH3AXkIKOPgKDZU3g/eGn2z5r03b/avvfY5Z53vnH0+AEZgsESahaoBZEoV8ogAHzw2Lh4ndwMKVCCBA4BAmC0LifSPAgDg+/Hw7IgAH/gCBODNbUAAAG7YBIbhOPx/UBfK5AoAJAwApovE2UIApBAAMnIVMgUAMgoA7KR0mQIAJQAAWx4bFw+AagEAO2WSTwMAdtIk9wIAtihTKgJAowBAJsoUiQDQDgBYl6MUiwCwYAAoypGIcwGwmwBgkqHMlABg7wCAnSkWZAMQGABgohALUwEI9gDAkEdF8AAIMwEojJSveNJXXCHOUwAA8LJki+WSlFQFbiG0xB1cXbl4oDg3Q6xQ2IQJhOkCuQjnZWXKBNLFAJMzAwCARnZEgA/O9+M5O7g6O9s42jp8taj/GvyLiI2L/5c/r8IBAQCE0/VF+7O8rBoA7hgAtvGLlrQdoGUNgNb9L5rJHgDVQoDmq1/Nw+H78fBUhULmZmeXm5trKxELbYWpX/X5nwl/AV/1s+X78fDf14P7ipMFygwFHhHggwuzMrKUcjxbJhCKcZs/HvHfLvzzd0yLECeL5WKpUIxHS8S5EmkKzsuSiiQKSZYUl0j/k4l/s+wPmLxrAGDVfgb2QltQu8oG7JcuILDogCXsAgDkd9+CqdEQBgAxBoOTdw8AMPmb/x1oGQCg2ZIUHACAFxGFC5XynMkYAQCACDRQBTZogz4YgwXYgCO4gDt4gR/MhlCIgjhYAEJIhUyQQy4shVVQBCWwEbZCFeyGWqiHRjgCLXACzsIFuALX4BY8gF4YgOcwCm9gHEEQMsJEWIg2YoCYItaII8JFZiF+SDASgcQhiUgKIkWUyFJkNVKClCNVyF6kHvkeOY6cRS4hPcg9pA8ZRn5DPqAYykDZqB5qhtqhXNQbDUKj0PloCroIzUcL0Q1oJVqDHkKb0bPoFfQW2os+R8cwwOgYBzPEbDAuxsNCsXgsGZNjy7FirAKrwRqxNqwTu4H1YiPYewKJwCLgBBuCOyGQMJcgJCwiLCeUEqoIBwjNhA7CDUIfYZTwmcgk6hKtiW5EPjGWmELMJRYRK4h1xGPE88RbxAHiGxKJxCGZk1xIgaQ4UhppCamUtJPURDpD6iH1k8bIZLI22ZrsQQ4lC8gKchF5O/kQ+TT5OnmA/I5CpxhQHCn+lHiKlFJAqaAcpJyiXKcMUsapalRTqhs1lCqiLqaWUWupbdSr1AHqOE2dZk7zoEXR0miraJW0Rtp52kPaKzqdbkR3pYfTJfSV9Er6YfpFeh/9PUODYcXgMRIYSsYGxn7GGcY9xismk2nG9GLGMxXMDcx65jnmY+Y7FZaKrQpfRaSyQqVapVnlusoLVaqqqaq36gLVfNUK1aOqV1VH1KhqZmo8NYHacrVqteNqd9TG1FnqDuqh6pnqpeoH1S+pD2mQNcw0/DREGoUa+zTOafSzMJYxi8cSslazalnnWQNsEtuczWensUvY37G72aOaGpozNKM18zSrNU9q9nIwjhmHz8nglHGOcG5zPkzRm+I9RTxl/ZTGKdenvNWaquWlJdYq1mrSuqX1QRvX9tNO196k3aL9SIegY6UTrpOrs0vnvM7IVPZU96nCqcVTj0y9r4vqWulG6C7R3afbpTump68XoCfT2653Tm9En6PvpZ+mv0X/lP6wActgloHEYIvBaYNnuCbujWfglXgHPmqoaxhoqDTca9htOG5kbjTXqMCoyeiRMc2Ya5xsvMW43XjUxMAkxGSpSYPJfVOqKdc01XSbaafpWzNzsxiztWYtZkPmWuZ883zzBvOHFkwLT4tFFjUWNy1JllzLdMudltesUCsnq1Sraqur1qi1s7XEeqd1zzTiNNdp0mk10+7YMGy8bXJsGmz6bDm2wbYFti22L+xM7OLtNtl12n22d7LPsK+1f+Cg4TDbocChzeE3RytHoWO1483pzOn+01dMb53+cob1DPGMXTPuOrGcQpzWOrU7fXJ2cZY7NzoPu5i4JLrscLnDZXPDuKXci65EVx/XFa4nXN+7Obsp3I64/epu457uftB9aKb5TPHM2pn9HkYeAo+9Hr2z8FmJs/bM6vU09BR41ng+8TL2EnnVeQ16W3qneR/yfuFj7yP3OebzlufGW8Y744v5BvgW+3b7afjN9avye+xv5J/i3+A/GuAUsCTgTCAxMChwU+Advh5fyK/nj852mb1sdkcQIygyqCroSbBVsDy4LQQNmR2yOeThHNM50jktoRDKD90c+ijMPGxR2I/hpPCw8OrwpxEOEUsjOiNZkQsjD0a+ifKJKot6MNdirnJue7RqdEJ0ffTbGN+Y8pjeWLvYZbFX4nTiJHGt8eT46Pi6+LF5fvO2zhtIcEooSrg933x+3vxLC3QWZCw4uVB1oWDh0URiYkziwcSPglBBjWAsiZ+0I2lUyBNuEz4XeYm2iIbFHuJy8WCyR3J58lCKR8rmlOFUz9SK1BEJT1IleZkWmLY77W16aPr+9ImMmIymTEpmYuZxqYY0XdqRpZ+Vl9Ujs5YVyXoXuS3aumhUHiSvy0ay52e3KtgKmaJLaaFco+zLmZVTnfMuNzr3aJ56njSva7HV4vWLB/P9879dQlgiXNK+1HDpqqV9y7yX7V2OLE9a3r7CeEXhioGVASsPrKKtSl/1U4F9QXnB69Uxq9sK9QpXFvavCVjTUKRSJC+6s9Z97e51hHWSdd3rp6/fvv5zsaj4col9SUXJx1Jh6eVvHL6p/GZiQ/KG7jLnsl0bSRulG29v8tx0oFy9PL+8f3PI5uYt+JbiLa+3Ltx6qWJGxe5ttG3Kbb2VwZWt2022b9z+sSq16la1T3XTDt0d63e83SnaeX2X167G3Xq7S3Z/2CPZc3dvwN7mGrOain2kfTn7ntZG13Z+y/22vk6nrqTu037p/t4DEQc66l3q6w/qHixrQBuUDcOHEg5d+873u9ZGm8a9TZymksNwWHn42feJ398+EnSk/Sj3aOMPpj/sOMY6VtyMNC9uHm1JbeltjWvtOT77eHube9uxH21/3H/C8ET1Sc2TZadopwpPTZzOPz12RnZm5GzK2f72he0PzsWeu9kR3tF9Puj8xQv+F851eneevuhx8cQlt0vHL3Mvt1xxvtLc5dR17Cenn451O3c3X3W52nrN9Vpbz8yeU9c9r5+94Xvjwk3+zSu35tzquT339t07CXd674ruDt3LuPfyfs798QcrHxIfFj9Se1TxWPdxzc+WPzf1Ovee7PPt63oS+eRBv7D/+T+y//FxoPAp82nFoMFg/ZDj0Ilh/+Frz+Y9G3guez4+UvSL+i87Xli8+OFXr1+7RmNHB17KX078VvpK+9X+1zNet4+FjT1+k/lm/G3xO+13B95z33d+iPkwOJ77kfyx8pPlp7bPQZ8fTmROTPwTA5jz/CVjM6IAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAl2cEFnAAAAQAAAAEAA6vP4YAAAB0NJREFUaN7NWllzGjkQbmnEnBwDAzbEpEzAL9n8/9+RYh9SrgopuxLXshiCCdhcc+2DjKyR5gJsvP1AaWZ0fJ+61S2pQV+/fgUAhBBwIjz+n4W8EdwwDOWXbzEQkTs9eJhY0EkVXosMORJ9JujMhkcyiRDYq6+95julc1rtYBqHrIEk6ML7dIbCoAfTIMejZ2/4T/lNiwdwAA2Sv2oSdIGATIMCijV6hJAMOgzD/BzyEog1j9jfJAI8YvZ7vCpyEZDRC3CFQqFQ0DRNVVWMsaIonuf5vr/dbtfrdRAEDBniJFY/eVSRTUCeUR4rEwCwLMu27WKxqKpqUler1Wo+n89mM9d1KT4mSapI55BBIBa9DL1Wq9XrdU3T0ntDCJmmaZpms9mcz+ej0Wi1WiGEMMaswr5LIo1AJvogCCzLarfbmdBlKZfL5XL54eFhOBz6vs/0gDHei0MigXT01JRbrVaj0dgXOi/VarVUKv38+fPx8ZHqIQgChjXPIsY5R+KhU/SdTudI9M9TSEi323UcJwiCWPuUJzRbA0JLHj391Ov1TNM8Hj2Ti4sLhNBkMklZD7GGFKMBGb1Ao9PpvC56Kh8+fLBtm+mB6hmygnqaCbGWtFNqPOfn56VS6dXRU/n48aOmaUzPghXFkhEJpMcs0zTPz8/fCD0AIIQuLy/pcCk00gjITHjjabfbb4eeiq7rwoJOn+IME+I9j23bhmG8NQEAaDabNBrIWxVZIgRi6bIuzs7OToAeABRFqdVqsc40g4CAm1/EhmGcZvqpOI6TQoB/k8uEAMC27ZOhBwBd1zVNk9ehXDMjErOWb+c6k4SOuIcJJdGl8e+U9kPFsqw8yyDbhABAVbXT39XxJpQiuU5khULhxOgBgJ6KeEOgBWEqcwUytsE6pRBCUhTA4OUyIYADr9+OliO2ElEm74Dd9/081XIRcN3t6Ql4nncsAbZcNpt3ILBer48iwK5u6GRst6fm8PS0BHi5PtqbAM8EIVgsFicm8Pi4QAj4Az7PhBXS4gDXAD08zBzHkev4vp8n3OQUQp7xeJ7H7ikymvBw5UP0jgbM5388z2MDMNlut7PZ7FXQq6rK5mg6ndJpSbcfyDQh7u4S7u/v5QqGYSRdJO4r5XKZle/v72MNZj8Cgv2NRqNY31ypVI7fKRWLRbZh+f3792azQVE5kAB344eCILi7u5OrEUKOPC1omsa2677v393d0REFJcQqJEIgqTaT8Xgc6450Xa9UKoehV1W1Wq2yx1+/frmul3P6If8a2HWEBoOB67pyTdM0bdve15Y0TavVaqzVZDIZj8eyx0yhkSuQcb2A53nX19excd4wDMdxZE+V1H+pVOLRz+fzm5sbHm4s7ozttJxoELpDCC2Xy2/fvsVyKBQKjUajUqmk0KDnu0ajUSwW2cvZ7M/19XUYTXm8WopJUAhC6Onpqd/vf/78OfaSlGYxttvtZrPxPI/eUmGMCSE0+yREqOHw39vbG4SQoigUtrBeU/zpHllKofFqter3//7y5S/ef/OiqmpmiAiCYDAYjEYjRVEQYqxE0HskOISjPUSyGy/VCoUCveVdr9eu65ZKpX3DWRiGy+VyuVzadpUQMp1OPc/nPobhLpkJqTfsROg0lg9/v4cxPjs7q1ar7MrR94PZbKYoimEYuq5nbmBc112v16vVCgAwxoqCHcep1+uz2WwymWTurAQOqN/vy+iFNEnwLKFpGhcXF4QQ/sKdfQ3DIAxDauiEkJ1BI1rT933XdV3XpUkkvBO+HATBcDhcLBb81/RMJklCL9GAZvO80Wgw5bKML0UQBEEYYkqFnkWic/m8GjFGhBDaZPeLMX5+JIR0Op3pdPrPP0NKm+ozxZZICnrY3dMjhLrdTrFYZHZJu6Y0EJd8526VQbgKiPril8llJVZwHMc0zdvbW5YioMPFciACep4GnU6McbfbZTdztBkDSnFzBQjDIHY5gRTXo4IxfnE+lmVdXV39+PHD932WvaQFfg2EYRjjhQT0vV5P13XB8phambBHAMzrUDBaOdAmhV5N066urgaDAePANMBzIDL0kMulfvr0iZ/7XXtACFjU5K8v5V+ZwO73OWAJIZJvoGlar9f7/v07b0JCNcKjF2i0223LsoQpBwA6Fm9R7FMcdNGKGHT5pexkdF2/vLy8ubnh1zRfJ2JCvHOsVqvyIRhx//xhc8bD5a0zAb34GPuSl3K53Gg0xuOxsI4ji1jQACEkJZ+XBFqwtGQNxANN2bq1Wq3FYrHZbHgN0/oYoguX/rbb7fSAKm8Vo/5EDEDsA6uY3ps8XLvdZggjOwM56JZKpZzHq9hNr+BtJD+TMRFJQv+MFImsAEBdniCtVitPjwnTn41mr8q8NJtNkLY5OIw6n2KxeGQ2CWXJwT1rmsYr4VkDEHU+9Xr9GPRvLfV6XbAiTAMWfVYUQk8n4btkBHKIZVk0d/ZiQrzHqFZt9vjeUBOFWhEth2H4H7FFhIl2ERn0AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDExLTA5LTEzVDE2OjE1OjE5LTA3OjAwFY1tpQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMS0wOS0xM1QxNjoxMjoxMy0wNzowMCJ8kS4AAAAASUVORK5CYII="/>
        </g><g p:type="Shape" p:def="Evolus.GTK.Widgets:Window" id="7ac9cba354a645ed92275e5dbb4d94f4" transform="matrix(1,0,0,1,140,35)"><p:metadata><p:property name="box">412,156</p:property><p:property name="headerHeight">0,30.389610389610386</p:property><p:property name="titleText">Browser</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="textFont">Liberation Sans|bold|normal|13px|none</p:property><p:property name="textAlign">1,1</p:property><p:property name="headerColor">#FFFFFFFF</p:property><p:property name="withShadow">true</p:property></p:metadata>
            
            <defs>
                <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" p:name="linearFill" id="fe568fe5531e4f22b68c9beeab74ec7d">
                    <stop style="stop-color:#165C80;stop-opacity:1" offset="0" p:name="stop1" id="489ec11782534f0f8a63ea839f8cdfa2"/>
                    <stop style="stop-color:#0A7AB4;stop-opacity:1" offset="0.5" p:name="stop2" id="2761245fe0ba4f21b58cc027188be52a"/>
                    <stop style="stop-color:#165C80;stop-opacity:1" offset="1" p:name="stop3" id="9d2c9f7b6b3b42e1b0a8b5b71757f8da"/>
                </linearGradient>
            </defs>
            <rect width="412" height="156" rx="0" ry="0" x="3" y="3" style="fill: rgb(0, 0, 0); fill-opacity: 0.2; stroke: none; visibility: visible;" p:name="shadowBox" id="c011715e13cf42cbb61485dbb574c5e2"/>
            <rect width="411" height="155" rx="0" ry="0" x="0.5" y="0.5" style="fill: none;stroke: #005481; stroke-width:1; stroke-linejoin:round;" p:name="outBorder1" id="6ac50ced05bb4301a4568276ed47180d"/>
            <rect width="409" height="153" rx="0" ry="0" x="1.5" y="1.5" style="fill: none;stroke: #18B0FF; stroke-width:1; stroke-linejoin:round;" p:name="outBorder2" id="25ad01fac3e8479da989f871e5b1d9bd"/>
            <rect width="408" height="27" rx="0" ry="0" x="2" y="2" style="fill: url(#fe568fe5531e4f22b68c9beeab74ec7d); stroke: none;" p:name="titleBg" id="6e466ef2963c4578b0fd4be4668d7d99"/>
            <rect width="407" height="124" rx="0" ry="0" x="2.5" y="29.5" style="fill: #EDE9E3; stroke: #0071AC; stroke-width:1;stroke-linejoin:round;" p:name="contentBg" id="9f9656453012469494448e08d253ca7a"/>
            <text x="31.5" y="17.25" style="font-size: 13px; font-style: normal; font-weight: bold; text-align: left; text-anchor: start; dominant-baseline: central; fill: rgb(0, 0, 0); font-family: &quot;Liberation Sans&quot;; fill-opacity: 0.333333; text-decoration: none;" xml:space="preserve" p:name="shadowText" id="e52f34ab4c534054ace230d709a925e3" transform="translate(152,-2)">Browser</text>
            <text x="31.5" y="17.25" style="font-size: 13px; font-style: normal; font-weight: bold; text-align: left; text-anchor: start; dominant-baseline: central; fill: rgb(255, 255, 255); font-family: &quot;Liberation Sans&quot;; fill-opacity: 1; text-decoration: none;" xml:space="preserve" p:name="text" id="441be32d80084aa79456d69968d9f70d" transform="translate(151,-3)">Browser</text>
            <rect width="406" height="0.38961" rx="0" ry="0" x="3" y="30" style="fill: rgb(255, 255, 255); stroke: none; fill-opacity: 1;" p:name="headerBar" id="3c6dcfefd090470da53ec2a57a9742a9"/>
        </g><g p:type="Shape" p:def="Evolus.Common:RoundedRect" id="dc47277cedd84f90b4ad31cf2f2ac784" transform="matrix(1,0,0,1,247,90)"><p:metadata><p:property name="box">200,80</p:property><p:property name="withBlur">false</p:property><p:property name="radius">0,0</p:property><p:property name="textPadding">0,10</p:property><p:property name="fillColor">#FFFFFFFF</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">2|</p:property><p:property name="textContent">Handles User Interaction&lt;br xmlns="http://www.w3.org/1999/xhtml" /&gt;&lt;br xmlns="http://www.w3.org/1999/xhtml" /&gt;&lt;span xmlns="http://www.w3.org/1999/xhtml" style="font-weight: bold;"&gt;React Application&lt;/span&gt;</p:property><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>

            <defs>
                <rect width="198" height="78" rx="0" ry="0" x="0" y="0" style="stroke-width: 2; fill: rgb(255, 255, 255); fill-opacity: 1; stroke: rgb(102, 102, 102); stroke-opacity: 1;" p:name="rrRect" id="905dca56f68b454391fe8e947abc115e" transform="translate(1,1)"/>
                <filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="b131f57ec3a24ecab7985b81aa9367a5">
                    <feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
                </filter>
            </defs>
            <use xlink:href="#905dca56f68b454391fe8e947abc115e" transform="translate(2, 2)" p:filter="url(#b131f57ec3a24ecab7985b81aa9367a5)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="2c8f82a3c3b448128b2e7f08a83e5681"/>
            <use xlink:href="#905dca56f68b454391fe8e947abc115e"/>
            <foreignObject x="10" y="13" width="180" height="54" p:name="text" id="e2910fe66405441eb9981d4e9e81697a" style="font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(0, 0, 0); fill-opacity: 1; color: rgb(0, 0, 0); text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml">Handles User Interaction<br /><br /><span style="font-weight: bold;">React Application</span></div></foreignObject>
        </g><g p:type="Shape" p:def="Evolus.Common:arrow" id="edabcf6266994a6089ebe480ec647bfb" transform="matrix(1,0,0,1,592,160)"><p:metadata><p:property xmlns:ns9889235="http://www.evolus.vn/Namespace/Pencil" name="startPin" ns9889235:viay="-30" ns9889235:viax="-135" ns9889235:connectedOutletId="middle-right" ns9889235:connectedShapeId="dc47277cedd84f90b4ad31cf2f2ac784">-145,-30</p:property><p:property xmlns:ns9889235="http://www.evolus.vn/Namespace/Pencil" name="endPin" ns9889235:viay="235.5" ns9889235:viax="-10" ns9889235:connectedOutletId="middle-left" ns9889235:connectedShapeId="4ce924d32a2f44b687ded6eec75e373c">0,235.5</p:property><p:property name="withStartArrow">true</p:property><p:property name="withEndArrow">true</p:property><p:property name="mode">multi-straight</p:property><p:property name="detached">false</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">2|</p:property><p:property name="textContent"/><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
            <defs>
                <path style="stroke-linejoin: round; fill: none;" p:name="path" id="a2c593c83e0047f79546e7a20af36e44" d="M -139 -24 L -145 -30 L -139 -36 M -145 -30 L -135 -30 L -10 236 L -9.987523388778445 235.99937616943893 L 0 235.5 M -6 230 L 0 235.5 L -5 241"/>
            </defs>
            <use xlink:href="#a2c593c83e0047f79546e7a20af36e44" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
            <use xlink:href="#a2c593c83e0047f79546e7a20af36e44" p:name="outArrow1" id="a3e9a625493c499d91cd8b55540b827a" style="stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;"/>
            <text p:name="text" id="27e0fe9ea6604189a03f4b0814806272" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
                <textPath xlink:href="#a2c593c83e0047f79546e7a20af36e44" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
                    <tspan dy="-4.333333333333333" p:name="textSpan" id="2d977e1e6c89452eb16ad1309092b622" dx="0"/>
                </textPath>
            </text>
        </g><g p:type="Shape" p:def="Evolus.Common:arrow" id="dc67ccf1577f44d5a37b301845c5ddad" transform="matrix(1,0,0,1,622,34)"><p:metadata><p:property xmlns:ns9889235="http://www.evolus.vn/Namespace/Pencil" name="startPin" ns9889235:connectedShapeId="7ac9cba354a645ed92275e5dbb4d94f4" ns9889235:connectedOutletId="middle-right" ns9889235:viax="-60" ns9889235:viay="79">-70,79</p:property><p:property xmlns:ns9889235="http://www.evolus.vn/Namespace/Pencil" name="endPin" ns9889235:viay="80" ns9889235:viax="208" ns9889235:connectedOutletId="middle-left" ns9889235:connectedShapeId="026a8fc14cdc463ea741323b29496a55">218,80</p:property><p:property name="withStartArrow">true</p:property><p:property name="withEndArrow">true</p:property><p:property name="mode">multi-straight</p:property><p:property name="detached">false</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">2|</p:property><p:property name="textContent"/><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
            <defs>
                <path style="stroke-linejoin: round; fill: none;" p:name="path" id="7e14f4b08dcf48ed97148b759035b502" d="M -64 85 L -70 79 L -64 73 M -70 79 L -60 79 L 208 80 L 208 80 L 218 80 M 212 74 L 218 80 L 212 86"/>
            </defs>
            <use xlink:href="#7e14f4b08dcf48ed97148b759035b502" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
            <use xlink:href="#7e14f4b08dcf48ed97148b759035b502" p:name="outArrow1" id="4341a226abce4088a57595b4b437ddb7" style="stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;"/>
            <text p:name="text" id="ee0ade0bee92439997797db7cd937267" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
                <textPath xlink:href="#7e14f4b08dcf48ed97148b759035b502" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
                    <tspan dy="-4.333333333333333" p:name="textSpan" id="0c68fa8fbda8437e82c86be27d4dca14" dx="0"/>
                </textPath>
            </text>
        </g><g p:type="Shape" p:def="Evolus.Common:arrow" id="82ea6d0063404d978c71b4fd86a2df50" transform="matrix(1,0,0,1,297,239)"><p:metadata><p:property xmlns:ns9889235="http://www.evolus.vn/Namespace/Pencil" name="startPin" ns9889235:viay="-59" ns9889235:viax="50" ns9889235:connectedOutletId="bottom-center" ns9889235:connectedShapeId="dc47277cedd84f90b4ad31cf2f2ac784">50,-69</p:property><p:property xmlns:ns9889235="http://www.evolus.vn/Namespace/Pencil" name="endPin" ns9889235:viay="89" ns9889235:viax="50" ns9889235:connectedOutletId="top-center" ns9889235:connectedShapeId="8aabdd8dc4d842faa7d10dff13041044">50,99</p:property><p:property name="withStartArrow">true</p:property><p:property name="withEndArrow">true</p:property><p:property name="mode">multi-straight</p:property><p:property name="detached">false</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">2|</p:property><p:property name="textContent"/><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
            <defs>
                <path style="stroke-linejoin: round; fill: none;" p:name="path" id="ed46786ff92646ce811111f8f739776b" d="M 44 -63 L 50 -69 L 56 -63 M 50 -69 L 50 -59 L 50 89 L 50 89 L 50 99 M 56 93 L 50 99 L 44 93"/>
            </defs>
            <use xlink:href="#ed46786ff92646ce811111f8f739776b" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
            <use xlink:href="#ed46786ff92646ce811111f8f739776b" p:name="outArrow1" id="0501cccb7c1b4876b8c6e49f9880a6c1" style="stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;"/>
            <text p:name="text" id="04081f2c9d974e59b057e2da6a05fcfa" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
                <textPath xlink:href="#ed46786ff92646ce811111f8f739776b" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
                    <tspan dy="-4.333333333333333" p:name="textSpan" id="c2b782577aef4c29a6580d09fcd570a4" dx="0"/>
                </textPath>
            </text>
        </g><g p:type="Shape" p:def="Evolus.Common:PlainTextV3" id="a73da5aba7394ebeb3d23921a6020e7e" transform="matrix(1,0,0,1,620,93)"><p:metadata><p:property name="disabled">false</p:property><p:property name="width">100,0</p:property><p:property name="fixedWidth">false</p:property><p:property name="label">User Interaction on the website</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none</p:property><p:property name="textAlign">0,0</p:property></p:metadata>
            <rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="fec08c82c82a481e8bc5f9dad2778635" width="180" height="15"/>
            <text xml:space="preserve" dominant-baseline="hanging" p:name="text" id="7faedd8fe88e4c1aaa4c68f346f21c37" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"><tspan x="0" y="0">User Interaction on the website</tspan></text>
        </g><g p:type="Shape" p:def="Evolus.Common:RichTextBoxV2" id="a5b1fb353cd440bf80bf9f49b9fde90d" transform="matrix(1,0,0,1,517,209)"><p:metadata><p:property name="width">200,0</p:property><p:property name="fixedWidth">false</p:property><p:property name="textContent">Initial Request to the server.&lt;br xmlns="http://www.w3.org/1999/xhtml" /&gt;When User hits the URL</p:property><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none</p:property><p:property name="textColor">#000000FF</p:property><p:property name="customStyle">
                </p:property></p:metadata>

            <foreignObject x="0" y="0" width="163" height="36" p:name="htmlObject" id="dfe551cfe0bf46f191a3d4674ad0c63c" style="color: rgb(0, 0, 0); font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
                <div xmlns="http://www.w3.org/1999/xhtml" p:name="textDiv" id="ea7e5cb65f8249f3a5dc68fa964e9fc5" style="display: inline-block; white-space: nowrap; text-decoration: none;"><div>Initial Request to the server.<br />When User hits the URL</div></div>
            </foreignObject>
        </g><g p:type="Shape" p:def="Evolus.Common:PlainTextV3" id="12607215c9844dbda8c86db76546ccdc" transform="matrix(1,0,0,1,545,295)"><p:metadata><p:property name="disabled">false</p:property><p:property name="width">100,0</p:property><p:property name="fixedWidth">false</p:property><p:property name="label">Server Responds with the React Application</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none</p:property><p:property name="textAlign">0,0</p:property></p:metadata>
            <rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="98c77882a74846ae9ef79e781f793917" width="255" height="15"/>
            <text xml:space="preserve" dominant-baseline="hanging" p:name="text" id="ea5b911e1f4b4c8f960d80328720b265" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"><tspan x="0" y="0">Server Responds with the React Application</tspan></text>
        </g><g p:type="Shape" p:def="Evolus.Common:RichTextBoxV2" id="48e4b63d18fa424d96f1928acca280c2" transform="matrix(1,0,0,1,153,209)"><p:metadata><p:property name="width">200,0</p:property><p:property name="fixedWidth">false</p:property><p:property name="textContent">&lt;div xmlns="http://www.w3.org/1999/xhtml" style="text-align: center;"&gt;Same-Origin Request/Response&lt;/div&gt;&lt;div xmlns="http://www.w3.org/1999/xhtml" style="text-align: center;"&gt;For Data Exchange&lt;/div&gt;</p:property><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none</p:property><p:property name="textColor">#000000FF</p:property><p:property name="customStyle">
                </p:property></p:metadata>

            <foreignObject x="0" y="0" width="186" height="36" p:name="htmlObject" id="0ffa93c03ddd43889746fb916fbacc7c" style="color: rgb(0, 0, 0); font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
                <div xmlns="http://www.w3.org/1999/xhtml" p:name="textDiv" id="cea3fee4b2724838bde7bcd444d655bf" style="display: inline-block; white-space: nowrap; text-decoration: none;"><div><div style="text-align: center;">Same-Origin Request/Response</div><div style="text-align: center;">For Data Exchange</div></div></div>
            </foreignObject>
        </g></g></g></svg>