code-reuse.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="511px" height="411px" viewBox="-0.5 -0.5 511 411" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2021-04-13T16:19:09.293Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36&quot; etag=&quot;q45CkGbpOPXMrWkIiwDt&quot; version=&quot;14.6.0&quot;&gt;&lt;diagram id=&quot;pk9mSNKqACp2gHQE7Ucu&quot; name=&quot;Page-1&quot;&gt;7VvLcuMoFP0aLSeFQC8vbSfp7qnJTGq8SPeqC0tEploWLoRje75+wEK2JJTYcfAj6SipiriAhM454l5diIOG0+UXjmeTO5aQzIEgWTro2oHQ9SB01C9IVqUl7EWlIeU00Y22hhH9j2gj0NY5TUjRaCgYywSdNY0xy3MSi4YNc84WzWaPLGvedYZTYhhGMc5M6wNNxKS0Rj7Y2r8Smk6qO7tA10xx1VgbiglO2KJmQjcOGnLGRHk2XQ5JpsCrcCn73T5TuxkYJ7nYp0M/+pIMwsn3xIv//Hkf/rUQf9/9gTQbTzib6yfWoxWrCgLO5nlC1FWAgwaLCRVkNMOxql1I0qVtIqaZLLnytBCc/SJDljEuLTnLZbOBvgfhgiyfHb27wUSKibApEXwlm1QdQg2j1pHb0+XFlhW/Es2kxohXGbFWQrq59hYseaLxegV2MLSM3SPNsgo5B6JHX/0YmMqaYH2oHiwXNXt5WAK85zcA93wTcC/oANxFxwLcNfAeMk6k5QEX0/XI5MBgkMmBDMZcnqXqbLQqBFHVN0Uhn53irLBKEwARBqCLJgD8cF3ToulxfdihCQUtmiKTJhd20BQciyVksHTPuMDjTDEV89VMsFT5ChqbXGV0zPH68eYFzVP5l+M8YVOrhCU+iRKvi7AIjtH6vbJAjO9eGjHeS8TQqXKEEJA8lj6cb94mkLE0LalguXKgmGZz9dK9O0LgxRHiG4Q8kLG60Wz2NnxtoBU1/S3qmP5Pi1ZgotUffbsQuDzv0uDaIzghedJXIfI2UKuBQpZUfFf4Xfm69EOjqc6vl/XCqirkcuRlJ+hX5R/VBVVh229dqjoeOiGQxIjeW4zJB2ZzHpPd86LAPCVi1+tqKqAegHYQXNk4ybCgT83hdrGu73DPqHyQrcBAU2C+3xJO+Zi6V/0zoH0hv3Uh0LpQiYNxobUIN499uC73+OB4WZdbjYWv0tghgj6rLtGeugw+dWlBlz1r82V4TH3V5P8q9VvUZZWGuWxdtuTkhQfq0m8J3IOn1WWVvjitMD+2J/9UphVlmvmYk7ty+MF8+WeMaUWZ0J4yP7gw93Xmn8K0IkwzOXqYM3fr6tp80Ozy5XUp15T9nl35M2mZU+nSf1lO++vymcWWU+myIxVZJtf6998KBw7NVD25Sq9k/S3NSKFXWN6Sg2uJjbhSbmGX2HpBiLCllHA7awerUOxsWTvXTNuVOeFdPFz/c2eVgAST6DHuXHyMIzK2tHrVzjJfAAEW81ON0AHsmG2701PuizN7e8E4ikkcW44PwncZILT1cXCA0N49cOSJGL75m+p3CRD2DVzRZ4BgQ5fmtPgvmRd68bh0TgDniaN2YiXm8rB0EaIpVJzRNJfnsWSeSJ0MlCOhMc76umJKk0R173RcTddmwROh9ovftYDXpZR20sXePgoz8TdQ+9nU4rxFR++OsUtg11sLQHDTv3WOun3FCADgngHA0TYZIXMGHhH+ZBn1MAhAhLtQ9xC89sPjom7EvedH3fwAeZ3f61CvOqzkcvZP5Zwj8EKgm+vTeDjY3vjgHejh/N55Iy9k7i/5zRUY7ClA96yhv+9ZCv3PLsC37tj5cAKsslK7p8CzZgHfgQJlcfuPBmXz7b9roJv/AQ==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="0" y="0" width="510" height="410" fill="#ffffff" stroke="none" pointer-events="all"/><rect x="25" y="260" width="460" height="130" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="195" y="290" width="120" height="60" fill="#008a00" stroke="#005700" 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: 118px; height: 1px; padding-top: 320px; margin-left: 196px;"><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: all; white-space: normal; word-wrap: normal; ">Core Wasm with<br />System Essentials</div></div></div></foreignObject><text x="255" y="324" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">Core Wasm with...</text></switch></g><rect x="345" y="290" width="120" height="60" fill="#d5e8d4" stroke="#82b366" 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: 118px; height: 1px; padding-top: 320px; margin-left: 346px;"><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: all; white-space: normal; word-wrap: normal; ">Portable cryptographic<br />library using random</div></div></div></foreignObject><text x="405" y="324" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Portable cryptograph...</text></switch></g><rect x="45" y="290" width="120" height="60" fill="#d5e8d4" stroke="#82b366" 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: 118px; height: 1px; padding-top: 320px; margin-left: 46px;"><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: all; white-space: normal; word-wrap: normal; ">Portable image encoder with logging on failure</div></div></div></foreignObject><text x="105" y="324" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Portable image encod...</text></switch></g><rect x="110" y="160" width="120" height="60" fill="#ffffff" stroke="#000000" 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: 118px; height: 1px; padding-top: 190px; margin-left: 111px;"><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: all; white-space: normal; word-wrap: normal; ">Web app</div></div></div></foreignObject><text x="170" y="194" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Web app</text></switch></g><rect x="270" y="160" width="120" height="60" fill="#ffffff" stroke="#000000" 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: 118px; height: 1px; padding-top: 190px; margin-left: 271px;"><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: all; white-space: normal; word-wrap: normal; ">WASI app</div></div></div></foreignObject><text x="330" y="194" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">WASI app</text></switch></g><path d="M 105 290 L 140 220" fill="none" stroke="#82b366" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 405 290 L 360 220" fill="none" stroke="#82b366" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 285 290 L 330 220" fill="none" stroke="#82b366" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 135 290 L 300 220" fill="none" stroke="#82b366" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 375 290 L 200 220" fill="none" stroke="#82b366" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 225 290 L 170 220" fill="none" stroke="#82b366" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 165 320 L 195 320" fill="none" stroke="#82b366" stroke-miterlimit="10" pointer-events="stroke"/><rect x="270" y="80" width="120" height="60" fill="#e1d5e7" stroke="#9673a6" 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: 118px; height: 1px; padding-top: 110px; margin-left: 271px;"><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: all; white-space: normal; word-wrap: normal; ">WASI APIs,<br />e.g. Filesystem</div></div></div></foreignObject><text x="330" y="114" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">WASI APIs,...</text></switch></g><rect x="110" y="80" width="120" height="60" fill="#dae8fc" stroke="#6c8ebf" 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: 118px; height: 1px; padding-top: 110px; margin-left: 111px;"><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: all; white-space: normal; word-wrap: normal; ">Web APIs,<br />e.g. DOM</div></div></div></foreignObject><text x="170" y="114" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Web APIs,...</text></switch></g><path d="M 170 140 L 170 160" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 315 320 L 345 320" fill="none" stroke="#82b366" stroke-miterlimit="10" pointer-events="stroke"/><rect x="180" y="360" width="150" height="20" fill="none" stroke="none" 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: 148px; height: 1px; padding-top: 370px; margin-left: 181px;"><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: all; white-space: normal; word-wrap: normal; ">Reusable APIs and code</div></div></div></foreignObject><text x="255" y="374" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Reusable APIs and code</text></switch></g><rect x="110" y="30" width="120" height="30" fill="#1ba1e2" stroke="#006eaf" 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: 118px; height: 1px; padding-top: 45px; margin-left: 111px;"><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: all; white-space: normal; word-wrap: normal; ">Browser</div></div></div></foreignObject><text x="170" y="49" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">Browser</text></switch></g><rect x="270" y="30" width="120" height="30" fill="#76608a" stroke="#432d57" 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: 118px; height: 1px; padding-top: 45px; margin-left: 271px;"><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: all; white-space: normal; word-wrap: normal; ">Server</div></div></div></foreignObject><text x="330" y="49" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">Server</text></switch></g><path d="M 170 80 L 170 60" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 330 160 L 330 140" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 330 80 L 330 60" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/></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>