paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 40 Packages Projects Releases Wiki Activity

docs/frontend-system: initial extension architecture with extension structure

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2023-10-25 17:48:49 +02:00
parent bb2ca14a74
commit e733e6da56
2 changed files with 392 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/frontend-system/architecture-extension.drawio.svg
+332
View File
@@ -0,0 +1,332 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="411px" height="382px" viewBox="-0.5 -0.5 411 382" content="&lt;mxfile scale=&quot;1&quot; border=&quot;20&quot;&gt;&lt;diagram id=&quot;W2IAjyMExVh-jXkT93Bg&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
<defs/>
<g>
<rect x="230" y="200" width="60" height="40" fill="#f5f5f5" stroke="#666666" pointer-events="all"/>
<rect x="220" y="200" width="60" height="40" fill="#f5f5f5" stroke="#666666" pointer-events="all"/>
<path d="M 210 180 L 210 120" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<rect x="130" y="140" width="160" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" 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: 158px; height: 1px; padding-top: 160px; margin-left: 131px;">
<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;">
Extension
</div>
</div>
</div>
</foreignObject>
<text x="210" y="164" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Extension
</text>
</switch>
</g>
<rect x="180" y="80" width="60" height="40" fill="#f5f5f5" stroke="#666666" 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: 100px; margin-left: 181px;">
<div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Output
</div>
</div>
</div>
</foreignObject>
<text x="210" y="104" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
Output
</text>
</switch>
</g>
<path d="M 160 200 L 160 180" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<rect x="130" y="200" width="60" height="40" fill="#f5f5f5" stroke="#666666" 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: 220px; margin-left: 131px;">
<div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Input 1
</div>
</div>
</div>
</foreignObject>
<text x="160" y="224" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
Input 1
</text>
</switch>
</g>
<path d="M 250 200 L 250 180" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<rect x="210" y="200" width="60" height="40" fill="#f5f5f5" stroke="#666666" 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: 220px; margin-left: 211px;">
<div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Input 2
</div>
</div>
</div>
</foreignObject>
<text x="240" y="224" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
Input 2
</text>
</switch>
</g>
<path d="M 40.2 140 L 79.8 140 L 90 150 L 90 170 L 79.8 180 L 40.2 180 L 30 170 L 30 150 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" 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: 160px; margin-left: 31px;">
<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;">
disabled
</div>
</div>
</div>
</foreignObject>
<text x="60" y="164" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
disabled
</text>
</switch>
</g>
<path d="M 130 240 L 130 240 L 130 240 L 150 240 L 150 240 L 150 260 L 140 250 L 130 260 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 180 80 L 190 70 L 190 70 L 200 80 L 200 80 L 200 80 L 190 80 L 180 80 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 220 80 L 230 70 L 230 70 L 240 80 L 240 80 L 240 80 L 230 80 L 220 80 Z" fill="#fff2cc" stroke="#d6b656" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 170 240 L 170 240 L 170 240 L 190 240 L 190 240 L 190 260 L 180 250 L 170 260 Z" fill="#fff2cc" stroke="#d6b656" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 210 240 L 210 240 L 210 240 L 230 240 L 230 240 L 230 260 L 220 250 L 210 260 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 240 240 L 240 240 L 240 240 L 260 240 L 260 240 L 260 260 L 250 250 L 240 260 Z" fill="#fff2cc" stroke="#d6b656" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 270 240 L 270 240 L 270 240 L 290 240 L 290 240 L 290 260 L 280 250 L 270 260 Z" fill="#d5e8d4" stroke="#82b366" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 210 40 Q 210 50 200 50 Q 190 50 190 60" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="170" y="20" width="80" height="20" 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: 78px; height: 1px; padding-top: 30px; margin-left: 171px;">
<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: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Output Data
</div>
</div>
</div>
</foreignObject>
<text x="210" y="33" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">
Output Data
</text>
</switch>
</g>
<path d="M 210 40 Q 210 50 220 50 Q 230 50 230 60" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="160" y="300" width="80" height="20" 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: 78px; height: 1px; padding-top: 310px; margin-left: 161px;">
<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: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Input Data
</div>
</div>
</div>
</foreignObject>
<text x="200" y="313" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">
Input Data
</text>
</switch>
</g>
<path d="M 180 300 Q 180 280 160 280 Q 140 280 140 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 180 300 Q 180 300 180 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 220 300 Q 220 300 220 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 220 300 Q 220 280 235 280 Q 250 280 250 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 220 300 Q 220 280 250 280 Q 280 280 280 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="330" y="110" width="60" height="20" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" 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: 120px; margin-left: 331px;">
<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;">
id
</div>
</div>
</div>
</foreignObject>
<text x="360" y="124" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
id
</text>
</switch>
</g>
<rect x="330" y="140" width="60" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" 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: 160px; margin-left: 331px;">
<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;">
config schema
</div>
</div>
</div>
</foreignObject>
<text x="360" y="164" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
config sch...
</text>
</switch>
</g>
<rect x="330" y="190" width="60" height="20" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" 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: 200px; margin-left: 331px;">
<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;">
factory
</div>
</div>
</div>
</foreignObject>
<text x="360" y="204" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
factory
</text>
</switch>
</g>
<path d="M 330 120 L 290 150" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 330 200 L 290 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 330 160 L 290 160" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 90 160 L 130 160" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 90 110 L 130 150" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 90 210 L 130 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 40.2 90 L 79.8 90 L 90 100 L 90 120 L 79.8 130 L 40.2 130 L 30 120 L 30 100 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" 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: 110px; margin-left: 31px;">
<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;">
attachTo
</div>
</div>
</div>
</foreignObject>
<text x="60" y="114" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
attachTo
</text>
</switch>
</g>
<path d="M 40.2 190 L 79.8 190 L 90 200 L 90 220 L 79.8 230 L 40.2 230 L 30 220 L 30 200 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" 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: 210px; margin-left: 31px;">
<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;">
config
</div>
</div>
</div>
</foreignObject>
<text x="60" y="214" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
config
</text>
</switch>
</g>
<rect x="320" y="310" width="40" height="20" 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: 38px; height: 1px; padding-top: 320px; margin-left: 321px;">
<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: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Static
</div>
</div>
</div>
</foreignObject>
<text x="340" y="323" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">
Static
</text>
</switch>
</g>
<rect x="300" y="310" width="20" height="20" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="320" y="340" width="70" height="20" 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: 350px; margin-left: 321px;">
<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: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Configurable
</div>
</div>
</div>
</foreignObject>
<text x="355" y="353" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">
Configurable
</text>
</switch>
</g>
<path d="M 305 340 L 315 340 L 320 345 L 320 355 L 315 360 L 305 360 L 300 355 L 300 345 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="20" y="310" width="10" height="10" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/>
<rect x="40" y="310" width="100" height="10" 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: 98px; height: 1px; padding-top: 315px; margin-left: 42px;">
<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: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Extension Data A
</div>
</div>
</div>
</foreignObject>
<text x="42" y="318" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
Extension Data A
</text>
</switch>
</g>
<rect x="20" y="330" width="10" height="10" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/>
<rect x="40" y="330" width="100" height="10" 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: 98px; height: 1px; padding-top: 335px; margin-left: 42px;">
<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: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Extension Data B
</div>
</div>
</div>
</foreignObject>
<text x="42" y="338" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
Extension Data B
</text>
</switch>
</g>
<rect x="20" y="350" width="10" height="10" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="40" y="350" width="100" height="10" 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: 98px; height: 1px; padding-top: 355px; margin-left: 42px;">
<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: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Extension Data C
</div>
</div>
</div>
</foreignObject>
<text x="42" y="358" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
Extension Data C
</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>
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB