Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-18 23:59:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #287166 from microsoft/rebornix/disgusted-jaguar

Browse Source 
Update instructions/documentation for notebook and interactive window components
This commit is contained in:
Peng Lyu
2026-01-12 13:45:33 -08:00
committed by GitHub
parent a1248f5307
commit 87912ef73b
8 changed files with 2589 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
.github/instructions/resources/interactive/interactive.eh.drawio.svg vendored Normal file
View File

@@ -0,0 +1,244 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="882px" height="752px" viewBox="-0.5 -0.5 882 752" content="&lt;mxfile&gt;&lt;diagram id=&quot;SckAI8QHEKwFKhKEKjYm&quot; name=&quot;Page-1&quot;&gt;7Vpdc5s4FP01ftwMEgjMY5J62zxsZ2e9nbaPLCiGCUYuyDHeX18BEiAkHNtBqadxXmJdfYDOuffo6toz+35dfsyDTfwXiXA6g1ZUzuwPMwiB6/rsX2XZNxYfcMMqTyI+qDMsk/8xN1rcuk0iXEgDKSEpTTayMSRZhkMq2YI8Jzt52CNJ5adughVWDMswSFXr1ySiMbcCy+o6PuFkFfNHzxHvWAdiMDcUcRCRXc9kL2b2fU4IbT6ty3ucVuAJXJp5f470ti+W44weMwHOmxnPQbrlm+MvRvditznZZhGuJoCZfbeLE4qXmyCseneMX2aL6Trl3Y9Jmt6TlOT1XDuyQozZru4KmpMn3OtBLgIeW+OOvwDOKS5HdwFabJhTYbLGNN+zIWWLfDOF+5OAe9eRM59zW9zjxRMDA+4Qq3bpDjP2gcM2AuHLCOIsuq3cjrUyklWbjoIibiHtwTeyc2jhSHJJFYreXpFmq8KW4zSgybPsyLrt8yf8TRL2Ji3Sri0j7c2RvERBtnmI+ay+472wkDtYhwb5ClNlnZqMdtdH8WNr+HFTWvkqqd+oI8r9sSWi44+ilp1bNgA4m7LrZJ9W1f9FWU3+RAoq1mNv0izZDFDcgDk4lemWo4L7Rj+EuClIk1XGmiFzC8zsd1W4JEyQbnnHOomi6jHa8OwC2OKb68WhVf8dcj0lNEfjEAE9qT3fdDW+aU8QhY4hlr88XNkVIev9MnbdU04p67RTSvAyApxycJmEFM5VTKGjA9WZAFXP4NkvXDsPefrm/jKMfRljG2owtjQYt0naazA2mV8pGMNDCvCmICONOGhBniID8xWMPxOK/yPkiVkXUULZji9XrTl3wDGr3p41CANbZQhAQ/ot8oIeRf/iOn+60qOnB3kqPb4pdoDCzkMFXhDWN4UrSacc1+ZiSL3ICJlb4vw5YQi96mQpnjANY3HMDEBtiBXFDnhBKZRnIYkToDl5gGfo5AG6a8f45T9Mg6JIwsGJPoAalwn9Vvn2DZOApvmdu3r1+UPZb+xFI2Nv3sxCovmdP6BudNPqlpg3IWXNzV86kZtLvOy+F1LI8AZXVds7s5AxHwg3dIxVMgDSnqJ1ffUfXJCURc17lgLX925kMXB9jRgI0Z5cDI64pZ4sBiNxbb0Q10JEQF9BbtBBDTGkBSLQJDFAFy0Gjn+mGHjuYCGDYqDe3hcljUlBu8vPO9QAe5CiadMBXZlqEgU44rZ/djpwQiS3qgEkzegk5G2zAXH0SwrgXbYCgIkUwDb3xQZQ6x5cAZr7WnEVgLEUwJQAQLXOcRWA7riXBMC/aAFAw7g9VwDQUEmmEwCo1m3eZcgDNNBcXWlTVzxrdeBVMQ/HZFgqol1k7ewg4QYLaWAg0rajYQxoGJuikCa+K+5rMhOhJW9ymHvMvKa4cgygZwTHWanUaRLJDqlg3xuwqRSrGFdQB+lTqI6VZkX9bDg/LwE7RzbHC6nGCt0pfqS/R6g6ot71Bl/7i2+oj45UgxHXz2fgseULwxE3rDYga3Z8xA1nu8Oix4SJilq4fMg2W3oNtEOBpsliJgo01ux+Ytrw2f1Q1178BA==&lt;/diagram&gt;&lt;/mxfile&gt;">
<defs/>
<g>
<rect x="0" y="0" width="880" height="750" rx="112.5" ry="112.5" fill="#d0cee2" stroke="#56517e" pointer-events="all"/>
<path d="M 520 735 L 520 15" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="400" y="15" 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: 30px; margin-left: 401px;">
<div data-drawio-colors="color: #000000; " 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 style="font-size: 14px">
Ext Host
</font>
</div>
</div>
</div>
</foreignObject>
<text x="430" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Ext Host
</text>
</switch>
</g>
<rect x="560" y="15" 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: 30px; margin-left: 561px;">
<div data-drawio-colors="color: #000000; " 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 style="font-size: 14px">
UI
</font>
</div>
</div>
</div>
</foreignObject>
<text x="590" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
UI
</text>
</switch>
</g>
<rect x="560" y="235" width="240" height="340" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="580" y="275" width="200" height="220" rx="12" ry="12" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="580" y="515" width="200" height="50" rx="10" ry="10" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="590" y="285" width="120" 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: 118px; height: 1px; padding-top: 300px; margin-left: 591px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Notebook Editor
</div>
</div>
</div>
</foreignObject>
<text x="650" y="304" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Notebook Editor
</text>
</switch>
</g>
<rect x="590" y="525" width="90" 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: 88px; height: 1px; padding-top: 540px; margin-left: 591px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Text Editor
</div>
</div>
</div>
</foreignObject>
<text x="635" y="544" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Text Editor
</text>
</switch>
</g>
<rect x="560" y="235" width="120" 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: 118px; height: 1px; padding-top: 250px; margin-left: 561px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Interactive Editor
</div>
</div>
</div>
</foreignObject>
<text x="620" y="254" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Interactive Editor
</text>
</switch>
</g>
<rect x="595" y="115" width="170" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 602.5 115 M 602.5 115 C 637 113.16 666.73 113.56 757.5 115 M 602.5 115 C 636.53 114.87 669.78 116.13 757.5 115 M 757.5 115 C 762.95 114.4 765.51 116.45 765 122.5 M 757.5 115 C 764.02 114.15 762.87 116.07 765 122.5 M 765 122.5 C 766.18 133.13 766.11 145.17 765 157.5 M 765 122.5 C 764.68 132.41 765.6 142.53 765 157.5 M 765 157.5 C 763.84 160.57 763.67 163.08 757.5 165 M 765 157.5 C 763.03 160.49 762.05 163.92 757.5 165 M 757.5 165 C 716.75 164.5 674.73 164.16 602.5 165 M 757.5 165 C 719.45 164.4 682.67 164.75 602.5 165 M 602.5 165 C 597.87 165.43 594.18 161.95 595 157.5 M 602.5 165 C 598.61 166.49 596.11 162.29 595 157.5 M 595 157.5 C 594.86 146.1 593.71 135.16 595 122.5 M 595 157.5 C 594.78 150.05 594.2 142.69 595 122.5 M 595 122.5 C 594.3 118.51 598.61 116.76 602.5 115 M 595 122.5 C 593.57 119.48 596.38 116.62 602.5 115" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" 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: 168px; height: 1px; padding-top: 140px; margin-left: 596px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookService
</div>
</div>
</div>
</foreignObject>
<text x="680" y="144" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
NotebookService
</text>
</switch>
</g>
<path d="M 680 285 L 680 171.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 680 166.12 L 683.5 173.12 L 680 171.37 L 676.5 173.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="587.5" y="645" width="185" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 595 645 M 595 645 C 630.38 647.66 664.94 644.45 765 645 M 595 645 C 657.15 643.29 717.27 642.98 765 645 M 765 645 C 771.86 645.46 770.77 645.7 772.5 652.5 M 765 645 C 771.91 645.28 772.3 649.53 772.5 652.5 M 772.5 652.5 C 773.13 664.85 772.19 676.08 772.5 687.5 M 772.5 652.5 C 773.44 661.04 771.85 669.88 772.5 687.5 M 772.5 687.5 C 772.54 691.38 768.14 693.64 765 695 M 772.5 687.5 C 771.75 690.62 771.42 695.54 765 695 M 765 695 C 713.02 694 661.62 693.71 595 695 M 765 695 C 719.55 695.65 671.7 694.71 595 695 M 595 695 C 590.6 694.85 586.33 693.01 587.5 687.5 M 595 695 C 590.17 696.46 588.33 692.48 587.5 687.5 M 587.5 687.5 C 586.11 676.46 588.92 667.95 587.5 652.5 M 587.5 687.5 C 588.01 673.98 587.87 662.64 587.5 652.5 M 587.5 652.5 C 587.67 648.5 588.01 644.15 595 645 M 587.5 652.5 C 589.43 645.33 590.91 646.56 595 645" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" 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: 183px; height: 1px; padding-top: 670px; margin-left: 589px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
TextModelResolverService
</div>
</div>
</div>
</foreignObject>
<text x="680" y="674" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
TextModelResolverService
</text>
</switch>
</g>
<path d="M 680 540 L 680 638.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 680 643.88 L 676.5 636.88 L 680 638.63 L 683.5 636.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="260" y="115" width="160" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 267.5 115 M 267.5 115 C 299.32 114.83 330.23 116.02 412.5 115 M 267.5 115 C 310.91 115.1 355.05 115.23 412.5 115 M 412.5 115 C 416.77 116.51 420.02 118.96 420 122.5 M 412.5 115 C 415.21 116.4 421.73 118.39 420 122.5 M 420 122.5 C 419.38 136.58 421.56 146.99 420 157.5 M 420 122.5 C 420.2 131.67 420.11 139.23 420 157.5 M 420 157.5 C 421.23 162.18 416.6 164.2 412.5 165 M 420 157.5 C 420.47 160.75 416.2 167.16 412.5 165 M 412.5 165 C 365.54 163.6 317.01 163.34 267.5 165 M 412.5 165 C 368.88 164.96 323.2 164.73 267.5 165 M 267.5 165 C 263.33 164.28 258.48 164.06 260 157.5 M 267.5 165 C 261.73 166.42 260.55 162.67 260 157.5 M 260 157.5 C 261.36 146.82 260.14 140.74 260 122.5 M 260 157.5 C 259.24 146.91 259.53 134.6 260 122.5 M 260 122.5 C 261.04 118.49 261.4 115.53 267.5 115 M 260 122.5 C 260.69 115.79 260.84 116.51 267.5 115" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" 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: 158px; height: 1px; padding-top: 140px; margin-left: 261px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ExthostNotebook
</div>
</div>
</div>
</foreignObject>
<text x="340" y="144" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
ExthostNotebook
</text>
</switch>
</g>
<path d="M 595 140 L 426.37 140" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 421.12 140 L 428.12 136.5 L 426.37 140 L 428.12 143.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="260" y="645" width="160" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 267.5 645 M 267.5 645 C 297.03 646.17 329.59 643.76 412.5 645 M 267.5 645 C 303.18 646.68 340.35 645.24 412.5 645 M 412.5 645 C 418.17 643.57 421.78 648.21 420 652.5 M 412.5 645 C 415.61 642.92 419.06 647.26 420 652.5 M 420 652.5 C 418.83 661.3 420.14 667.9 420 687.5 M 420 652.5 C 419.45 660.31 420.86 668.58 420 687.5 M 420 687.5 C 418.42 692.98 417.57 694.76 412.5 695 M 420 687.5 C 421.69 690.87 418.07 694.18 412.5 695 M 412.5 695 C 359.1 693.14 305.99 692.92 267.5 695 M 412.5 695 C 363.88 694.24 315.55 694.72 267.5 695 M 267.5 695 C 263.55 693.7 258.13 691.12 260 687.5 M 267.5 695 C 260.79 696.39 260.27 692.87 260 687.5 M 260 687.5 C 260.11 681.18 258.85 669.53 260 652.5 M 260 687.5 C 259.97 677.83 260.7 668.56 260 652.5 M 260 652.5 C 261.91 648.48 262.3 646.92 267.5 645 M 260 652.5 C 259.45 646.25 262.87 646.45 267.5 645" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" 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: 158px; height: 1px; padding-top: 670px; margin-left: 261px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ExthostEditors
</div>
</div>
</div>
</foreignObject>
<text x="340" y="674" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
ExthostEditors
</text>
</switch>
</g>
<path d="M 587.5 670 L 426.37 670" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 421.12 670 L 428.12 666.5 L 426.37 670 L 428.12 673.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="40" y="285" width="190" height="160" rx="24" ry="24" fill="none" stroke="none" pointer-events="all"/>
<path d="M 64 285 M 64 285 C 94.63 286.83 123.5 285 206 285 M 64 285 C 106.38 285.75 150.97 286.33 206 285 M 206 285 C 222.83 285.74 230 293.14 230 309 M 206 285 C 222.38 284.33 228.26 293.48 230 309 M 230 309 C 231.07 331.51 230.31 354.58 230 421 M 230 309 C 231.11 351.09 231.75 393.59 230 421 M 230 421 C 228.11 438.72 223.21 443.2 206 445 M 230 421 C 231.94 439.12 223.39 446.71 206 445 M 206 445 C 161.51 443.89 114.58 444.14 64 445 M 206 445 C 163.88 444.89 120.87 444.54 64 445 M 64 445 C 47.66 443.09 40.09 437.75 40 421 M 64 445 C 49.29 443.68 41.64 437.28 40 421 M 40 421 C 40.27 396.47 40.58 370.41 40 309 M 40 421 C 39.89 395.03 40.64 369.65 40 309 M 40 309 C 41.94 293.9 46.11 286.83 64 285 M 40 309 C 41.28 292.41 46.38 285.82 64 285" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="60" y="295" width="110" 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: 108px; height: 1px; padding-top: 310px; margin-left: 61px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ExthostInteractive
</div>
</div>
</div>
</foreignObject>
<text x="115" y="314" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
ExthostInteracti...
</text>
</switch>
</g>
<path d="M 170 365 L 330 365 Q 340 365 340 355 L 340 171.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 340 166.12 L 343.5 173.12 L 340 171.37 L 336.5 173.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="60" y="350" 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 flex-start; width: 58px; height: 1px; padding-top: 365px; margin-left: 62px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookEditor
</div>
</div>
</div>
</foreignObject>
<text x="62" y="369" fill="#000000" font-family="Helvetica" font-size="14px">
NotebookE...
</text>
</switch>
</g>
<path d="M 120 400 L 340 400 Q 350 400 350 410 L 350 638.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 350 643.88 L 346.5 636.88 L 350 638.63 L 353.5 636.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="60" y="385" 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 flex-start; width: 58px; height: 1px; padding-top: 400px; margin-left: 62px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Input
</div>
</div>
</div>
</foreignObject>
<text x="62" y="404" fill="#000000" font-family="Helvetica" font-size="14px">
Input
</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: 25 KiB