<mxfile host="orrery" agent="orrery" type="device">
<diagram id="orrery" name="Container diagram for an online store">
<mxGraphModel dx="720" dy="1360" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="720" pageHeight="1360" background="#0b1012" math="0" shadow="0">
<root><mxCell id="0"/><mxCell id="1" parent="0"/>
<mxCell id="title" value="Container diagram for an online store" style="text;html=1;align=left;verticalAlign=top;fontSize=20;fontStyle=1;fontColor=#9d9fa0;fontFamily=Inter,Helvetica,Arial,sans-serif;spacing=0;" vertex="1" parent="1"><mxGeometry x="28" y="24" width="379.81" height="25" as="geometry"/></mxCell>
<mxCell id="subtitle" value="C4 model, level 2: the containers inside the system, and the people and external systems around it" style="text;html=1;align=left;verticalAlign=top;fontSize=13;fontColor=#979a9b;fontFamily=Inter,Helvetica,Arial,sans-serif;spacing=0;" vertex="1" parent="1"><mxGeometry x="28" y="53" width="625.26" height="16.9" as="geometry"/></mxCell>
<mxCell id="g-store" value="Online store [Software System]" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#323638;strokeWidth=1.25;dashed=1;dashPattern=6 4;verticalAlign=top;align=left;spacingLeft=116;spacingTop=6;fontColor=#649adb;fontStyle=1;fontSize=13;fontFamily=Inter,Helvetica,Arial,sans-serif;container=1;collapsible=0;recursiveResize=0;pointerEvents=0;" vertex="1" parent="1"><mxGeometry x="225" y="370" width="465" height="656" as="geometry"/></mxCell>
<mxCell id="n-customer" value="Customer&lt;br&gt;&lt;font style=&quot;font-size: 11px;&quot; color=&quot;#979a9b&quot;&gt;[Person]&lt;br&gt;Browses and buys products&lt;/font&gt;" style="shape=actor;whiteSpace=wrap;html=1;fillColor=#0b1823;strokeColor=#08427b;fontColor=#9d9fa0;fontSize=13;fontStyle=1;fontFamily=Inter,Helvetica,Arial,sans-serif;" vertex="1" parent="1"><mxGeometry x="214" y="96" width="184" height="105" as="geometry"/></mxCell>
<mxCell id="n-staff" value="Support staff&lt;br&gt;&lt;font style=&quot;font-size: 11px;&quot; color=&quot;#979a9b&quot;&gt;[Person]&lt;br&gt;Handles orders and refunds&lt;/font&gt;" style="shape=actor;whiteSpace=wrap;html=1;fillColor=#0b1823;strokeColor=#08427b;fontColor=#9d9fa0;fontSize=13;fontStyle=1;fontFamily=Inter,Helvetica,Arial,sans-serif;" vertex="1" parent="1"><mxGeometry x="461" y="96" width="184" height="105" as="geometry"/></mxCell>
<mxCell id="n-web" value="Web application&lt;br&gt;&lt;font style=&quot;font-size: 11px;&quot; color=&quot;#979a9b&quot;&gt;[Container: React]&lt;br&gt;Lets customers browse and&lt;br&gt;check out&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#142431;strokeColor=#438dd5;fontColor=#9d9fa0;fontSize=13;fontStyle=1;fontFamily=Inter,Helvetica,Arial,sans-serif;" vertex="1" parent="g-store"><mxGeometry x="20" y="52" width="183" height="90" as="geometry"/></mxCell>
<mxCell id="n-admin" value="Back office&lt;br&gt;&lt;font style=&quot;font-size: 11px;&quot; color=&quot;#979a9b&quot;&gt;[Container: React]&lt;br&gt;Lets staff manage orders&lt;br&gt;and refunds&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#142431;strokeColor=#438dd5;fontColor=#9d9fa0;fontSize=13;fontStyle=1;fontFamily=Inter,Helvetica,Arial,sans-serif;" vertex="1" parent="g-store"><mxGeometry x="243" y="52" width="169" height="90" as="geometry"/></mxCell>
<mxCell id="n-api" value="API application&lt;br&gt;&lt;font style=&quot;font-size: 11px;&quot; color=&quot;#979a9b&quot;&gt;[Container: Go]&lt;br&gt;Serves catalog, cart and&lt;br&gt;checkout&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#142431;strokeColor=#438dd5;fontColor=#9d9fa0;fontSize=13;fontStyle=1;fontFamily=Inter,Helvetica,Arial,sans-serif;" vertex="1" parent="g-store"><mxGeometry x="57" y="306" width="165" height="90" as="geometry"/></mxCell>
<mxCell id="n-db" value="Database&lt;br&gt;&lt;font style=&quot;font-size: 11px;&quot; color=&quot;#979a9b&quot;&gt;[Container: PostgreSQL]&lt;br&gt;Stores products and orders&lt;/font&gt;" style="shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=8;whiteSpace=wrap;html=1;fillColor=#142431;strokeColor=#438dd5;fontColor=#9d9fa0;fontSize=13;fontStyle=1;fontFamily=Inter,Helvetica,Arial,sans-serif;" vertex="1" parent="g-store"><mxGeometry x="128" y="545" width="182" height="91" as="geometry"/></mxCell>
<mxCell id="n-payments" value="Payment provider&lt;br&gt;&lt;font style=&quot;font-size: 11px;&quot; color=&quot;#979a9b&quot;&gt;[Software System]&lt;br&gt;Takes card payments and&lt;br&gt;refunds&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#222628;strokeColor=#999999;fontColor=#9d9fa0;fontSize=13;fontStyle=1;fontFamily=Inter,Helvetica,Arial,sans-serif;" vertex="1" parent="1"><mxGeometry x="247" y="1195" width="173" height="90" as="geometry"/></mxCell>
<mxCell id="n-email" value="Email service&lt;br&gt;&lt;font style=&quot;font-size: 11px;&quot; color=&quot;#979a9b&quot;&gt;[Software System]&lt;br&gt;Delivers order receipts&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#222628;strokeColor=#999999;fontColor=#9d9fa0;fontSize=13;fontStyle=1;fontFamily=Inter,Helvetica,Arial,sans-serif;" vertex="1" parent="1"><mxGeometry x="51" y="1202.5" width="156" height="75" as="geometry"/></mxCell>
<mxCell id="e1" value="Browses and buys products using [HTTPS]" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;html=1;endArrow=open;endFill=1;endSize=6;startArrow=none;startFill=1;startSize=6;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;fontColor=#979899;fontSize=11;fontFamily=Inter,Helvetica,Arial,sans-serif;labelBackgroundColor=#0b1012;exitX=0.668;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.503;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="n-customer" target="n-web"><mxGeometry relative="1" as="geometry"></mxGeometry></mxCell>
<mxCell id="e2" value="Manages orders using [HTTPS]" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;html=1;endArrow=open;endFill=1;endSize=6;startArrow=none;startFill=1;startSize=6;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;fontColor=#979899;fontSize=11;fontFamily=Inter,Helvetica,Arial,sans-serif;labelBackgroundColor=#0b1012;exitX=0.5;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.503;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="n-staff" target="n-admin"><mxGeometry relative="1" as="geometry"></mxGeometry></mxCell>
<mxCell id="e3" value="Makes API calls to [JSON/HTTPS]" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;html=1;endArrow=open;endFill=1;endSize=6;startArrow=none;startFill=1;startSize=6;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;fontColor=#979899;fontSize=11;fontFamily=Inter,Helvetica,Arial,sans-serif;labelBackgroundColor=#0b1012;exitX=0.503;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.333;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="n-web" target="n-api"><mxGeometry relative="1" as="geometry"></mxGeometry></mxCell>
<mxCell id="e4" value="Makes API calls to [JSON/HTTPS]" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;html=1;endArrow=open;endFill=1;endSize=6;startArrow=none;startFill=1;startSize=6;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;fontColor=#979899;fontSize=11;fontFamily=Inter,Helvetica,Arial,sans-serif;labelBackgroundColor=#0b1012;exitX=0.503;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.667;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="n-admin" target="n-api"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="553" y="632"/><mxPoint x="392" y="632"/></Array></mxGeometry></mxCell>
<mxCell id="e5" value="Reads and writes [SQL]" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;html=1;endArrow=open;endFill=1;endSize=6;startArrow=none;startFill=1;startSize=6;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;fontColor=#979899;fontSize=11;fontFamily=Inter,Helvetica,Arial,sans-serif;labelBackgroundColor=#0b1012;exitX=0.752;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="n-api" target="n-db"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="406" y="871"/><mxPoint x="444" y="871"/></Array></mxGeometry></mxCell>
<mxCell id="e6" value="Charges cards and issues refunds [HTTPS]" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;html=1;endArrow=open;endFill=1;endSize=6;startArrow=none;startFill=1;startSize=6;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;fontColor=#979899;fontSize=11;fontFamily=Inter,Helvetica,Arial,sans-serif;labelBackgroundColor=#0b1012;exitX=0.503;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.503;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="n-api" target="n-payments"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="365" y="786"/><mxPoint x="334" y="786"/></Array></mxGeometry></mxCell>
<mxCell id="e7" value="Sends e-mail using [SMTP]" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;html=1;endArrow=open;endFill=1;endSize=6;startArrow=none;startFill=1;startSize=6;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;fontColor=#979899;fontSize=11;fontFamily=Inter,Helvetica,Arial,sans-serif;labelBackgroundColor=#0b1012;exitX=0.248;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.667;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="n-api" target="n-email"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="323" y="1051"/><mxPoint x="155" y="1051"/></Array></mxGeometry></mxCell>
<mxCell id="e8" value="Sends receipts to [SMTP]" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;html=1;endArrow=none;endFill=1;endSize=6;startArrow=open;startFill=1;startSize=6;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;fontColor=#979899;fontSize=11;fontFamily=Inter,Helvetica,Arial,sans-serif;labelBackgroundColor=#0b1012;exitX=0.332;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.333;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="n-customer" target="n-email"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="275" y="221"/><mxPoint x="28" y="221"/><mxPoint x="28" y="1151"/><mxPoint x="103" y="1151"/></Array></mxGeometry></mxCell>
<mxCell id="legend" value="" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;fillColor=#0b1012;strokeColor=#323638;container=1;collapsible=0;recursiveResize=0;" vertex="1" parent="1"><mxGeometry x="497" y="1297" width="195" height="35" as="geometry"/></mxCell>
<mxCell id="legend:0:line" value="" style="line;html=1;fillColor=none;strokeColor=#484c4d;strokeWidth=1.5;dashed=0;" vertex="1" parent="legend"><mxGeometry x="10" y="11.5" width="28" height="12" as="geometry"/></mxCell>
<mxCell id="legend:0:text" value="Relationship [technology]" style="text;html=1;align=left;verticalAlign=middle;whiteSpace=nowrap;fontSize=11.5;fontColor=#9d9fa0;fontFamily=Inter,Helvetica,Arial,sans-serif;spacing=0;" vertex="1" parent="legend"><mxGeometry x="46" y="10" width="138.63" height="15" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>
