docs/sdl2_diagram.svg

<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!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="1132px" height="564px" viewBox="-0.5 -0.5 1132 564" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2022-11-03T09:32:34.868Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36&quot; etag=&quot;wX_T4vTICp-ka2OWIEnG&quot; version=&quot;20.5.1&quot; type=&quot;github&quot;&gt;&lt;diagram id=&quot;pPOsY4_eOnauvoGxSJud&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" resource="https://app.diagrams.net/#Hdiraneyya%2Fsdl2-game-starter%2Fmain%2Fdocs%2Fsdl2_diagram.svg"><defs/><g><rect x="152" y="461" width="200" height="60" rx="9" ry="9" fill="#ffff88" stroke="#36393d" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 491px; margin-left: 153px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font data-font-src="https://fonts.googleapis.com/css?family=FiraCode" style="font-size: 19px;">HTML5 &lt;canvas&gt;</font></div></div></div></foreignObject><text x="252" y="495" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">HTML5 &lt;canvas&gt;</text></switch></g><path d="M 332 351 L 302 351 L 302 450.9" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 302 457.65 L 297.5 448.65 L 302 450.9 L 306.5 448.65 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="332" y="331" width="180" height="40" fill="#ffff88" stroke="#36393d" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 351px; margin-left: 333px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 19px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">WebGL API</div></div></div></foreignObject><text x="422" y="357" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="19px" text-anchor="middle">WebGL API</text></switch></g><path d="M 182 351 L 209 351 L 208.96 453.91" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 208.96 460.66 L 204.46 451.65 L 208.96 453.91 L 213.46 451.66 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="2" y="331" width="180" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 351px; margin-left: 3px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 19px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Canvas API</div></div></div></foreignObject><text x="92" y="357" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="19px" text-anchor="middle">Canvas API</text></switch></g><rect x="2" y="411" width="180" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 426px; margin-left: 3px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 19px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2D graphics</div></div></div></foreignObject><text x="92" y="432" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="19px" text-anchor="middle">2D graphics</text></switch></g><rect x="332" y="411" width="180" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 426px; margin-left: 333px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 19px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2D/3D graphics</div></div></div></foreignObject><text x="422" y="432" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="19px" text-anchor="middle">2D/3D graphics</text></switch></g><rect x="262" y="391" width="60" height="30" fill="none" stroke="none" transform="rotate(-90,292,406)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 292 406)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 406px; margin-left: 263px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">accesses</div></div></div></foreignObject><text x="292" y="410" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">accesses</text></switch></g><rect x="187" y="391" width="60" height="30" fill="none" stroke="none" transform="rotate(-90,217,406)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 217 406)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 406px; margin-left: 188px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">accesses</div></div></div></foreignObject><text x="217" y="410" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">accesses</text></switch></g><path d="M 282 211 L 452.1 211 L 452.06 320.9" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 452.06 327.65 L 447.56 318.64 L 452.06 320.9 L 456.56 318.65 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="162" y="191" width="120" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 211px; margin-left: 163px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 15px;">Three.js</font></div></div></div></foreignObject><text x="222" y="215" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">Three.js</text></switch></g><rect x="292" y="191" width="120" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 211px; margin-left: 293px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 15px;">BabylonJS</font></div></div></div></foreignObject><text x="352" y="215" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">BabylonJS</text></switch></g><path d="M 537 211 L 474.9 211 L 474.92 322.42" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 474.92 329.17 L 470.42 320.17 L 474.92 322.42 L 479.42 320.17 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><path d="M 657 211 L 717 211 L 717 320.9" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 717 327.65 L 712.5 318.65 L 717 320.9 L 721.5 318.65 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><path d="M 657 211 L 1007 211 L 1007 320.9" fill="none" stroke="rgb(0, 0, 0)" stroke-opacity="0.3" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1007 327.65 L 1002.5 318.65 L 1007 320.9 L 1011.5 318.65 Z" fill-opacity="0.3" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-opacity="0.3" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="537" y="191" width="120" height="40" fill="#cce5ff" stroke="#36393d" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 211px; margin-left: 538px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 15px;">SDL2</font></div></div></div></foreignObject><text x="597" y="215" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">SDL2</text></switch></g><rect x="412" y="257" width="60" height="30" fill="none" stroke="none" transform="rotate(-90,442,272)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 442 272)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 272px; margin-left: 413px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">abstracts</div></div></div></foreignObject><text x="442" y="276" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">abstracts</text></switch></g><rect x="452" y="257" width="60" height="30" fill="none" stroke="none" transform="rotate(-90,482,272)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 482 272)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 272px; margin-left: 453px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">abstracts</div></div></div></foreignObject><text x="482" y="276" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">abstracts</text></switch></g><rect x="259" y="121" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 136px; margin-left: 260px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Javascript libraries</div></div></div></foreignObject><text x="289" y="141" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle">Javascri...</text></switch></g><rect x="562" y="121" width="70" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 136px; margin-left: 563px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Cross-platform (C/C++)</div></div></div></foreignObject><text x="597" y="141" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle">Cross-pla...</text></switch></g><rect x="502" y="31" width="190" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 46px; margin-left: 503px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">Legacy applications<br />(port an old game to web)</div></div></div></foreignObject><text x="597" y="51" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle" font-weight="bold">Legacy applications...</text></switch></g><rect x="52" y="31" width="240" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 46px; margin-left: 53px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">New applications<br />(only needs to run in web)</div></div></div></foreignObject><text x="172" y="51" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle" font-weight="bold">New applications...</text></switch></g><path d="M 452 191 L 452 1" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke"/><path d="M 717 371 L 717 450.9" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 717 457.65 L 712.5 448.65 L 717 450.9 L 721.5 448.65 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="662" y="331" width="110" height="40" fill="#cdeb8b" stroke="#36393d" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 351px; margin-left: 663px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 19px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Metal</div></div></div></foreignObject><text x="717" y="357" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="19px" text-anchor="middle">Metal</text></switch></g><rect x="594.5" y="461" width="245" height="60" rx="9" ry="9" fill="#cdeb8b" stroke="#36393d" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 243px; height: 1px; padding-top: 491px; margin-left: 596px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font data-font-src="https://fonts.googleapis.com/css?family=FiraCode" style="font-size: 19px;">Native Mac OS X<br />Application Window</font></div></div></div></foreignObject><text x="717" y="495" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Native Mac OS X...</text></switch></g><rect x="678" y="257" width="60" height="30" fill="none" stroke="none" transform="rotate(-90,708,272)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 708 272)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 272px; margin-left: 679px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">abstracts</div></div></div></foreignObject><text x="708" y="276" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">abstracts</text></switch></g><rect x="612" y="531" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 546px; margin-left: 614px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 18px; font-family: &quot;Courier New&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">$ make macos</div></div></div></foreignObject><text x="614" y="551" fill="rgb(0, 0, 0)" font-family="Courier New" font-size="18px" font-weight="bold">$ make macos</text></switch></g><rect x="162" y="531" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 546px; margin-left: 164px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 18px; font-family: &quot;Courier New&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">$ make web</div></div></div></foreignObject><text x="164" y="551" fill="rgb(0, 0, 0)" font-family="Courier New" font-size="18px" font-weight="bold">$ make web</text></switch></g><path d="M 1007 371 L 1007 450.9" fill="none" stroke="rgb(0, 0, 0)" stroke-opacity="0.3" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1007 457.65 L 1002.5 448.65 L 1007 450.9 L 1011.5 448.65 Z" fill-opacity="0.3" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-opacity="0.3" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="952" y="331" width="110" height="40" fill-opacity="0.3" fill="#cdeb8b" stroke="#36393d" stroke-opacity="0.3" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)" opacity="0.3"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 351px; margin-left: 953px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 19px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">DirectX</div></div></div></foreignObject><text x="1007" y="357" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="19px" text-anchor="middle">DirectX</text></switch></g><rect x="966" y="257" width="60" height="30" fill="none" stroke="none" transform="rotate(-90,996,272)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 996 272)" opacity="0.3"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 272px; margin-left: 967px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">abstracts</div></div></div></foreignObject><text x="996" y="276" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">abstracts</text></switch></g><rect x="884.5" y="461" width="245" height="60" rx="9" ry="9" fill-opacity="0.3" fill="#cdeb8b" stroke="#36393d" stroke-opacity="0.3" stroke-width="4" pointer-events="all"/><g transform="translate(-0.5 -0.5)" opacity="0.3"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 243px; height: 1px; padding-top: 491px; margin-left: 886px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font data-font-src="https://fonts.googleapis.com/css?family=FiraCode" style="font-size: 19px;">Native MS Windows Application Window</font></div></div></div></foreignObject><text x="1007" y="495" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Native MS Windows Application Window</text></switch></g><rect x="891" y="531" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)" opacity="0.3"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 546px; margin-left: 893px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 18px; font-family: &quot;Courier New&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">$ make windows</div></div></div></foreignObject><text x="893" y="551" fill="rgb(0, 0, 0)" font-family="Courier New" font-size="18px" font-weight="bold">$ make windows</text></switch></g><rect x="678" y="391" width="60" height="30" fill="none" stroke="none" transform="rotate(-90,708,406)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 708 406)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 406px; margin-left: 679px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">accesses</div></div></div></foreignObject><text x="708" y="410" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">accesses</text></switch></g><rect x="966" y="391" width="60" height="30" fill="none" stroke="none" transform="rotate(-90,996,406)" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 996 406)" opacity="0.3"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><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: 406px; margin-left: 967px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">accesses</div></div></div></foreignObject><text x="996" y="410" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="13px" text-anchor="middle">accesses</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%">Text is not SVG - cannot display</text></a></switch></svg>