mirrors/presentations
1
0
Fork 0
mirror of https://gricad-gitlab.univ-grenoble-alpes.fr/tienyoun/presentations.git synced 2026-09-26 21:41:08 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
8cf81da2c6160c06b78cdfd3a6a011ac7011c07e
presentations/docker-example/presentation/assets/Compose.drawio.svg
T
Nathan Tien You 8cf81da2c6 Initial commit
2024-09-18 09:24:08 +02:00

4 lines
28 KiB
XML
Raw Blame History

<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than draw.io -->
<!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" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="633px" height="314px" viewBox="-0.5 -0.5 633 314" content="&lt;mxfile host=&quot;app.diagrams.net&quot; agent=&quot;Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0&quot; scale=&quot;1&quot; border=&quot;0&quot; version=&quot;24.7.5&quot;&gt;&#xA; &lt;diagram name=&quot;Page-1&quot; id=&quot;8W8dwPsys7Ddhd2VQ_wd&quot;&gt;&#xA; &lt;mxGraphModel dx=&quot;989&quot; dy=&quot;1645&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;850&quot; pageHeight=&quot;1100&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#xA; &lt;root&gt;&#xA; &lt;mxCell id=&quot;0&quot; /&gt;&#xA; &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;&#xA; &lt;mxCell id=&quot;2&quot; value=&quot;&amp;lt;div&amp;gt;Host&amp;lt;/div&amp;gt;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;140&quot; y=&quot;-440&quot; width=&quot;630&quot; height=&quot;220&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;3&quot; value=&quot;Docker network : front&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fillStyle=solid;fillColor=#fff2cc;strokeColor=#d6b656;fillOpacity=75;absoluteArcSize=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;150&quot; y=&quot;-420&quot; width=&quot;300&quot; height=&quot;170&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;4&quot; value=&quot;Docker network : back&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fillStyle=solid;fillColor=#e1d5e7;strokeColor=#9673a6;fillOpacity=75;absoluteArcSize=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;450&quot; y=&quot;-420&quot; width=&quot;310&quot; height=&quot;170&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;5&quot; value=&quot;Database&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;verticalAlign=top;fillColor=#d5e8d4;strokeColor=#82b366;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;580&quot; y=&quot;-399.63&quot; width=&quot;170&quot; height=&quot;120&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;6&quot; value=&quot;&quot; style=&quot;shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--gWwIv4vV--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880%2Fhttps%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F787xlgwc2hhq3ctzxcvs.png&amp;amp;f=1&amp;amp;nofb=1&amp;amp;ipt=9a7175f971d0bc410ad6367f1a2ea55b678b6891909309c9b748e750309b8a5a&amp;amp;ipo=images;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;625&quot; y=&quot;-379.63&quot; width=&quot;80&quot; height=&quot;80&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;7&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;&quot; parent=&quot;1&quot; source=&quot;19&quot; target=&quot;5&quot; edge=&quot;1&quot;&gt;&#xA; &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#xA; &lt;Array as=&quot;points&quot;&gt;&#xA; &lt;mxPoint x=&quot;560&quot; y=&quot;-340&quot; /&gt;&#xA; &lt;mxPoint x=&quot;560&quot; y=&quot;-340&quot; /&gt;&#xA; &lt;/Array&gt;&#xA; &lt;/mxGeometry&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;8&quot; value=&quot;Backend&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;verticalAlign=top;fillColor=#d5e8d4;strokeColor=#82b366;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;370&quot; y=&quot;-399.63&quot; width=&quot;170&quot; height=&quot;120&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;9&quot; value=&quot;&quot; style=&quot;shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://logos-download.com/wp-content/uploads/2016/09/Node_logo_NodeJS.png;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;400&quot; y=&quot;-379.26&quot; width=&quot;130&quot; height=&quot;79.63&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;10&quot; value=&quot;Frontend&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;verticalAlign=top;fillColor=#d5e8d4;strokeColor=#82b366;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;162.5&quot; y=&quot;-399.93&quot; width=&quot;170&quot; height=&quot;120&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;11&quot; value=&quot;&quot; style=&quot;shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://httpd.apache.org/images/httpd_logo_wide_new.png;clipPath=inset(0% 39.67% 0% 27%);&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;167.01999999999998&quot; y=&quot;-359.38&quot; width=&quot;145.48&quot; height=&quot;39.28&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;12&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;&quot; parent=&quot;1&quot; target=&quot;17&quot; edge=&quot;1&quot;&gt;&#xA; &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#xA; &lt;mxPoint x=&quot;332.5&quot; y=&quot;-339.5999999999999&quot; as=&quot;sourcePoint&quot; /&gt;&#xA; &lt;/mxGeometry&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;17&quot; value=&quot;3000&quot; style=&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;360.38&quot; y=&quot;-354.74&quot; width=&quot;29.62&quot; height=&quot;29.62&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;18&quot; value=&quot;&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;&quot; parent=&quot;1&quot; source=&quot;8&quot; target=&quot;19&quot; edge=&quot;1&quot;&gt;&#xA; &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#xA; &lt;mxPoint x=&quot;540&quot; y=&quot;-340&quot; as=&quot;sourcePoint&quot; /&gt;&#xA; &lt;mxPoint x=&quot;580&quot; y=&quot;-340&quot; as=&quot;targetPoint&quot; /&gt;&#xA; &lt;Array as=&quot;points&quot; /&gt;&#xA; &lt;/mxGeometry&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;19&quot; value=&quot;6379&quot; style=&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;570&quot; y=&quot;-354.43&quot; width=&quot;29.61&quot; height=&quot;29.61&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;20&quot; value=&quot;80&quot; style=&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;232.39&quot; y=&quot;-290&quot; width=&quot;30.22&quot; height=&quot;30.22&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;21&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;&quot; parent=&quot;1&quot; source=&quot;22&quot; target=&quot;27&quot; edge=&quot;1&quot;&gt;&#xA; &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;22&quot; value=&quot;Client&quot; style=&quot;image;points=[];aspect=fixed;html=1;align=center;shadow=0;dashed=0;image=img/lib/allied_telesis/computer_and_terminals/Personal_Computer.svg;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;138.15&quot; y=&quot;-210&quot; width=&quot;45.6&quot; height=&quot;61.800000000000004&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;23&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;&quot; parent=&quot;1&quot; source=&quot;24&quot; target=&quot;27&quot; edge=&quot;1&quot;&gt;&#xA; &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;24&quot; value=&quot;Client&quot; style=&quot;image;points=[];aspect=fixed;html=1;align=center;shadow=0;dashed=0;image=img/lib/allied_telesis/computer_and_terminals/Personal_Computer.svg;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;311.25&quot; y=&quot;-210&quot; width=&quot;45.6&quot; height=&quot;61.800000000000004&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;25&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;&quot; parent=&quot;1&quot; source=&quot;27&quot; target=&quot;20&quot; edge=&quot;1&quot;&gt;&#xA; &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;26&quot; value=&quot;Exposed port : 80&quot; style=&quot;edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];&quot; parent=&quot;25&quot; vertex=&quot;1&quot; connectable=&quot;0&quot;&gt;&#xA; &lt;mxGeometry x=&quot;0.09&quot; y=&quot;1&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#xA; &lt;mxPoint as=&quot;offset&quot; /&gt;&#xA; &lt;/mxGeometry&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;mxCell id=&quot;27&quot; value=&quot;80&quot; style=&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#xA; &lt;mxGeometry x=&quot;232.39&quot; y=&quot;-229.99999999999997&quot; width=&quot;30.22&quot; height=&quot;30.22&quot; as=&quot;geometry&quot; /&gt;&#xA; &lt;/mxCell&gt;&#xA; &lt;/root&gt;&#xA; &lt;/mxGraphModel&gt;&#xA; &lt;/diagram&gt;&#xA;&lt;/mxfile&gt;&#xA;"><defs><clipPath id="mx-clippath-inset-0-39-67-0-27-1" clipPathUnits="objectBoundingBox"><rect x="0.27" y="0" width="0.33329999999999993" height="1"/></clipPath></defs><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="2"><g><rect x="1" y="0" width="630" height="220" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><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: 628px; height: 1px; padding-top: 7px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>Host</div></div></div></div></foreignObject><text x="316" y="19" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Host</text></switch></g></g></g><g data-cell-id="3"><g><rect x="11" y="20" width="300" height="170" fill-opacity="0.75" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/></g><g><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: 298px; height: 1px; padding-top: 27px; margin-left: 12px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Docker network : front</div></div></div></foreignObject><text x="161" y="39" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Docker network : front</text></switch></g></g></g><g data-cell-id="4"><g><rect x="311" y="20" width="310" height="170" fill-opacity="0.75" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/></g><g><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: 308px; height: 1px; padding-top: 27px; margin-left: 312px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Docker network : back</div></div></div></foreignObject><text x="466" y="39" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Docker network : back</text></switch></g></g></g><g data-cell-id="5"><g><rect x="441" y="40.37" width="170" height="120" rx="18" ry="18" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/></g><g><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: 168px; height: 1px; padding-top: 47px; margin-left: 442px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Database</div></div></div></foreignObject><text x="526" y="59" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Database</text></switch></g></g></g><g data-cell-id="6"><g><image x="485.5" y="59.87" width="80" height="80" xlink:href="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--gWwIv4vV--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880%2Fhttps%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F787xlgwc2hhq3ctzxcvs.png&amp;f=1&amp;nofb=1&amp;ipt=9a7175f971d0bc410ad6367f1a2ea55b678b6891909309c9b748e750309b8a5a&amp;ipo=images" preserveAspectRatio="none"/></g></g><g data-cell-id="7"><g><path d="M 431 100.38 L 420.97 100.38 L 434.63 100.38" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 439.88 100.38 L 432.88 103.88 L 434.63 100.38 L 432.88 96.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="8"><g><rect x="231" y="40.37" width="170" height="120" rx="18" ry="18" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/></g><g><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: 168px; height: 1px; padding-top: 47px; margin-left: 232px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Backend</div></div></div></foreignObject><text x="316" y="59" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Backend</text></switch></g></g></g><g data-cell-id="9"><g><image x="260.5" y="60.24" width="130" height="79.63" xlink:href="https://logos-download.com/wp-content/uploads/2016/09/Node_logo_NodeJS.png" preserveAspectRatio="none"/></g></g><g data-cell-id="10"><g><rect x="23.5" y="40.07" width="170" height="120" rx="18" ry="18" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/></g><g><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: 168px; height: 1px; padding-top: 47px; margin-left: 25px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Frontend</div></div></div></foreignObject><text x="109" y="59" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Frontend</text></switch></g></g></g><g data-cell-id="11"><g><image x="-90.3305850585059" y="80.11999999999989" width="436.48364836483654" height="39.28" xlink:href="https://httpd.apache.org/images/httpd_logo_wide_new.png" preserveAspectRatio="none" clip-path="url(#mx-clippath-inset-0-39-67-0-27-1)"/></g></g><g data-cell-id="12"><g><path d="M 193.5 100.4 L 215.01 100.38" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 220.26 100.38 L 213.26 103.89 L 215.01 100.38 L 213.26 96.89 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="17"><g><ellipse cx="236.19" cy="100.07" rx="14.81" ry="14.81" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><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: 28px; height: 1px; padding-top: 100px; margin-left: 222px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">3000</div></div></div></foreignObject><text x="236" y="104" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">3000</text></switch></g></g></g><g data-cell-id="18"><g><path d="M 401 100.38 L 420.97 100.38 L 424.63 100.38" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 429.88 100.38 L 422.88 103.88 L 424.63 100.38 L 422.88 96.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="19"><g><ellipse cx="445.8" cy="100.38" rx="14.805" ry="14.805" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><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: 28px; height: 1px; padding-top: 100px; margin-left: 432px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">6379</div></div></div></foreignObject><text x="446" y="104" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">6379</text></switch></g></g></g><g data-cell-id="20"><g><ellipse cx="108.5" cy="165.11" rx="15.11" ry="15.11" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><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: 28px; height: 1px; padding-top: 165px; margin-left: 94px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">80</div></div></div></foreignObject><text x="108" y="169" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">80</text></switch></g></g></g><g data-cell-id="21"><g><path d="M 44.75 260.93 L 108.48 260.93 L 108.49 246.59" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 108.5 241.34 L 111.99 248.34 L 108.49 246.59 L 104.99 248.34 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="22"><g><image x="-1.35" y="229.5" width="45.6" height="61.8" xlink:href="https://app.diagrams.net/img/lib/allied_telesis/computer_and_terminals/Personal_Computer.svg"/></g><g><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: 1px; height: 1px; padding-top: 299px; margin-left: 22px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Client</div></div></div></foreignObject><text x="22" y="311" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Client</text></switch></g></g></g><g data-cell-id="23"><g><path d="M 172.25 260.93 L 108.48 260.93 L 108.49 246.59" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 108.5 241.34 L 111.99 248.34 L 108.49 246.59 L 104.99 248.34 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="24"><g><image x="171.75" y="229.5" width="45.6" height="61.8" xlink:href="https://app.diagrams.net/img/lib/allied_telesis/computer_and_terminals/Personal_Computer.svg"/></g><g><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: 1px; height: 1px; padding-top: 299px; margin-left: 195px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Client</div></div></div></foreignObject><text x="195" y="311" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Client</text></switch></g></g></g><g data-cell-id="25"><g><path d="M 108.5 210 L 108.48 190.03 L 108.48 200.17 L 108.49 186.59" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 108.5 181.34 L 111.99 188.34 L 108.49 186.59 L 104.99 188.33 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="26"><g><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: 1px; height: 1px; padding-top: 198px; margin-left: 110px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Exposed port : 80</div></div></div></foreignObject><text x="110" y="201" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Exposed port : 80</text></switch></g></g></g></g><g data-cell-id="27"><g><ellipse cx="108.5" cy="225.11" rx="15.11" ry="15.11" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><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: 28px; height: 1px; padding-top: 225px; margin-left: 94px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">80</div></div></div></foreignObject><text x="108" y="229" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">80</text></switch></g></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/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>
Reference in New Issue View Git Blame Copy Permalink