DevOps Demo - Solution Overview

# DevOps Demo

#### Solution Overview

---

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="650" 
    height="500" 
    stroke="var(--r-diagram-stroke-color)" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    fill="#fff" 
    fill-rule="evenodd" 
    font-family="var(--r-main-font)"
    font-size="14" 
    text-anchor="middle">
    <defs>
        <path d="M5 9L0 0-5 9" id="A" class="F" fill="none"/>
        <path d="M0 0l3 10h-6z" id="B" class="C" stroke="none"/>
    </defs>
    <path d="M219 184.5h50m-50 40h50" class="F" fill="none"/>
    <text white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-size="10px" font-family="var(--r-main-font)">
        <tspan x="244" y="177.8">SLFB</tspan>
        <tspan x="244" y="217.8">MAIN</tspan>
    </text>
    <path d="M219 294.5h50m-50 40h50" class="F" fill="none"/>
    <text class="B C D G" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-size="10px" font-family="var(--r-main-font)">
        <tspan x="244" y="287.8">SLFB</tspan>
        <tspan x="244" y="327.8">MAIN</tspan>
    </text>
    <path d="M219 404.5h50m-50 40h50" class="F" fill="none"/>
    <text class="B C D G" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-size="10px" font-family="var(--r-main-font)">
        <tspan x="244" y="397.8">SLFB</tspan>
        <tspan x="244" y="437.8">MAIN</tspan>
    </text>
    <text font-size="24" transform="matrix(0 -1 1 0 19 469.5)" class="B C D" white-space="pre" fill="var(--r-heading-color)" stroke="none" font-weight="bold">
        <tspan x="155" y="27.92">Micro Frontend Solutions</tspan>
    </text>
    <g transform="translate(319 334.5)">
        <path d="M0 0h61.5" class="F J" fill="none" stroke-width="2"/>
        <use transform="matrix(0 1.25 -1.25 0 65.5 -65.5)" x="52.4" xlink:href="#A" y="1.6" class="K" stroke-width="1.6"/>
    </g>
    <g transform="translate(308.419 349.5)">
        <path d="M0 80.6565L78.2452 2.821" class="F J" fill="none" stroke-width="2"/>
        <use transform="matrix(.88156026 .8862006 -.8862006 .88156026 23.89876993 -57.48322473)" x="64.8648" xlink:href="#A" y="1.6" class="K" stroke-width="1.6"/>
    </g>
    <g transform="translate(308.419 238.8436)">
        <path d="M0 0l78.2452 77.8354" class="F J" fill="none" stroke-width="2"/>
        <use transform="matrix(-.88156026 .8862006 -.8862006 -.88156026 195.44541245 80.05591431)" x="64.8648" xlink:href="#A" y="66.1251" class="K" stroke-width="1.6"/>
    </g>
    <g transform="translate(456.1126 309.5)">
        <path d="M0 16.1291l54.5318-15.064" class="F J" fill="none" stroke-width="2"/>
        <use transform="matrix(.33283687 1.20487328 -1.20487328 .33283687 42.84059819 -56.27951039)" x="46.7099" xlink:href="#A" y="1.6" class="K" stroke-width="1.6"/>
    </g>
    <g transform="translate(453.6783 345.9778)">
        <path d="M0 0l57.091 22.0794" class="F J" fill="none" stroke-width="2"/>
        <use transform="matrix(-.45088127 1.16584994 -1.16584994 -.45088127 104.69919148 -24.72038309)" x="48.6574" xlink:href="#A" y="20.4178" class="K" stroke-width="1.6"/>
    </g>
    <g transform="translate(144 124.5)">
        <path d="M0 30V17.5h0v-8" class="F H" fill="none" stroke-dasharray="2 3"/>
        <use transform="matrix(1 0 0 1 0 0)" xlink:href="#B" class="B" fill="var(--r-diagram-stroke-color)"/>
    </g>
    <g transform="translate(284 124.5)">
        <path d="M0 0v20h0v.5" class="F H" fill="none" stroke-dasharray="2 3"/>
        <use transform="matrix(-1 0 0 -1 0 60)" xlink:href="#B" y="30" class="B" fill="var(--r-diagram-stroke-color)"/>
    </g>
    <g transform="translate(304 124.5)">
        <path d="M0 0v20h0v.5" class="F H" fill="none" stroke-dasharray="2 3"/>
        <use transform="matrix(-1 0 0 -1 0 60)" xlink:href="#B" y="30" class="B" fill="var(--r-diagram-stroke-color)"/>
    </g>
    <g transform="translate(424 124.5)">
        <path d="M0 0v20h0v150.5" class="F H" fill="none" stroke-dasharray="2 3"/>
        <use transform="matrix(-1 0 0 -1 0 360)" xlink:href="#B" y="180" class="B" fill="var(--r-diagram-stroke-color)"/>
    </g>
    <g transform="translate(564 124.5)">
        <path d="M0 0v100.0004h0V140.5" class="F H" fill="none" stroke-dasharray="2 3"/>
        <use transform="matrix(-1 0 0 -1 0 300)" xlink:href="#B" y="150" class="B" fill="var(--r-diagram-stroke-color)"/>
    </g>
    <g transform="translate(584 124.5)">
        <path d="M0 0v100.0004h0V140.5" class="F H" fill="none" stroke-dasharray="2 3"/>
        <use transform="matrix(-1 0 0 -1 0 300)" xlink:href="#B" y="150" class="B" fill="var(--r-diagram-stroke-color)"/>
    </g>
    <path d="M424.413 429.5l-.3478-80m150.4348 80v-55h0v-55" class="F" fill="none"/>
    <a xlink:href="https://www.replace.com/slides/xxx.md#/trunk">
        <rect height="90" rx="5" width="150" x="69" y="159.5"/>
        <text class="B C D E I" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)" font-size="18px">
            <tspan x="144" y="210.44">SOLUTION #1</tspan>
        </text>
    </a>
    <rect height="30" rx="15" width="50" x="269" y="169.5" class="L" stroke-dasharray="1 2"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="294" y="189.12">SBX</tspan>
    </text>
    <rect height="30" rx="15" width="50" x="269" y="209.5"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="294" y="229.12">CI</tspan>
    </text>
    <a xlink:href="https://www.replace.com/slides/xxx.md#/trunk">
        <rect height="90" rx="5" width="150" x="69" y="269.5"/>
        <text class="B C D E I" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)" font-size="18px">
            <tspan x="144" y="320.44">SOLUTION #2</tspan>
        </text>
    </a>
    <rect height="30" rx="15" width="50" x="269" y="279.5" class="L" stroke-dasharray="1 2"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="294" y="299.12">SBX</tspan>
    </text>
    <rect height="30" rx="15" width="50" x="269" y="319.5"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="294" y="339.12">CI</tspan>
    </text>
    <a xlink:href="https://www.replace.com/slides/xxx.md#/trunk">
        <rect height="90" rx="5" width="150" x="69" y="379.5"/>
        <text class="B C D E I" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)" font-size="18px">
            <tspan x="144" y="430.44">SOLUTION #N</tspan>
        </text>
    </a>
    <rect height="30" rx="15" width="50" x="269" y="389.5" class="L" stroke-dasharray="1 2"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="294" y="409.12">SBX</tspan>
    </text>
    <rect height="30" rx="15" width="50" x="269" y="429.5"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="294" y="449.12">CI</tspan>
    </text>
    <a xlink:href="https://www.replace.com/slides/xxx.md#/trunk">
        <rect height="40" rx="5" width="560" x="69" y="79.5"/>
        <text class="B C D E I" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)" font-size="18px">
            <tspan x="349" y="105.44">CONTINUOUS DELIVERY PIPELINE</tspan>
        </text>
    </a>
    <rect height="30" rx="15" width="70" x="389" y="319.5"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="424" y="339.12">STG</tspan>
    </text>
    <rect height="30" rx="15" width="110" x="519" y="289.5"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="574" y="309.12">PRD - BLUE</tspan>
    </text>
    <a xlink:href="https://www.replace.com/slides/xxx.md#/trunk">
        <rect height="40" rx="5" width="150" x="69" y="29.5"/>
        <text class="B C D E I" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)" font-size="18px">
            <tspan x="144" y="55.44">GITOPS</tspan>
        </text>
    </a>
    <a xlink:href="https://www.replace.com/slides/xxx.md#/trunk">
        <rect height="40" rx="5" width="360" x="269" y="29.5"/>
        <text class="B C D E I" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)" font-size="18px">
            <tspan x="449" y="55.44">FEATURE FLAGS</tspan>
        </text>
    </a>
    <a xlink:href="https://www.replace.com/slides/xxx.md#/trunk">
        <rect height="40" rx="5" width="110" x="369.5" y="429.5"/>
        <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
            <tspan x="424.5" y="454.12">DEPLOYMENT</tspan>
        </text>
    </a>
    <a xlink:href="https://www.replace.com/slides/xxx.md#/trunk">
        <rect height="40" rx="5" width="110" x="519.5" y="429.5"/>
        <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
            <tspan x="574.5" y="454.12">DEPLOYMENT</tspan>
        </text>
    </a>
    <rect height="30" rx="15" width="110" x="519" y="359.5"/>
    <text class="B C D E" white-space="pre" fill="var(--r-main-color)" stroke="none" font-weight="bold" font-family="var(--r-main-font)">
        <tspan x="574" y="379.12">PRD - GREEN</tspan>
    </text>
</svg>