images/sc2.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.43.0 (0)
 -->
<!-- Title: SynopticChart Pages: 1 -->
<svg width="1176pt" height="1036pt"
 viewBox="0.00 0.00 1176.00 1036.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(36 1000)">
<title>SynopticChart</title>
<polygon fill="white" stroke="transparent" points="-36,36 -36,-1000 1140,-1000 1140,36 -36,36"/>
<!-- central -->
<g id="node1" class="node">
<title>central</title>
<path fill="#bebebe" stroke="black" d="M317,-454C317,-454 12,-454 12,-454 6,-454 0,-448 0,-442 0,-442 0,-430 0,-430 0,-424 6,-418 12,-418 12,-418 317,-418 317,-418 323,-418 329,-424 329,-430 329,-430 329,-442 329,-442 329,-448 323,-454 317,-454"/>
<text text-anchor="middle" x="164.5" y="-432.2" font-family="Times,serif" font-size="16.00">Modern Web Development Ecosystem</text>
</g>
<!-- frontend -->
<g id="node2" class="node">
<title>frontend</title>
<path fill="#c1c1c1" stroke="black" d="M601.5,-732C601.5,-732 458.5,-732 458.5,-732 452.5,-732 446.5,-726 446.5,-720 446.5,-720 446.5,-708 446.5,-708 446.5,-702 452.5,-696 458.5,-696 458.5,-696 601.5,-696 601.5,-696 607.5,-696 613.5,-702 613.5,-708 613.5,-708 613.5,-720 613.5,-720 613.5,-726 607.5,-732 601.5,-732"/>
<text text-anchor="middle" x="530" y="-710.9" font-family="Times,serif" font-size="12.00">I. Frontend Development</text>
</g>
<!-- central&#45;&gt;frontend -->
<g id="edge1" class="edge">
<title>central&#45;&gt;frontend</title>
<path fill="none" stroke="#4a4a4a" d="M165,-454.24C165,-516.09 165,-714 165,-714 165,-714 436.26,-714 436.26,-714"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="436.26,-717.5 446.26,-714 436.26,-710.5 436.26,-717.5"/>
<text text-anchor="middle" x="386" y="-543.8" font-family="Times,serif" font-size="9.00" fill="#4a4a4a">Begins with</text>
</g>
<!-- backend -->
<g id="node11" class="node">
<title>backend</title>
<path fill="#c1c1c1" stroke="black" d="M600.5,-454C600.5,-454 459.5,-454 459.5,-454 453.5,-454 447.5,-448 447.5,-442 447.5,-442 447.5,-430 447.5,-430 447.5,-424 453.5,-418 459.5,-418 459.5,-418 600.5,-418 600.5,-418 606.5,-418 612.5,-424 612.5,-430 612.5,-430 612.5,-442 612.5,-442 612.5,-448 606.5,-454 600.5,-454"/>
<text text-anchor="middle" x="530" y="-432.9" font-family="Times,serif" font-size="12.00">II. Backend Architecture</text>
</g>
<!-- central&#45;&gt;backend -->
<g id="edge10" class="edge">
<title>central&#45;&gt;backend</title>
<path fill="none" stroke="#4a4a4a" d="M329.07,-436C329.07,-436 437.22,-436 437.22,-436"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="437.22,-439.5 447.22,-436 437.22,-432.5 437.22,-439.5"/>
<text text-anchor="middle" x="386" y="-438.8" font-family="Times,serif" font-size="9.00" fill="#4a4a4a">Connects to</text>
</g>
<!-- deployment -->
<g id="node20" class="node">
<title>deployment</title>
<path fill="#c1c1c1" stroke="black" d="M605,-248C605,-248 455,-248 455,-248 449,-248 443,-242 443,-236 443,-236 443,-224 443,-224 443,-218 449,-212 455,-212 455,-212 605,-212 605,-212 611,-212 617,-218 617,-224 617,-224 617,-236 617,-236 617,-242 611,-248 605,-248"/>
<text text-anchor="middle" x="530" y="-226.9" font-family="Times,serif" font-size="12.00">III. Deployment &amp; DevOps</text>
</g>
<!-- central&#45;&gt;deployment -->
<g id="edge19" class="edge">
<title>central&#45;&gt;deployment</title>
<path fill="none" stroke="#4a4a4a" d="M165,-417.72C165,-367.3 165,-230 165,-230 165,-230 432.57,-230 432.57,-230"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="432.57,-233.5 442.57,-230 432.57,-226.5 432.57,-233.5"/>
<text text-anchor="middle" x="386" y="-275.8" font-family="Times,serif" font-size="9.00" fill="#4a4a4a">Culminates in</text>
</g>
<!-- frontend_frameworks -->
<g id="node3" class="node">
<title>frontend_frameworks</title>
<path fill="#c5c5c5" stroke="black" d="M838,-877C838,-877 726,-877 726,-877 720,-877 714,-871 714,-865 714,-865 714,-853 714,-853 714,-847 720,-841 726,-841 726,-841 838,-841 838,-841 844,-841 850,-847 850,-853 850,-853 850,-865 850,-865 850,-871 844,-877 838,-877"/>
<text text-anchor="middle" x="782" y="-856.5" font-family="Times,serif" font-size="10.00">1. Framework Selection</text>
</g>
<!-- frontend&#45;&gt;frontend_frameworks -->
<g id="edge2" class="edge">
<title>frontend&#45;&gt;frontend_frameworks</title>
<path fill="none" stroke="#4a4a4a" d="M613.72,-720C664.28,-720 719,-720 719,-720 719,-720 719,-830.83 719,-830.83"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="715.5,-830.83 719,-840.83 722.5,-830.83 715.5,-830.83"/>
<text text-anchor="middle" x="665.5" y="-792.6" font-family="Times,serif" font-size="8.00" fill="#4a4a4a">Involves</text>
</g>
<!-- styling -->
<g id="node7" class="node">
<title>styling</title>
<path fill="#c5c5c5" stroke="black" d="M827.5,-732C827.5,-732 736.5,-732 736.5,-732 730.5,-732 724.5,-726 724.5,-720 724.5,-720 724.5,-708 724.5,-708 724.5,-702 730.5,-696 736.5,-696 736.5,-696 827.5,-696 827.5,-696 833.5,-696 839.5,-702 839.5,-708 839.5,-708 839.5,-720 839.5,-720 839.5,-726 833.5,-732 827.5,-732"/>
<text text-anchor="middle" x="782" y="-711.5" font-family="Times,serif" font-size="10.00">2. Styling Solutions</text>
</g>
<!-- frontend&#45;&gt;styling -->
<g id="edge6" class="edge">
<title>frontend&#45;&gt;styling</title>
<path fill="none" stroke="#4a4a4a" d="M613.56,-708C613.56,-708 714.13,-708 714.13,-708"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="714.13,-711.5 724.13,-708 714.13,-704.5 714.13,-711.5"/>
<text text-anchor="middle" x="665.5" y="-716.6" font-family="Times,serif" font-size="8.00" fill="#4a4a4a">Requires</text>
</g>
<!-- react -->
<g id="node4" class="node">
<title>react</title>
<path fill="#c9c9c9" stroke="black" d="M1063,-964C1063,-964 987,-964 987,-964 981,-964 975,-958 975,-952 975,-952 975,-940 975,-940 975,-934 981,-928 987,-928 987,-928 1063,-928 1063,-928 1069,-928 1075,-934 1075,-940 1075,-940 1075,-952 1075,-952 1075,-958 1069,-964 1063,-964"/>
<text text-anchor="middle" x="1025" y="-943.8" font-family="Times,serif" font-size="9.00">1.1. React/Next.js</text>
</g>
<!-- frontend_frameworks&#45;&gt;react -->
<g id="edge3" class="edge">
<title>frontend_frameworks&#45;&gt;react</title>
<path fill="none" stroke="#4a4a4a" d="M782,-877.03C782,-902.51 782,-946 782,-946 782,-946 964.94,-946 964.94,-946"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="964.94,-949.5 974.94,-946 964.94,-942.5 964.94,-949.5"/>
<text text-anchor="middle" x="898" y="-948.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">for</text>
</g>
<!-- vue -->
<g id="node5" class="node">
<title>vue</title>
<path fill="#c9c9c9" stroke="black" d="M1064,-906C1064,-906 986,-906 986,-906 980,-906 974,-900 974,-894 974,-894 974,-882 974,-882 974,-876 980,-870 986,-870 986,-870 1064,-870 1064,-870 1070,-870 1076,-876 1076,-882 1076,-882 1076,-894 1076,-894 1076,-900 1070,-906 1064,-906"/>
<text text-anchor="middle" x="1025" y="-885.8" font-family="Times,serif" font-size="9.00">1.2. Vue.js/Nuxt.js</text>
</g>
<!-- frontend_frameworks&#45;&gt;vue -->
<g id="edge4" class="edge">
<title>frontend_frameworks&#45;&gt;vue</title>
<path fill="none" stroke="#4a4a4a" d="M850.01,-873.5C850.01,-873.5 963.99,-873.5 963.99,-873.5"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="963.99,-877 973.99,-873.5 963.99,-870 963.99,-877"/>
<text text-anchor="middle" x="898" y="-890.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">or</text>
</g>
<!-- svelte -->
<g id="node6" class="node">
<title>svelte</title>
<path fill="#c9c9c9" stroke="black" d="M1068.5,-848C1068.5,-848 981.5,-848 981.5,-848 975.5,-848 969.5,-842 969.5,-836 969.5,-836 969.5,-824 969.5,-824 969.5,-818 975.5,-812 981.5,-812 981.5,-812 1068.5,-812 1068.5,-812 1074.5,-812 1080.5,-818 1080.5,-824 1080.5,-824 1080.5,-836 1080.5,-836 1080.5,-842 1074.5,-848 1068.5,-848"/>
<text text-anchor="middle" x="1025" y="-827.8" font-family="Times,serif" font-size="9.00">1.3. Svelte/SvelteKit</text>
</g>
<!-- frontend_frameworks&#45;&gt;svelte -->
<g id="edge5" class="edge">
<title>frontend_frameworks&#45;&gt;svelte</title>
<path fill="none" stroke="#4a4a4a" d="M850.01,-844.5C850.01,-844.5 959.29,-844.5 959.29,-844.5"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="959.29,-848 969.29,-844.5 959.29,-841 959.29,-848"/>
<text text-anchor="middle" x="898" y="-832.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">alternatively</text>
</g>
<!-- tailwind -->
<g id="node8" class="node">
<title>tailwind</title>
<path fill="#c9c9c9" stroke="black" d="M1069.5,-790C1069.5,-790 980.5,-790 980.5,-790 974.5,-790 968.5,-784 968.5,-778 968.5,-778 968.5,-766 968.5,-766 968.5,-760 974.5,-754 980.5,-754 980.5,-754 1069.5,-754 1069.5,-754 1075.5,-754 1081.5,-760 1081.5,-766 1081.5,-766 1081.5,-778 1081.5,-778 1081.5,-784 1075.5,-790 1069.5,-790"/>
<text text-anchor="middle" x="1025" y="-769.8" font-family="Times,serif" font-size="9.00">2.1. Utility&#45;First CSS</text>
</g>
<!-- styling&#45;&gt;tailwind -->
<g id="edge7" class="edge">
<title>styling&#45;&gt;tailwind</title>
<path fill="none" stroke="#4a4a4a" d="M839.58,-723C898.66,-723 982,-723 982,-723 982,-723 982,-743.75 982,-743.75"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="978.5,-743.75 982,-753.75 985.5,-743.75 978.5,-743.75"/>
<text text-anchor="middle" x="898" y="-774.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">using</text>
</g>
<!-- styled -->
<g id="node9" class="node">
<title>styled</title>
<path fill="#c9c9c9" stroke="black" d="M1054,-732C1054,-732 996,-732 996,-732 990,-732 984,-726 984,-720 984,-720 984,-708 984,-708 984,-702 990,-696 996,-696 996,-696 1054,-696 1054,-696 1060,-696 1066,-702 1066,-708 1066,-708 1066,-720 1066,-720 1066,-726 1060,-732 1054,-732"/>
<text text-anchor="middle" x="1025" y="-711.8" font-family="Times,serif" font-size="9.00">2.2. CSS&#45;in&#45;JS</text>
</g>
<!-- styling&#45;&gt;styled -->
<g id="edge8" class="edge">
<title>styling&#45;&gt;styled</title>
<path fill="none" stroke="#4a4a4a" d="M839.59,-714C839.59,-714 973.79,-714 973.79,-714"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="973.79,-717.5 983.79,-714 973.79,-710.5 973.79,-717.5"/>
<text text-anchor="middle" x="898" y="-716.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">or</text>
</g>
<!-- modules -->
<g id="node10" class="node">
<title>modules</title>
<path fill="#c9c9c9" stroke="black" d="M1062,-674C1062,-674 988,-674 988,-674 982,-674 976,-668 976,-662 976,-662 976,-650 976,-650 976,-644 982,-638 988,-638 988,-638 1062,-638 1062,-638 1068,-638 1074,-644 1074,-650 1074,-650 1074,-662 1074,-662 1074,-668 1068,-674 1062,-674"/>
<text text-anchor="middle" x="1025" y="-653.8" font-family="Times,serif" font-size="9.00">2.3. CSS Modules</text>
</g>
<!-- styling&#45;&gt;modules -->
<g id="edge9" class="edge">
<title>styling&#45;&gt;modules</title>
<path fill="none" stroke="#4a4a4a" d="M839.51,-705C897.66,-705 979,-705 979,-705 979,-705 979,-684.25 979,-684.25"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="982.5,-684.25 979,-674.25 975.5,-684.25 982.5,-684.25"/>
<text text-anchor="middle" x="898" y="-658.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">with</text>
</g>
<!-- api_design -->
<g id="node12" class="node">
<title>api_design</title>
<path fill="#c5c5c5" stroke="black" d="M826.5,-549C826.5,-549 737.5,-549 737.5,-549 731.5,-549 725.5,-543 725.5,-537 725.5,-537 725.5,-525 725.5,-525 725.5,-519 731.5,-513 737.5,-513 737.5,-513 826.5,-513 826.5,-513 832.5,-513 838.5,-519 838.5,-525 838.5,-525 838.5,-537 838.5,-537 838.5,-543 832.5,-549 826.5,-549"/>
<text text-anchor="middle" x="782" y="-528.5" font-family="Times,serif" font-size="10.00">1. API Architecture</text>
</g>
<!-- backend&#45;&gt;api_design -->
<g id="edge11" class="edge">
<title>backend&#45;&gt;api_design</title>
<path fill="none" stroke="#4a4a4a" d="M612.57,-448C668.77,-448 733,-448 733,-448 733,-448 733,-502.99 733,-502.99"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="729.5,-502.99 733,-512.99 736.5,-502.99 729.5,-502.99"/>
<text text-anchor="middle" x="665.5" y="-470.6" font-family="Times,serif" font-size="8.00" fill="#4a4a4a">Implements</text>
</g>
<!-- database -->
<g id="node16" class="node">
<title>database</title>
<path fill="#c5c5c5" stroke="black" d="M812.5,-403C812.5,-403 751.5,-403 751.5,-403 745.5,-403 739.5,-397 739.5,-391 739.5,-391 739.5,-379 739.5,-379 739.5,-373 745.5,-367 751.5,-367 751.5,-367 812.5,-367 812.5,-367 818.5,-367 824.5,-373 824.5,-379 824.5,-379 824.5,-391 824.5,-391 824.5,-397 818.5,-403 812.5,-403"/>
<text text-anchor="middle" x="782" y="-382.5" font-family="Times,serif" font-size="10.00">2. Data Layer</text>
</g>
<!-- backend&#45;&gt;database -->
<g id="edge15" class="edge">
<title>backend&#45;&gt;database</title>
<path fill="none" stroke="#4a4a4a" d="M612.57,-430C681.31,-430 768,-430 768,-430 768,-430 768,-413.04 768,-413.04"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="771.5,-413.04 768,-403.04 764.5,-413.04 771.5,-413.04"/>
<text text-anchor="middle" x="665.5" y="-397.6" font-family="Times,serif" font-size="8.00" fill="#4a4a4a">Manages</text>
</g>
<!-- rest -->
<g id="node13" class="node">
<title>rest</title>
<path fill="#c9c9c9" stroke="black" d="M1062.5,-616C1062.5,-616 987.5,-616 987.5,-616 981.5,-616 975.5,-610 975.5,-604 975.5,-604 975.5,-592 975.5,-592 975.5,-586 981.5,-580 987.5,-580 987.5,-580 1062.5,-580 1062.5,-580 1068.5,-580 1074.5,-586 1074.5,-592 1074.5,-592 1074.5,-604 1074.5,-604 1074.5,-610 1068.5,-616 1062.5,-616"/>
<text text-anchor="middle" x="1025" y="-595.8" font-family="Times,serif" font-size="9.00">1.1. RESTful APIs</text>
</g>
<!-- api_design&#45;&gt;rest -->
<g id="edge12" class="edge">
<title>api_design&#45;&gt;rest</title>
<path fill="none" stroke="#4a4a4a" d="M838.76,-540C897.58,-540 981,-540 981,-540 981,-540 981,-569.97 981,-569.97"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="977.5,-569.97 981,-579.97 984.5,-569.97 977.5,-569.97"/>
<text text-anchor="middle" x="898" y="-600.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">through</text>
</g>
<!-- graphql -->
<g id="node14" class="node">
<title>graphql</title>
<path fill="#c9c9c9" stroke="black" d="M1053,-558C1053,-558 997,-558 997,-558 991,-558 985,-552 985,-546 985,-546 985,-534 985,-534 985,-528 991,-522 997,-522 997,-522 1053,-522 1053,-522 1059,-522 1065,-528 1065,-534 1065,-534 1065,-546 1065,-546 1065,-552 1059,-558 1053,-558"/>
<text text-anchor="middle" x="1025" y="-537.8" font-family="Times,serif" font-size="9.00">1.2. GraphQL</text>
</g>
<!-- api_design&#45;&gt;graphql -->
<g id="edge13" class="edge">
<title>api_design&#45;&gt;graphql</title>
<path fill="none" stroke="#4a4a4a" d="M838.67,-531C838.67,-531 974.98,-531 974.98,-531"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="974.98,-534.5 984.98,-531 974.98,-527.5 974.98,-534.5"/>
<text text-anchor="middle" x="898" y="-542.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">or</text>
</g>
<!-- trpc -->
<g id="node15" class="node">
<title>trpc</title>
<path fill="#c9c9c9" stroke="black" d="M1043.5,-500C1043.5,-500 1006.5,-500 1006.5,-500 1000.5,-500 994.5,-494 994.5,-488 994.5,-488 994.5,-476 994.5,-476 994.5,-470 1000.5,-464 1006.5,-464 1006.5,-464 1043.5,-464 1043.5,-464 1049.5,-464 1055.5,-470 1055.5,-476 1055.5,-476 1055.5,-488 1055.5,-488 1055.5,-494 1049.5,-500 1043.5,-500"/>
<text text-anchor="middle" x="1025" y="-479.8" font-family="Times,serif" font-size="9.00">1.3. tRPC</text>
</g>
<!-- api_design&#45;&gt;trpc -->
<g id="edge14" class="edge">
<title>api_design&#45;&gt;trpc</title>
<path fill="none" stroke="#4a4a4a" d="M832,-512.75C832,-498.82 832,-482 832,-482 832,-482 984.42,-482 984.42,-482"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="984.42,-485.5 994.42,-482 984.42,-478.5 984.42,-485.5"/>
<text text-anchor="middle" x="898" y="-484.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">using</text>
</g>
<!-- sql -->
<g id="node17" class="node">
<title>sql</title>
<path fill="#c9c9c9" stroke="black" d="M1066.5,-442C1066.5,-442 983.5,-442 983.5,-442 977.5,-442 971.5,-436 971.5,-430 971.5,-430 971.5,-418 971.5,-418 971.5,-412 977.5,-406 983.5,-406 983.5,-406 1066.5,-406 1066.5,-406 1072.5,-406 1078.5,-412 1078.5,-418 1078.5,-418 1078.5,-430 1078.5,-430 1078.5,-436 1072.5,-442 1066.5,-442"/>
<text text-anchor="middle" x="1025" y="-421.8" font-family="Times,serif" font-size="9.00">2.1. SQL Databases</text>
</g>
<!-- database&#45;&gt;sql -->
<g id="edge16" class="edge">
<title>database&#45;&gt;sql</title>
<path fill="none" stroke="#4a4a4a" d="M797,-403.16C797,-408.04 797,-412 797,-412 797,-412 961.26,-412 961.26,-412"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="961.26,-415.5 971.26,-412 961.26,-408.5 961.26,-415.5"/>
<text text-anchor="middle" x="898" y="-426.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">with</text>
</g>
<!-- nosql -->
<g id="node18" class="node">
<title>nosql</title>
<path fill="#c9c9c9" stroke="black" d="M1071,-384C1071,-384 979,-384 979,-384 973,-384 967,-378 967,-372 967,-372 967,-360 967,-360 967,-354 973,-348 979,-348 979,-348 1071,-348 1071,-348 1077,-348 1083,-354 1083,-360 1083,-360 1083,-372 1083,-372 1083,-378 1077,-384 1071,-384"/>
<text text-anchor="middle" x="1025" y="-363.8" font-family="Times,serif" font-size="9.00">2.2. NoSQL Solutions</text>
</g>
<!-- database&#45;&gt;nosql -->
<g id="edge17" class="edge">
<title>database&#45;&gt;nosql</title>
<path fill="none" stroke="#4a4a4a" d="M824.61,-378.33C824.61,-378.33 956.91,-378.33 956.91,-378.33"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="956.91,-381.83 966.91,-378.33 956.91,-374.83 956.91,-381.83"/>
<text text-anchor="middle" x="898" y="-368.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">or</text>
</g>
<!-- orm -->
<g id="node19" class="node">
<title>orm</title>
<path fill="#c9c9c9" stroke="black" d="M1080,-326C1080,-326 970,-326 970,-326 964,-326 958,-320 958,-314 958,-314 958,-302 958,-302 958,-296 964,-290 970,-290 970,-290 1080,-290 1080,-290 1086,-290 1092,-296 1092,-302 1092,-302 1092,-314 1092,-314 1092,-320 1086,-326 1080,-326"/>
<text text-anchor="middle" x="1025" y="-305.8" font-family="Times,serif" font-size="9.00">2.3. ORM/Query Builders</text>
</g>
<!-- database&#45;&gt;orm -->
<g id="edge18" class="edge">
<title>database&#45;&gt;orm</title>
<path fill="none" stroke="#4a4a4a" d="M824.89,-372.67C878.42,-372.67 963,-372.67 963,-372.67 963,-372.67 963,-336.01 963,-336.01"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="966.5,-336.01 963,-326.01 959.5,-336.01 966.5,-336.01"/>
<text text-anchor="middle" x="898" y="-310.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">via</text>
</g>
<!-- containerization -->
<g id="node21" class="node">
<title>containerization</title>
<path fill="#c5c5c5" stroke="black" d="M826.5,-248C826.5,-248 737.5,-248 737.5,-248 731.5,-248 725.5,-242 725.5,-236 725.5,-236 725.5,-224 725.5,-224 725.5,-218 731.5,-212 737.5,-212 737.5,-212 826.5,-212 826.5,-212 832.5,-212 838.5,-218 838.5,-224 838.5,-224 838.5,-236 838.5,-236 838.5,-242 832.5,-248 826.5,-248"/>
<text text-anchor="middle" x="782" y="-227.5" font-family="Times,serif" font-size="10.00">1. Containerization</text>
</g>
<!-- deployment&#45;&gt;containerization -->
<g id="edge20" class="edge">
<title>deployment&#45;&gt;containerization</title>
<path fill="none" stroke="#4a4a4a" d="M617.08,-236C617.08,-236 715.34,-236 715.34,-236"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="715.34,-239.5 725.34,-236 715.34,-232.5 715.34,-239.5"/>
<text text-anchor="middle" x="665.5" y="-232.6" font-family="Times,serif" font-size="8.00" fill="#4a4a4a">Uses</text>
</g>
<!-- cloud_platforms -->
<g id="node24" class="node">
<title>cloud_platforms</title>
<path fill="#c5c5c5" stroke="black" d="M836.5,-123C836.5,-123 727.5,-123 727.5,-123 721.5,-123 715.5,-117 715.5,-111 715.5,-111 715.5,-99 715.5,-99 715.5,-93 721.5,-87 727.5,-87 727.5,-87 836.5,-87 836.5,-87 842.5,-87 848.5,-93 848.5,-99 848.5,-99 848.5,-111 848.5,-111 848.5,-117 842.5,-123 836.5,-123"/>
<text text-anchor="middle" x="782" y="-102.5" font-family="Times,serif" font-size="10.00">2. Cloud Infrastructure</text>
</g>
<!-- deployment&#45;&gt;cloud_platforms -->
<g id="edge23" class="edge">
<title>deployment&#45;&gt;cloud_platforms</title>
<path fill="none" stroke="#4a4a4a" d="M617.01,-224C667.81,-224 722,-224 722,-224 722,-224 722,-133.07 722,-133.07"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="725.5,-133.07 722,-123.07 718.5,-133.07 725.5,-133.07"/>
<text text-anchor="middle" x="665.5" y="-156.6" font-family="Times,serif" font-size="8.00" fill="#4a4a4a">Deploys on</text>
</g>
<!-- docker -->
<g id="node22" class="node">
<title>docker</title>
<path fill="#c9c9c9" stroke="black" d="M1075,-268C1075,-268 975,-268 975,-268 969,-268 963,-262 963,-256 963,-256 963,-244 963,-244 963,-238 969,-232 975,-232 975,-232 1075,-232 1075,-232 1081,-232 1087,-238 1087,-244 1087,-244 1087,-256 1087,-256 1087,-262 1081,-268 1075,-268"/>
<text text-anchor="middle" x="1025" y="-247.8" font-family="Times,serif" font-size="9.00">1.1. Docker Containers</text>
</g>
<!-- containerization&#45;&gt;docker -->
<g id="edge21" class="edge">
<title>containerization&#45;&gt;docker</title>
<path fill="none" stroke="#4a4a4a" d="M838.67,-240C838.67,-240 952.69,-240 952.69,-240"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="952.69,-243.5 962.69,-240 952.69,-236.5 952.69,-243.5"/>
<text text-anchor="middle" x="898" y="-252.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">for</text>
</g>
<!-- kubernetes -->
<g id="node23" class="node">
<title>kubernetes</title>
<path fill="#c9c9c9" stroke="black" d="M1092,-210C1092,-210 958,-210 958,-210 952,-210 946,-204 946,-198 946,-198 946,-186 946,-186 946,-180 952,-174 958,-174 958,-174 1092,-174 1092,-174 1098,-174 1104,-180 1104,-186 1104,-186 1104,-198 1104,-198 1104,-204 1098,-210 1092,-210"/>
<text text-anchor="middle" x="1025" y="-189.8" font-family="Times,serif" font-size="9.00">1.2. Kubernetes Orchestration</text>
</g>
<!-- containerization&#45;&gt;kubernetes -->
<g id="edge22" class="edge">
<title>containerization&#45;&gt;kubernetes</title>
<path fill="none" stroke="#4a4a4a" d="M838.61,-222C888.06,-222 952,-222 952,-222 952,-222 952,-220.14 952,-220.14"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="955.5,-220.14 952,-210.14 948.5,-220.14 955.5,-220.14"/>
<text text-anchor="middle" x="898" y="-194.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">with</text>
</g>
<!-- vercel -->
<g id="node25" class="node">
<title>vercel</title>
<path fill="#c9c9c9" stroke="black" d="M1063.5,-152C1063.5,-152 986.5,-152 986.5,-152 980.5,-152 974.5,-146 974.5,-140 974.5,-140 974.5,-128 974.5,-128 974.5,-122 980.5,-116 986.5,-116 986.5,-116 1063.5,-116 1063.5,-116 1069.5,-116 1075.5,-122 1075.5,-128 1075.5,-128 1075.5,-140 1075.5,-140 1075.5,-146 1069.5,-152 1063.5,-152"/>
<text text-anchor="middle" x="1025" y="-131.8" font-family="Times,serif" font-size="9.00">2.1. Vercel/Netlify</text>
</g>
<!-- cloud_platforms&#45;&gt;vercel -->
<g id="edge24" class="edge">
<title>cloud_platforms&#45;&gt;vercel</title>
<path fill="none" stroke="#4a4a4a" d="M848.72,-119.5C848.72,-119.5 964.23,-119.5 964.23,-119.5"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="964.23,-123 974.23,-119.5 964.23,-116 964.23,-123"/>
<text text-anchor="middle" x="898" y="-136.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">for</text>
</g>
<!-- aws -->
<g id="node26" class="node">
<title>aws</title>
<path fill="#c9c9c9" stroke="black" d="M1069,-94C1069,-94 981,-94 981,-94 975,-94 969,-88 969,-82 969,-82 969,-70 969,-70 969,-64 975,-58 981,-58 981,-58 1069,-58 1069,-58 1075,-58 1081,-64 1081,-70 1081,-70 1081,-82 1081,-82 1081,-88 1075,-94 1069,-94"/>
<text text-anchor="middle" x="1025" y="-73.8" font-family="Times,serif" font-size="9.00">2.2. AWS/Azure/GCP</text>
</g>
<!-- cloud_platforms&#45;&gt;aws -->
<g id="edge25" class="edge">
<title>cloud_platforms&#45;&gt;aws</title>
<path fill="none" stroke="#4a4a4a" d="M848.72,-90.5C848.72,-90.5 958.71,-90.5 958.71,-90.5"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="958.71,-94 968.71,-90.5 958.71,-87 958.71,-94"/>
<text text-anchor="middle" x="898" y="-78.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">or</text>
</g>
<!-- edge -->
<g id="node27" class="node">
<title>edge</title>
<path fill="#c9c9c9" stroke="black" d="M1071,-36C1071,-36 979,-36 979,-36 973,-36 967,-30 967,-24 967,-24 967,-12 967,-12 967,-6 973,0 979,0 979,0 1071,0 1071,0 1077,0 1083,-6 1083,-12 1083,-12 1083,-24 1083,-24 1083,-30 1077,-36 1071,-36"/>
<text text-anchor="middle" x="1025" y="-15.8" font-family="Times,serif" font-size="9.00">2.3. Edge Computing</text>
</g>
<!-- cloud_platforms&#45;&gt;edge -->
<g id="edge26" class="edge">
<title>cloud_platforms&#45;&gt;edge</title>
<path fill="none" stroke="#4a4a4a" d="M782,-86.97C782,-61.49 782,-18 782,-18 782,-18 956.8,-18 956.8,-18"/>
<polygon fill="#4a4a4a" stroke="#4a4a4a" points="956.8,-21.5 966.8,-18 956.8,-14.5 956.8,-21.5"/>
<text text-anchor="middle" x="898" y="-20.4" font-family="Times,serif" font-size="7.00" fill="#4a4a4a">utilizing</text>
</g>
</g>
</svg>