docs/assets/overview.dio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="735px" height="391px" viewBox="-0.5 -0.5 735 391" content="&lt;mxfile&gt;&lt;diagram id=&quot;8LD-dn8YY6Zgxjba6kZk&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <path d="M 214 23 L 214 0 L 734 0 L 734 23" fill="#2e6de2" stroke="#2e6de2" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 214 23 L 214 390 L 734 390 L 734 23" fill="none" stroke="#2e6de2" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 214 23 L 734 23" fill="none" stroke="#2e6de2" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#FFFFFF" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="473.5" y="16">
                COSMO on Kubernetes
            </text>
        </g>
        <path d="M 564 199.68 L 564 176.68 L 704 176.68 L 704 199.68" fill="#6a00ff" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 564 199.68 L 564 223.31 L 704 223.31 L 704 199.68" fill="none" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 564 199.68 L 704 199.68" fill="none" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#ffffff" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="633.5" y="192.68">
                Template "go-th"
            </text>
        </g>
        <rect x="254" y="60" width="205" height="160" fill="#ffffff" stroke="#000000" pointer-events="none"/>
        <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 flex-start; width: 196px; height: 1px; padding-top: 67px; margin-left: 263px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: left; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                User "A"
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="263" y="79" fill="#000000" font-family="Helvetica" font-size="12px">
                    User "A"
                </text>
            </switch>
        </g>
        <path d="M 448.86 190.02 C 448.51 190.04 448.16 190.13 447.86 190.28 L 434.25 196.77 C 433.54 197.12 433.02 197.77 432.84 198.53 L 429.48 213.13 C 429.33 213.81 429.46 214.52 429.83 215.11 C 429.89 215.17 429.93 215.24 429.98 215.33 L 439.4 227.02 C 439.9 227.63 440.66 228 441.44 228 L 456.54 228 C 457.32 228 458.08 227.63 458.58 227.02 L 468 215.3 C 468.48 214.7 468.67 213.89 468.5 213.13 L 465.14 198.53 C 464.96 197.77 464.44 197.12 463.72 196.77 L 450.12 190.28 C 449.73 190.09 449.29 190 448.86 190.02 Z" fill="#ffffff" stroke="none" pointer-events="none"/>
        <path d="M 448.87 191.16 C 448.54 191.18 448.21 191.26 447.93 191.41 L 435.14 197.5 C 434.47 197.83 433.98 198.44 433.81 199.16 L 430.65 212.89 C 430.51 213.52 430.63 214.19 430.98 214.74 C 431.04 214.8 431.08 214.86 431.12 214.95 L 439.97 225.94 C 440.44 226.51 441.16 226.86 441.89 226.86 L 456.09 226.86 C 456.82 226.86 457.54 226.51 458.01 225.94 L 466.86 214.93 C 467.31 214.35 467.49 213.6 467.33 212.89 L 464.17 199.16 C 464 198.44 463.51 197.83 462.84 197.5 L 450.05 191.41 C 449.68 191.22 449.28 191.14 448.87 191.16 Z" fill="#2875e2" stroke="none" pointer-events="none"/>
        <path d="M 438.07 199.56 L 437 199.56 L 437 201.94 L 438.19 201.94 L 438.19 199.65 L 440.45 199.65 L 440.45 198.46 L 438.07 198.46 Z M 441.64 199.65 L 444.02 199.65 L 444.02 198.46 L 441.64 198.46 Z M 445.21 199.65 L 447.59 199.65 L 447.59 198.46 L 445.21 198.46 Z M 448.78 199.65 L 451.16 199.65 L 451.16 198.46 L 448.78 198.46 Z M 452.35 199.65 L 454.72 199.65 L 454.72 198.46 L 452.35 198.46 Z M 455.91 199.65 L 458.29 199.65 L 458.29 198.46 L 455.91 198.46 Z M 459.48 199.65 L 459.81 199.65 L 459.81 200.51 L 461 200.51 L 461 199.05 C 461 198.61 460.79 198.46 460.41 198.46 L 459.48 198.46 Z M 459.81 204.08 L 461 204.08 L 461 201.7 L 459.81 201.7 Z M 437 205.51 L 438.19 205.51 L 438.19 203.13 L 437 203.13 Z M 459.81 207.65 L 461 207.65 L 461 205.27 L 459.81 205.27 Z M 437 209.07 L 438.19 209.07 L 438.19 206.7 L 437 206.7 Z M 459.81 211.22 L 461 211.22 L 461 208.84 L 459.81 208.84 Z M 437 212.64 L 438.19 212.64 L 438.19 210.26 L 437 210.26 Z M 459.81 214.78 L 461 214.78 L 461 212.41 L 459.81 212.41 Z M 437 216.21 L 438.19 216.21 L 438.19 213.83 L 437 213.83 Z M 459.81 218.35 L 461 218.35 L 461 215.97 L 459.81 215.97 Z M 437 218.95 C 437 219.36 437.18 219.54 437.59 219.54 L 438.43 219.54 L 438.43 218.35 L 438.19 218.35 L 438.19 217.4 L 437 217.4 Z M 439.62 219.54 L 442 219.54 L 442 218.35 L 439.62 218.35 Z M 443.19 219.54 L 445.57 219.54 L 445.57 218.35 L 443.19 218.35 Z M 446.75 219.54 L 449.13 219.54 L 449.13 218.35 L 446.75 218.35 Z M 450.32 219.54 L 452.7 219.54 L 452.7 218.35 L 450.32 218.35 Z M 453.89 219.54 L 456.27 219.54 L 456.27 218.35 L 453.89 218.35 Z M 457.46 219.54 L 459.84 219.54 L 459.84 218.35 L 457.46 218.35 Z" fill="#ffffff" stroke="none" pointer-events="none"/>
        <rect x="291.5" y="92" width="205" height="160" fill="#ffffff" stroke="#000000" pointer-events="none"/>
        <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 flex-start; width: 196px; height: 1px; padding-top: 99px; margin-left: 300px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: left; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                User "B"
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="300" y="111" fill="#000000" font-family="Helvetica" font-size="12px">
                    User "B"
                </text>
            </switch>
        </g>
        <path d="M 486.36 222.02 C 486.01 222.04 485.66 222.13 485.36 222.28 L 471.75 228.77 C 471.04 229.12 470.52 229.77 470.34 230.53 L 466.98 245.13 C 466.83 245.81 466.96 246.52 467.33 247.11 C 467.39 247.17 467.43 247.24 467.48 247.33 L 476.9 259.02 C 477.4 259.63 478.16 260 478.94 260 L 494.04 260 C 494.82 260 495.58 259.63 496.08 259.02 L 505.5 247.3 C 505.98 246.7 506.17 245.89 506 245.13 L 502.64 230.53 C 502.46 229.77 501.94 229.12 501.22 228.77 L 487.62 222.28 C 487.23 222.09 486.79 222 486.36 222.02 Z" fill="#ffffff" stroke="none" pointer-events="none"/>
        <path d="M 486.37 223.16 C 486.04 223.18 485.71 223.26 485.43 223.41 L 472.64 229.5 C 471.97 229.83 471.48 230.44 471.31 231.16 L 468.15 244.89 C 468.01 245.52 468.13 246.19 468.48 246.74 C 468.54 246.8 468.58 246.86 468.62 246.95 L 477.47 257.94 C 477.94 258.51 478.66 258.86 479.39 258.86 L 493.59 258.86 C 494.32 258.86 495.04 258.51 495.51 257.94 L 504.36 246.93 C 504.81 246.35 504.99 245.6 504.83 244.89 L 501.67 231.16 C 501.5 230.44 501.01 229.83 500.34 229.5 L 487.55 223.41 C 487.18 223.22 486.78 223.14 486.37 223.16 Z" fill="#2875e2" stroke="none" pointer-events="none"/>
        <path d="M 475.57 231.56 L 474.5 231.56 L 474.5 233.94 L 475.69 233.94 L 475.69 231.65 L 477.95 231.65 L 477.95 230.46 L 475.57 230.46 Z M 479.14 231.65 L 481.52 231.65 L 481.52 230.46 L 479.14 230.46 Z M 482.71 231.65 L 485.09 231.65 L 485.09 230.46 L 482.71 230.46 Z M 486.28 231.65 L 488.66 231.65 L 488.66 230.46 L 486.28 230.46 Z M 489.85 231.65 L 492.22 231.65 L 492.22 230.46 L 489.85 230.46 Z M 493.41 231.65 L 495.79 231.65 L 495.79 230.46 L 493.41 230.46 Z M 496.98 231.65 L 497.31 231.65 L 497.31 232.51 L 498.5 232.51 L 498.5 231.05 C 498.5 230.61 498.29 230.46 497.91 230.46 L 496.98 230.46 Z M 497.31 236.08 L 498.5 236.08 L 498.5 233.7 L 497.31 233.7 Z M 474.5 237.51 L 475.69 237.51 L 475.69 235.13 L 474.5 235.13 Z M 497.31 239.65 L 498.5 239.65 L 498.5 237.27 L 497.31 237.27 Z M 474.5 241.07 L 475.69 241.07 L 475.69 238.7 L 474.5 238.7 Z M 497.31 243.22 L 498.5 243.22 L 498.5 240.84 L 497.31 240.84 Z M 474.5 244.64 L 475.69 244.64 L 475.69 242.26 L 474.5 242.26 Z M 497.31 246.78 L 498.5 246.78 L 498.5 244.41 L 497.31 244.41 Z M 474.5 248.21 L 475.69 248.21 L 475.69 245.83 L 474.5 245.83 Z M 497.31 250.35 L 498.5 250.35 L 498.5 247.97 L 497.31 247.97 Z M 474.5 250.95 C 474.5 251.36 474.68 251.54 475.09 251.54 L 475.93 251.54 L 475.93 250.35 L 475.69 250.35 L 475.69 249.4 L 474.5 249.4 Z M 477.12 251.54 L 479.5 251.54 L 479.5 250.35 L 477.12 250.35 Z M 480.69 251.54 L 483.07 251.54 L 483.07 250.35 L 480.69 250.35 Z M 484.25 251.54 L 486.63 251.54 L 486.63 250.35 L 484.25 250.35 Z M 487.82 251.54 L 490.2 251.54 L 490.2 250.35 L 487.82 250.35 Z M 491.39 251.54 L 493.77 251.54 L 493.77 250.35 L 491.39 250.35 Z M 494.96 251.54 L 497.34 251.54 L 497.34 250.35 L 494.96 250.35 Z" fill="#ffffff" stroke="none" pointer-events="none"/>
        <rect x="334" y="125" width="205" height="245" fill="#ffffff" stroke="#000000" pointer-events="none"/>
        <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 flex-start; width: 196px; height: 1px; padding-top: 132px; margin-left: 343px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: left; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                User "C"
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="343" y="144" fill="#000000" font-family="Helvetica" font-size="12px">
                    User "C"
                </text>
            </switch>
        </g>
        <path d="M 356.5 183 L 356.5 160 L 506.5 160 L 506.5 183" fill="#6a00ff" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 356.5 183 L 356.5 250 L 506.5 250 L 506.5 183" fill="none" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 356.5 183 L 506.5 183" fill="none" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#ffffff" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="431" y="176">
                Workspace "th1"
            </text>
        </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: 108px; height: 1px; padding-top: 240px; margin-left: 375px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                Template:  "go-th"
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="429" y="244" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Template:  "go-th"
                </text>
            </switch>
        </g>
        <path d="M 356.5 283 L 356.5 260 L 506.5 260 L 506.5 283" fill="#6a00ff" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 356.5 283 L 356.5 350 L 506.5 350 L 506.5 283" fill="none" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 356.5 283 L 506.5 283" fill="none" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#ffffff" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="431" y="276">
                Workspace "cs1"
            </text>
        </g>
        <path d="M 564 303.5 L 564 280.5 L 704 280.5 L 704 303.5" fill="#6a00ff" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 564 303.5 L 564 319.5 L 704 319.5 L 704 303.5" fill="none" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 564 303.5 L 704 303.5" fill="none" stroke="#3700cc" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#ffffff" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="633.5" y="296.5">
                Template "react-cs"
            </text>
        </g>
        <path d="M 564 300 L 545.29 300 Q 535.29 300 535.29 302.5 L 535.29 303.75 Q 535.29 305 525.29 305 L 512.87 305" fill="none" stroke="#999999" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/>
        <path d="M 507.62 305 L 514.62 301.5 L 512.87 305 L 514.62 308.5 Z" fill="#999999" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 498.89 320.53 C 498.63 320.55 498.36 320.61 498.13 320.73 L 487.76 325.68 C 487.21 325.94 486.81 326.44 486.68 327.02 L 484.12 338.15 C 484 338.67 484.1 339.21 484.38 339.66 C 484.43 339.71 484.46 339.76 484.5 339.82 L 491.68 348.74 C 492.06 349.21 492.64 349.49 493.23 349.49 L 504.75 349.49 C 505.35 349.49 505.92 349.21 506.31 348.74 L 513.49 339.81 C 513.85 339.34 514 338.73 513.87 338.15 L 511.3 327.02 C 511.17 326.44 510.77 325.94 510.23 325.68 L 499.85 320.73 C 499.55 320.58 499.22 320.51 498.89 320.53 Z" fill="#ffffff" stroke="none" pointer-events="none"/>
        <path d="M 498.9 321.4 C 498.65 321.41 498.4 321.48 498.18 321.58 L 488.43 326.24 C 487.92 326.48 487.54 326.95 487.42 327.5 L 485.01 337.96 C 484.9 338.45 484.99 338.96 485.26 339.38 C 485.3 339.43 485.34 339.47 485.37 339.53 L 492.12 347.92 C 492.47 348.35 493.02 348.62 493.58 348.62 L 504.41 348.62 C 504.97 348.62 505.51 348.35 505.87 347.92 L 512.62 339.52 C 512.96 339.08 513.1 338.51 512.98 337.96 L 510.56 327.5 C 510.44 326.95 510.07 326.48 509.55 326.24 L 499.8 321.58 C 499.52 321.44 499.21 321.38 498.9 321.4 Z" fill="#2875e2" stroke="none" pointer-events="none"/>
        <path d="M 508 329.69 L 508 339.26 L 499.62 343.91 L 499.57 332.2 Z M 490 329.69 L 490 339.26 L 498.38 343.91 L 498.43 332.2 Z M 490 328.7 L 499 326.09 L 508 328.7 L 499 331.31 Z" fill="#ffffff" stroke="none" pointer-events="none"/>
        <path d="M 498.89 220.53 C 498.63 220.55 498.36 220.61 498.13 220.73 L 487.76 225.68 C 487.21 225.94 486.81 226.44 486.68 227.02 L 484.12 238.15 C 484 238.67 484.1 239.21 484.38 239.66 C 484.43 239.71 484.46 239.76 484.5 239.82 L 491.68 248.74 C 492.06 249.21 492.64 249.49 493.23 249.49 L 504.75 249.49 C 505.35 249.49 505.92 249.21 506.31 248.74 L 513.49 239.81 C 513.85 239.34 514 238.73 513.87 238.15 L 511.3 227.02 C 511.17 226.44 510.77 225.94 510.23 225.68 L 499.85 220.73 C 499.55 220.58 499.22 220.51 498.89 220.53 Z" fill="#ffffff" stroke="none" pointer-events="none"/>
        <path d="M 498.9 221.4 C 498.65 221.41 498.4 221.48 498.18 221.58 L 488.43 226.24 C 487.92 226.48 487.54 226.95 487.42 227.5 L 485.01 237.96 C 484.9 238.45 484.99 238.96 485.26 239.38 C 485.3 239.43 485.34 239.47 485.37 239.53 L 492.12 247.92 C 492.47 248.35 493.02 248.62 493.58 248.62 L 504.41 248.62 C 504.97 248.62 505.51 248.35 505.87 247.92 L 512.62 239.52 C 512.96 239.08 513.1 238.51 512.98 237.96 L 510.56 227.5 C 510.44 226.95 510.07 226.48 509.55 226.24 L 499.8 221.58 C 499.52 221.44 499.21 221.38 498.9 221.4 Z" fill="#2875e2" stroke="none" pointer-events="none"/>
        <path d="M 508 229.69 L 508 239.26 L 499.62 243.91 L 499.57 232.2 Z M 490 229.69 L 490 239.26 L 498.38 243.91 L 498.43 232.2 Z M 490 228.7 L 499 226.09 L 508 228.7 L 499 231.31 Z" fill="#ffffff" stroke="none" pointer-events="none"/>
        <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: 111px; height: 1px; padding-top: 340px; margin-left: 372px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                Template:  "react-cs"
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="428" y="344" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Template:  "react-c...
                </text>
            </switch>
        </g>
        <path d="M 399.73 230 C 399.12 230 398.63 229.49 398.63 228.86 L 398.63 191.14 C 398.63 190.51 399.12 190 399.73 190 L 463.28 190 C 463.89 190 464.38 190.51 464.38 191.14 L 464.38 228.86 C 464.38 229.49 463.89 230 463.28 230 Z" fill="#0079d6" stroke="none" pointer-events="none"/>
        <path d="M 399.18 199.14 L 399.18 228.86 C 399.18 229.17 399.42 229.43 399.73 229.43 L 463.28 229.43 C 463.59 229.43 463.83 229.17 463.83 228.86 L 463.83 199.14 Z" fill-opacity="0.5" fill="#ffffff" stroke="none" pointer-events="none"/>
        <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: 191px; margin-left: 432px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #FFFFFF; line-height: 1.2; pointer-events: none; white-space: nowrap; ">
                                WebIDE
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="432" y="203" fill="#FFFFFF" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    WebIDE
                </text>
            </switch>
        </g>
        <path d="M 399.73 329 C 399.12 329 398.63 328.49 398.63 327.86 L 398.63 290.14 C 398.63 289.51 399.12 289 399.73 289 L 463.28 289 C 463.89 289 464.38 289.51 464.38 290.14 L 464.38 327.86 C 464.38 328.49 463.89 329 463.28 329 Z" fill="#0079d6" stroke="none" pointer-events="none"/>
        <path d="M 399.18 298.14 L 399.18 327.86 C 399.18 328.17 399.42 328.43 399.73 328.43 L 463.28 328.43 C 463.59 328.43 463.83 328.17 463.83 327.86 L 463.83 298.14 Z" fill-opacity="0.5" fill="#ffffff" stroke="none" pointer-events="none"/>
        <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: 290px; margin-left: 432px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #FFFFFF; line-height: 1.2; pointer-events: none; white-space: nowrap; ">
                                WebIDE
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="432" y="302" fill="#FFFFFF" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    WebIDE
                </text>
            </switch>
        </g>
        <path d="M 30 304.91 C 24.76 304.91 20.08 300.88 20.08 294.7 C 20.08 289.91 24.04 285 29.81 285 C 35.46 285 39.59 289.75 39.59 294.93 C 39.59 300.93 34.72 304.91 30 304.91 Z M 10 325 C 10.45 320.58 11.06 314.56 12.21 311.5 C 12.74 310.12 13.51 309.13 14.76 308.3 C 15.57 307.75 18.44 306.29 18.97 306.05 C 19.89 305.61 20.84 305.38 21.65 306.05 C 26.52 310.01 33.26 309.89 38.19 306.06 C 38.76 305.52 39.67 305.67 40.27 305.88 C 41.22 306.22 44.24 307.86 44.81 308.19 C 46.49 309.2 47.39 310.55 48.06 313.07 C 48.92 316.48 49.42 320.83 50 325 Z" fill="#505050" stroke="none" pointer-events="none"/>
        <path d="M 50 305 L 193.86 305 Q 203.86 305 213.86 305 L 350.13 305" fill="none" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 355.38 305 L 348.38 308.5 L 350.13 305 L 348.38 301.5 Z" fill="#999999" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 30 199.91 C 24.76 199.91 20.08 195.88 20.08 189.7 C 20.08 184.91 24.04 180 29.81 180 C 35.46 180 39.59 184.75 39.59 189.93 C 39.59 195.93 34.72 199.91 30 199.91 Z M 10 220 C 10.45 215.58 11.06 209.56 12.21 206.5 C 12.74 205.12 13.51 204.13 14.76 203.3 C 15.57 202.75 18.44 201.29 18.97 201.05 C 19.89 200.61 20.84 200.38 21.65 201.05 C 26.52 205.01 33.26 204.89 38.19 201.06 C 38.76 200.52 39.67 200.67 40.27 200.88 C 41.22 201.22 44.24 202.86 44.81 203.19 C 46.49 204.2 47.39 205.55 48.06 208.07 C 48.92 211.48 49.42 215.83 50 220 Z" fill="#505050" stroke="none" pointer-events="none"/>
        <path d="M 50 200 L 161 200 Q 171 200 171 190 L 171 181 Q 171 172 181 172 L 285.13 172" fill="none" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 290.38 172 L 283.38 175.5 L 285.13 172 L 283.38 168.5 Z" fill="#999999" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 50 100 L 142.43 100 Q 152.43 100 152.43 110 L 152.43 130 Q 152.43 140 162.43 140 L 247.63 140" fill="none" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 252.88 140 L 245.88 143.5 L 247.63 140 L 245.88 136.5 Z" fill="#999999" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 30 99.91 C 24.76 99.91 20.08 95.88 20.08 89.7 C 20.08 84.91 24.04 80 29.81 80 C 35.46 80 39.59 84.75 39.59 89.93 C 39.59 95.93 34.72 99.91 30 99.91 Z M 10 120 C 10.45 115.58 11.06 109.56 12.21 106.5 C 12.74 105.12 13.51 104.13 14.76 103.3 C 15.57 102.75 18.44 101.29 18.97 101.05 C 19.89 100.61 20.84 100.38 21.65 101.05 C 26.52 105.01 33.26 104.89 38.19 101.06 C 38.76 100.52 39.67 100.67 40.27 100.88 C 41.22 101.22 44.24 102.86 44.81 103.19 C 46.49 104.2 47.39 105.55 48.06 108.07 C 48.92 111.48 49.42 115.83 50 120 Z" fill="#505050" stroke="none" pointer-events="none"/>
        <path d="M 564 200 L 543.86 200 Q 533.86 200 533.86 205 L 533.86 207.5 Q 533.86 210 523.86 210 L 510.37 210" fill="none" stroke="#999999" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/>
        <path d="M 505.12 210 L 512.12 206.5 L 510.37 210 L 512.12 213.5 Z" fill="#999999" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 50 305 L 294 305 Q 304 305 304 295 L 304 215 Q 304 205 314 205 L 350.13 205" fill="none" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 355.38 205 L 348.38 208.5 L 350.13 205 L 348.38 201.5 Z" fill="#999999" stroke="#999999" stroke-miterlimit="10" pointer-events="none"/>
        <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: 58px; height: 1px; padding-top: 340px; margin-left: 1px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                User "C"
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="30" y="344" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    User "C"
                </text>
            </switch>
        </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: 58px; height: 1px; padding-top: 235px; margin-left: 1px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                User "B"
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="30" y="239" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    User "B"
                </text>
            </switch>
        </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: 58px; height: 1px; padding-top: 135px; margin-left: 1px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                User "A"
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="30" y="139" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    User "A"
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Viewer does not support full SVG 1.1
            </text>
        </a>
    </switch>
</svg>