guides/assets/cookbook-overview.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="423px" height="483px" viewBox="-0.5 -0.5 423 483" content="&lt;mxfile&gt;&lt;diagram id=&quot;QQJxv4aCTC7ZgE7HHOvM&quot; name=&quot;Page-1&quot;&gt;7Zrdk5owEMD/Gh/bISCoj3d4197DdZzamz4HWCXTQJgQFPvXN0AQMXgfTg9xxhdJNrvB7C+7+dCR5Ub5N46T8JkFQEemEeQjaz4yTYSQLR+FZFdJHNupBGtOAqXUCJbkLyihoaQZCSBtKQrGqCBJW+izOAZftGSYc7Ztq60Ybb81wWv1RqMRLH1MQVP7TQIRVtKpOWnk34Gsw/rNyJlVLRGulVXHaYgDtj0QWQ8jy+WMiaoU5S7Qwnm1Xyq7xxOt+y/GIRbvMTArgw2mmRrbnEWYxKPCzqGyj3uPy9K6KJUgKYnX6ruLXe0QOYykKKYCEqmYACcRCOBKtGjq99uQCFgm2C/0t3J+SFkoIiprSBZXJIeaeFFPVdEo2yh1GWW8fKm1mvrg+4WO4OwPHLR4U3tslxYsFo84IrSYaHcbiIkcjPEDciEfzxCQLNrb1yQlg3vlFeAC8pOeRXtecqIDkwPkO6miDL5YykTNcdNSyLfNjEH1hA4PZoutZFhN0vW+64ajLCiU3VgtDeuCsw0JSnbHWJfAN8SX8XSj+nGqsx6pjjWqL2lJtCNWb1DPh2rZPUK1T0E9JjrHAns4vSE9B+kY9YjU0RdV2ABlyQXImWeRazOxFMu6+/G72f4PkmOjRRI5HSSt2eeQnHSQTCjbDQTkCpxukMFk5hkDA4kM+6t9OZRTDWW5RJ5YPh+5dAvEwS3ZnpNsJz0m29nJEJWmDo4Kp8dempRDPcb8kqw5DmAgkN8O5wtCRmY7D/d6nqn7PaD8zGIiGB/OafSq6PW6xUVIo+dmqWBR4c0y+1ZhWn3qUfqQF6l4GJgDG6bBuAvz1PQsx7ksZtM5CtI+j6dIv0z6CVnaibhjyXVZlLB0KLn4qhZcu9dcrF8uvVwEW8eO+B3ROaAd8R7Hq/vhz8Ko3ya5T9LInQ8kAq9qPe030ep3RovMoyQNOxPrihVuUan4hvajaHu9OkL63dFraO8WT0M5oV4X0z5PqEi/RVpmXupz4g0kIK9sU9vrbke/N/oFqRjOsfO6NqqfuEzKavO7edl28O8D6+Ef&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <path d="M 10 71 L 110 71 L 120 96 L 110 121 L 10 121 L 20 96 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 96px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Domain
                                <br/>
                                Modelling
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="65" y="100" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Domain...
                </text>
            </switch>
        </g>
        <path d="M 10 131 L 110 131 L 120 156 L 110 181 L 10 181 L 20 156 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 156px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Providing
                                <br/>
                                Services
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="65" y="160" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Providing...
                </text>
            </switch>
        </g>
        <path d="M 10 191 L 110 191 L 120 216 L 110 241 L 10 241 L 20 216 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 216px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Using
                                <br/>
                                Services
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="65" y="220" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Using...
                </text>
            </switch>
        </g>
        <path d="M 10 251 L 110 251 L 120 276 L 110 301 L 10 301 L 20 276 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 276px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Using
                                <br/>
                                Databases
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="65" y="280" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Using...
                </text>
            </switch>
        </g>
        <path d="M 1 1 L 128 1 L 140 26 L 128 51 L 1 51 L 13 26 Z" fill="#f8cecc" stroke="#b85450" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/>
        <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: 137px; height: 1px; padding-top: 26px; margin-left: 2px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 14px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Develop
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="71" y="30" fill="#000000" font-family="Avenir Next Medium" font-size="14px" text-anchor="middle">
                    Develop
                </text>
            </switch>
        </g>
        <path d="M 146.5 1 L 273.5 1 L 285.5 26 L 273.5 51 L 146.5 51 L 158.5 26 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/>
        <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: 137px; height: 1px; padding-top: 26px; margin-left: 148px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 14px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Deploy
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="216" y="30" fill="#000000" font-family="Avenir Next Medium" font-size="14px" text-anchor="middle">
                    Deploy
                </text>
            </switch>
        </g>
        <path d="M 10 311 L 110 311 L 120 336 L 110 361 L 10 361 L 20 336 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 336px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Serving
                                <br/>
                                Frontends
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="65" y="340" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Serving...
                </text>
            </switch>
        </g>
        <path d="M 161 71 L 261 71 L 271 96 L 261 121 L 161 121 L 171 96 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 96px; margin-left: 162px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Deploy,
                                <br/>
                                Upgrade
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="216" y="100" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Deploy,...
                </text>
            </switch>
        </g>
        <path d="M 161 191 L 261 191 L 271 216 L 261 241 L 161 241 L 171 216 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 216px; margin-left: 162px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Monitoring
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="216" y="220" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Monitoring
                </text>
            </switch>
        </g>
        <path d="M 301 131 L 401 131 L 411 156 L 401 181 L 301 181 L 311 156 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 156px; margin-left: 302px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Customize &amp;
                                <br/>
                                Extend
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="356" y="160" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Customize &amp;...
                </text>
            </switch>
        </g>
        <path d="M 10 371 L 110 371 L 120 396 L 110 421 L 10 421 L 20 396 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 396px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Reuse &amp;
                                <br/>
                                Compose
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="65" y="400" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Reuse &amp;...
                </text>
            </switch>
        </g>
        <path d="M 291 1 L 409 1 L 421 26 L 409 51 L 291 51 L 303 26 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/>
        <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: 128px; height: 1px; padding-top: 26px; margin-left: 292px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 14px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Use
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="356" y="30" fill="#000000" font-family="Avenir Next Medium" font-size="14px" text-anchor="middle">
                    Use
                </text>
            </switch>
        </g>
        <path d="M 161 131 L 261 131 L 271 156 L 261 181 L 161 181 L 171 156 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 156px; margin-left: 162px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                CI/CD
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="216" y="160" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    CI/CD
                </text>
            </switch>
        </g>
        <path d="M 161 251 L 261 251 L 271 276 L 261 301 L 161 301 L 171 276 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 276px; margin-left: 162px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Publish
                                <br/>
                                for Reuse
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="216" y="280" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Publish...
                </text>
            </switch>
        </g>
        <path d="M 161 311 L 261 311 L 271 336 L 261 361 L 161 361 L 171 336 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 336px; margin-left: 162px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Publish
                                <br/>
                                APIs
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="216" y="340" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Publish...
                </text>
            </switch>
        </g>
        <path d="M 301 71 L 401 71 L 411 96 L 401 121 L 301 121 L 311 96 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 96px; margin-left: 302px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Subscribe
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="356" y="100" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Subscribe
                </text>
            </switch>
        </g>
        <path d="M 10 431 L 110 431 L 120 456 L 110 481 L 10 481 L 20 456 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <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: 456px; margin-left: 11px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Avenir Next Medium; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Testing
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="65" y="460" fill="#000000" font-family="Avenir Next Medium" font-size="12px" text-anchor="middle">
                    Testing
                </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>