Skip to content

Diagram of VS/SDK component interactions #13127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JanProvaznik merged 3 commits into from
Jan 29, 2026
Merged

Diagram of VS/SDK component interactions #13127

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd7bd48
VS/SDK component diagram
rainersigwald Feb 11, 2025
24e9575
Update components for .NET SDK 10 GA
rainersigwald Jan 27, 2026
605881a
Rename Components
rainersigwald Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 173 additions & 0 deletions documentation/Components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Layer Diagram</title>
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The page <title> (“Interactive Layer Diagram”) doesn’t match the main heading (“MSBuild/.NET SDK/Visual Studio Interactions”). Aligning them makes the document easier to find/bookmark and reduces ambiguity in browser tabs/history.

Suggested change
<title>Interactive Layer Diagram</title>
<title>MSBuild/.NET SDK/Visual Studio Interactions</title>

Copilot uses AI. Check for mistakes.
<style>
:root {
--highlight-color: black;
--vs-color: chocolate;
--sdk-color: #512bd4;
}

body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

font-family list ends with ..., sans-serif, sans-serif; (duplicate fallback). Removing the extra sans-serif avoids confusion and keeps the style declaration clean.

Suggested change
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

Copilot uses AI. Check for mistakes.
}

#diagram {
width: 100%;
display:flex;
flex-direction: row;
color: white;
text-align: center;
margin-top: 2em;
align-items: flex-start;
}

.distribution {
padding:10px;
display:flex;
flex-direction: column;
width: fit-content;
margin-right: 1em;
height:fit-content;
align-items: center;
background-color: gainsboro;
}

.distribution * {
align-items: center;
width: fit-content;
padding-top: 0;
}

.header {
width: 100%;
display: block;
margin: -10px -10px 0 -10px; /* offset container's padding */
padding: 5px 0;
font-size:120%;
}

.component {
margin-top: 1em;
width: 90%;
outline:none;
}

#diagram div {
outline: 1px solid #c8c8c8;
Comment on lines +57 to +61
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.component { outline: none; } is effectively overridden by #diagram div { outline: ... } due to selector specificity, so the outline:none doesn’t take effect. Either remove the redundant outline:none or narrow #diagram div so it only targets the elements you intend to outline (e.g., components vs. container/header divs).

Copilot uses AI. Check for mistakes.
padding:10px;
}

.user {
background-color: #666666;
}

.vs {
background-color: var(--vs-color);
}

.sdk {
background-color: var(--sdk-color);
}

.dual {
background: linear-gradient(90deg, var(--vs-color), var(--sdk-color));
}

#sdkbuild:checked ~ #diagram .sdkbuild {
outline-color: var(--highlight-color) !important;
outline-width: 0.7ex !important;
outline-style: solid !important;
}

#vsbuild:checked ~ #diagram .vsbuild {
outline-color: var(--highlight-color) !important;
outline-width: 0.7ex !important;
outline-style: solid !important;
}

#vsbuild10:checked ~ #diagram .vsbuild10:not(.notvsbuild10) {
outline-color: var(--highlight-color) !important;
outline-width: 0.7ex !important;
outline-style: solid !important;
}

#designtime:checked ~ #diagram .designtime {
outline-color: var(--highlight-color) !important;
outline-width: 0.7ex !important;
outline-style: solid !important;
}

.distribution.legend {
margin-top: auto;
font-size: 70%;
}
</style>
</head>

<body>
<h1>MSBuild/.NET SDK/Visual Studio Interactions</h1>
<input type="radio" name="buildOption" id="none" value="none" checked>
<label for="none"><i>No highlight</i></label>
<br>
<input type="radio" name="buildOption" id="sdkbuild" value="sdkbuild">
<label for="sdkbuild">Build with <tt>dotnet build</tt></label>
<br>
<input type="radio" name="buildOption" id="designtime" value="designtime">
<label for="designtime">VS project load/Design-time build</label>
<br>
<input type="radio" name="buildOption" id="vsbuild" value="vsbuild">
<label for="vsbuild">Build with <tt>MSBuild.exe</tt> or VS F5</label>
<br>
<input type="radio" name="buildOption" id="vsbuild10" value="vsbuild10">
<label for="vsbuild10">Build with <tt>MSBuild.exe</tt> or VS F5 (.NET 10+)</label><br>
Comment on lines +118 to +127
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doc uses <tt> for inline code/filenames, but <tt> is obsolete in HTML5 and has inconsistent styling across browsers. Prefer <code> (optionally styled via CSS) for dotnet build, MSBuild.exe, filenames, etc.

Suggested change
<label for="sdkbuild">Build with <tt>dotnet build</tt></label>
<br>
<input type="radio" name="buildOption" id="designtime" value="designtime">
<label for="designtime">VS project load/Design-time build</label>
<br>
<input type="radio" name="buildOption" id="vsbuild" value="vsbuild">
<label for="vsbuild">Build with <tt>MSBuild.exe</tt> or VS F5</label>
<br>
<input type="radio" name="buildOption" id="vsbuild10" value="vsbuild10">
<label for="vsbuild10">Build with <tt>MSBuild.exe</tt> or VS F5 (.NET 10+)</label><br>
<label for="sdkbuild">Build with <code>dotnet build</code></label>
<br>
<input type="radio" name="buildOption" id="designtime" value="designtime">
<label for="designtime">VS project load/Design-time build</label>
<br>
<input type="radio" name="buildOption" id="vsbuild" value="vsbuild">
<label for="vsbuild">Build with <code>MSBuild.exe</code> or VS F5</label>
<br>
<input type="radio" name="buildOption" id="vsbuild10" value="vsbuild10">
<label for="vsbuild10">Build with <code>MSBuild.exe</code> or VS F5 (.NET 10+)</label><br>

Copilot uses AI. Check for mistakes.
Comment on lines +123 to +127
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doc uses <tt> for inline code, which is obsolete in HTML5. Consider switching these to <code> for better semantics and accessibility.

Copilot uses AI. Check for mistakes.
Comment thread
JanProvaznik marked this conversation as resolved.

<div id="diagram" class="holder">
<div class="distribution">
<div class="header vs">Visual Studio</div>
Comment on lines +129 to +131
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GitHub doesn’t render repository .html files as pages in the normal file view, so this diagram won’t be directly viewable without using “Raw”/downloading. Consider adding a short instruction near the top (how to view), and/or adding a rendered PNG/SVG + a .md wrapper so the diagram is visible in GitHub’s documentation flow (similar to other diagrams in documentation/*.md).

Copilot uses AI. Check for mistakes.

<div class="component dual vsbuild vsbuild10 designtime">MSBuild DLLs</div>
<div class="component dual vsbuild vsbuild10 designtime">MSBuild Common.targets</div>
<div class="component dual vsbuild vsbuild10 notvsbuild10">Roslyn Compilers</div>
<div class="component dual vsbuild vsbuild10 designtime">Common Analyzers</div>
<div class="component vs designtime">Project System(s)</div>
<div class="component vs designtime">Design-Time Targets</div>
<div class="component vs designtime">Roslyn IDE Components</div>
<div class="component sdk vsbuild vsbuild10 designtime">SDK Resolver</div>
</div>
<div class="distribution">
<div class="header sdk">.NET SDK</div>

<div class="component dual sdkbuild">MSBuild DLLs</div>
<div class="component dual sdkbuild">MSBuild Common.targets</div>
<div class="component dual sdkbuild vsbuild10">Roslyn Compilers</div>
<div class="component dual sdkbuild">Common Analyzers</div>
<div class="component sdk sdkbuild"><tt>dotnet</tt> CLI</div>
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<tt> is obsolete in HTML5. Prefer <code> for inline code like dotnet (and style it via CSS if you want a monospaced look).

Copilot uses AI. Check for mistakes.
<div class="component sdk sdkbuild vsbuild vsbuild10 designtime">SDK Build Logic</div>
<div class="component sdk sdkbuild">SDK Tasks (.NET)</div>
<div class="component sdk vsbuild vsbuild10 designtime">SDK Tasks (net472)</div>
<div class="component sdk sdkbuild vsbuild vsbuild10 designtime">SDK Analyzers</div>
</div>
<div class="distribution">
<div class="header user">User Repo</div>
<div class="component user sdkbuild vsbuild vsbuild10 designtime"><tt>global.json</tt></div>
<div class="component user sdkbuild vsbuild vsbuild10 designtime"><tt>Directory.Build.props</tt></div>
<div class="component user sdkbuild vsbuild vsbuild10 designtime"><tt>Foo.csproj</tt></div>
Comment on lines +157 to +159
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<tt> is obsolete in HTML5; these filenames would be better marked up with <code> for correct semantics and more consistent rendering.

Copilot uses AI. Check for mistakes.
</div>
<div class="distribution legend">
<div class="header" style="background-color: white; color: black">Legend</div>

<div class="component user">User Code</div>
<div class="component vs">VS-built Component</div>
<div class="component sdk">SDK Component</div>
<div class="component dual">Dual-Inserted Component</div>
</div>
</div>

</body>

</html>