images/langt-co-url-shortener-infrastructure-and-architecture.svg

<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 369.4140625 281" style="max-width: 100%;" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");'</style><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#graph-div .error-icon{fill:#a44141;}#graph-div .error-text{fill:#ddd;stroke:#ddd;}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:lightgrey;stroke:lightgrey;}#graph-div .marker.cross{stroke:lightgrey;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#graph-div .cluster-label text{fill:#F9FFFE;}#graph-div .cluster-label span,#graph-div p{color:#F9FFFE;}#graph-div .label text,#graph-div span,#graph-div p{fill:#ccc;color:#ccc;}#graph-div .node rect,#graph-div .node circle,#graph-div .node ellipse,#graph-div .node polygon,#graph-div .node path{fill:#1f2020;stroke:#81B1DB;stroke-width:1px;}#graph-div .flowchart-label text{text-anchor:middle;}#graph-div .node .label{text-align:center;}#graph-div .node.clickable{cursor:pointer;}#graph-div .arrowheadPath{fill:lightgrey;}#graph-div .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#graph-div .flowchart-link{stroke:lightgrey;fill:none;}#graph-div .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#graph-div .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#graph-div .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#graph-div .cluster text{fill:#F9FFFE;}#graph-div .cluster span,#graph-div p{color:#F9FFFE;}#graph-div div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#graph-div .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="10" viewBox="0 0 12 20" class="marker flowchart" id="flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="0" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-LTU LE-DO" id="L-LTU-DO-0" d="M146.65341537610618,39L136.29321073008848,45.166666666666664C125.93300608407078,51.333333333333336,105.2125967920354,63.666666666666664,94.85239214601769,76C84.4921875,88.33333333333333,84.4921875,100.66666666666667,84.4921875,106.83333333333333L84.4921875,113"></path><path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-DO LE-LF" id="L-DO-LF-0" d="M84.4921875,152L84.4921875,158.16666666666666C84.4921875,164.33333333333334,84.4921875,176.66666666666666,84.4921875,189C84.4921875,201.33333333333334,84.4921875,213.66666666666666,84.4921875,219.83333333333334L84.4921875,226"></path><path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-LTU LE-Python" id="L-LTU-Python-0" d="M212.17470962389382,39L222.5349142699115,45.166666666666664C232.8951189159292,51.333333333333336,253.61552820796462,63.666666666666664,263.97573285398227,76C274.3359375,88.33333333333333,274.3359375,100.66666666666667,274.3359375,106.83333333333333L274.3359375,113"></path><path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-Python LE-ForgeAPI" id="L-Python-ForgeAPI-0" d="M274.3359375,152L274.3359375,158.16666666666666C274.3359375,164.33333333333334,274.3359375,176.66666666666666,274.3359375,189C274.3359375,201.33333333333334,274.3359375,213.66666666666666,274.3359375,219.83333333333334L274.3359375,226"></path></g><g class="edgeLabels"><g transform="translate(84.4921875, 76)" class="edgeLabel"><g transform="translate(-35.8359375, -12)" class="label"><foreignObject height="24" width="71.671875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Hosted on</span></div></foreignObject></g></g><g transform="translate(84.4921875, 189)" class="edgeLabel"><g transform="translate(-42.1015625, -12)" class="label"><foreignObject height="24" width="84.203125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Managed by</span></div></foreignObject></g></g><g transform="translate(274.3359375, 76)" class="edgeLabel"><g transform="translate(-79.078125, -12)" class="label"><foreignObject height="24" width="158.15625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Redirects managed by</span></div></foreignObject></g></g><g transform="translate(274.3359375, 189)" class="edgeLabel"><g transform="translate(-16.03125, -12)" class="label"><foreignObject height="24" width="32.0625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Uses</span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(179.4140625, 19.5)" id="flowchart-LTU-148" class="node default default flowchart-label"><rect height="39" width="181.0625" y="-19.5" x="-90.53125" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-83.03125, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="166.0625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">langt.co URL Shortener</span></div></foreignObject></g></g><g transform="translate(84.4921875, 132.5)" id="flowchart-DO-149" class="node default default flowchart-label"><rect height="39" width="168.984375" y="-19.5" x="-84.4921875" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-76.9921875, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="153.984375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Digital Ocean Droplet</span></div></foreignObject></g></g><g transform="translate(84.4921875, 245.5)" id="flowchart-LF-151" class="node default default flowchart-label"><rect height="39" width="112.203125" y="-19.5" x="-56.1015625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-48.6015625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="97.203125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Laravel Forge</span></div></foreignObject></g></g><g transform="translate(274.3359375, 132.5)" id="flowchart-Python-153" class="node default default flowchart-label"><rect height="39" width="110.703125" y="-19.5" x="-55.3515625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-47.8515625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="95.703125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Python Script</span></div></foreignObject></g></g><g transform="translate(274.3359375, 245.5)" id="flowchart-ForgeAPI-155" class="node default default flowchart-label"><rect height="39" width="82.59375" y="-19.5" x="-41.296875" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-33.796875, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="67.59375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Forge API</span></div></foreignObject></g></g></g></g></g></svg>