assets/context.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="881px" height="361px" viewBox="-0.5 -0.5 881 361"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-c2e3fc-1-7ea6e0-1-s-0"><stop offset="0%" style="stop-color:#C2E3FC"/><stop offset="100%" style="stop-color:#7ea6e0"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffde0a-1-ffa500-1-s-0"><stop offset="0%" style="stop-color:#FFDE0A"/><stop offset="100%" style="stop-color:#ffa500"/></linearGradient></defs><g><rect x="480" y="0" width="240" height="120" fill="url(#mx-gradient-c2e3fc-1-7ea6e0-1-s-0)" stroke="#6c8ebf" pointer-events="none"/><g transform="translate(518.5,48.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="162" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 162px; white-space: nowrap; overflow-wrap: normal; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Context Provider</div></div></foreignObject><text x="81" y="21" fill="#FFFFFF" text-anchor="middle" font-size="20px" font-family="Helvetica" font-weight="bold">Context Provider</text></switch></g><path d="M 440 240 L 440 180 L 600 180 L 600 128.24" fill="none" stroke="#666666" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 600 122.24 L 604 130.24 L 600 128.24 L 596 130.24 Z" fill="#666666" stroke="#666666" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="320" y="240" width="240" height="120" fill="url(#mx-gradient-ffde0a-1-ffa500-1-s-0)" stroke="#d79b00" pointer-events="none"/><g transform="translate(350.5,288.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="178" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 180px; white-space: nowrap; overflow-wrap: normal; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Context Consumer</div></div></foreignObject><text x="89" y="21" fill="#FFFFFF" text-anchor="middle" font-size="20px" font-family="Helvetica" font-weight="bold">Context Consumer</text></switch></g><path d="M 760 240 L 760 180 L 600 180 L 600 128.24" fill="none" stroke="#666666" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 600 122.24 L 604 130.24 L 600 128.24 L 596 130.24 Z" fill="#666666" stroke="#666666" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="640" y="240" width="240" height="120" fill="url(#mx-gradient-ffde0a-1-ffa500-1-s-0)" stroke="#d79b00" pointer-events="none"/><g transform="translate(670.5,288.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="178" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 180px; white-space: nowrap; overflow-wrap: normal; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Context Consumer</div></div></foreignObject><text x="89" y="21" fill="#FFFFFF" text-anchor="middle" font-size="20px" font-family="Helvetica" font-weight="bold">Context Consumer</text></switch></g><rect x="0" y="0" width="240" height="120" fill="url(#mx-gradient-c2e3fc-1-7ea6e0-1-s-0)" stroke="#6c8ebf" pointer-events="none"/><g transform="translate(38.5,48.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="162" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 162px; white-space: nowrap; overflow-wrap: normal; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Context Provider</div></div></foreignObject><text x="81" y="21" fill="#FFFFFF" text-anchor="middle" font-size="20px" font-family="Helvetica" font-weight="bold">Context Provider</text></switch></g><path d="M 120 240 L 120 128.24" fill="none" stroke="#666666" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 120 122.24 L 124 130.24 L 120 128.24 L 116 130.24 Z" fill="#666666" stroke="#666666" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="0" y="240" width="240" height="120" fill="url(#mx-gradient-ffde0a-1-ffa500-1-s-0)" stroke="#d79b00" pointer-events="none"/><g transform="translate(30.5,288.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="178" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 180px; white-space: nowrap; overflow-wrap: normal; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Context Consumer</div></div></foreignObject><text x="89" y="21" fill="#FFFFFF" text-anchor="middle" font-size="20px" font-family="Helvetica" font-weight="bold">Context Consumer</text></switch></g></g></svg>