Skip to content

Commit b01681e

Browse files
rainersigwaldrainersigwald
authored
Diagram of VS/SDK component interactions (#13127)
We used this diagram a bunch during .NET 10 planning. It came up again today and it shouldn't be trapped in my corporate OneDrive.
1 parent 02319a6 commit b01681e

File tree

1 file changed

+173
-0
lines changed

1 file changed

+173
-0
lines changed

‎documentation/Components.html‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Interactive Layer Diagram</title>
8+
<style>
9+
:root {
10+
--highlight-color: black;
11+
--vs-color: chocolate;
12+
--sdk-color: #512bd4;
13+
}
14+
15+
body {
16+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;
17+
}
18+
19+
#diagram {
20+
width: 100%;
21+
display:flex;
22+
flex-direction: row;
23+
color: white;
24+
text-align: center;
25+
margin-top: 2em;
26+
align-items: flex-start;
27+
}
28+
29+
.distribution {
30+
padding:10px;
31+
display:flex;
32+
flex-direction: column;
33+
width: fit-content;
34+
margin-right: 1em;
35+
height:fit-content;
36+
align-items: center;
37+
background-color: gainsboro;
38+
}
39+
40+
.distribution * {
41+
align-items: center;
42+
width: fit-content;
43+
padding-top: 0;
44+
}
45+
46+
.header {
47+
width: 100%;
48+
display: block;
49+
margin: -10px -10px 0 -10px; /* offset container's padding */
50+
padding: 5px 0;
51+
font-size:120%;
52+
}
53+
54+
.component {
55+
margin-top: 1em;
56+
width: 90%;
57+
outline:none;
58+
}
59+
60+
#diagram div {
61+
outline: 1px solid #c8c8c8;
62+
padding:10px;
63+
}
64+
65+
.user {
66+
background-color: #666666;
67+
}
68+
69+
.vs {
70+
background-color: var(--vs-color);
71+
}
72+
73+
.sdk {
74+
background-color: var(--sdk-color);
75+
}
76+
77+
.dual {
78+
background: linear-gradient(90deg, var(--vs-color), var(--sdk-color));
79+
}
80+
81+
#sdkbuild:checked ~ #diagram .sdkbuild {
82+
outline-color: var(--highlight-color) !important;
83+
outline-width: 0.7ex !important;
84+
outline-style: solid !important;
85+
}
86+
87+
#vsbuild:checked ~ #diagram .vsbuild {
88+
outline-color: var(--highlight-color) !important;
89+
outline-width: 0.7ex !important;
90+
outline-style: solid !important;
91+
}
92+
93+
#vsbuild10:checked ~ #diagram .vsbuild10:not(.notvsbuild10) {
94+
outline-color: var(--highlight-color) !important;
95+
outline-width: 0.7ex !important;
96+
outline-style: solid !important;
97+
}
98+
99+
#designtime:checked ~ #diagram .designtime {
100+
outline-color: var(--highlight-color) !important;
101+
outline-width: 0.7ex !important;
102+
outline-style: solid !important;
103+
}
104+
105+
.distribution.legend {
106+
margin-top: auto;
107+
font-size: 70%;
108+
}
109+
</style>
110+
</head>
111+
112+
<body>
113+
<h1>MSBuild/.NET SDK/Visual Studio Interactions</h1>
114+
<input type="radio" name="buildOption" id="none" value="none" checked>
115+
<label for="none"><i>No highlight</i></label>
116+
<br>
117+
<input type="radio" name="buildOption" id="sdkbuild" value="sdkbuild">
118+
<label for="sdkbuild">Build with <tt>dotnet build</tt></label>
119+
<br>
120+
<input type="radio" name="buildOption" id="designtime" value="designtime">
121+
<label for="designtime">VS project load/Design-time build</label>
122+
<br>
123+
<input type="radio" name="buildOption" id="vsbuild" value="vsbuild">
124+
<label for="vsbuild">Build with <tt>MSBuild.exe</tt> or VS F5</label>
125+
<br>
126+
<input type="radio" name="buildOption" id="vsbuild10" value="vsbuild10">
127+
<label for="vsbuild10">Build with <tt>MSBuild.exe</tt> or VS F5 (.NET 10+)</label><br>
128+
129+
<div id="diagram" class="holder">
130+
<div class="distribution">
131+
<div class="header vs">Visual Studio</div>
132+
133+
<div class="component dual vsbuild vsbuild10 designtime">MSBuild DLLs</div>
134+
<div class="component dual vsbuild vsbuild10 designtime">MSBuild Common.targets</div>
135+
<div class="component dual vsbuild vsbuild10 notvsbuild10">Roslyn Compilers</div>
136+
<div class="component dual vsbuild vsbuild10 designtime">Common Analyzers</div>
137+
<div class="component vs designtime">Project System(s)</div>
138+
<div class="component vs designtime">Design-Time Targets</div>
139+
<div class="component vs designtime">Roslyn IDE Components</div>
140+
<div class="component sdk vsbuild vsbuild10 designtime">SDK Resolver</div>
141+
</div>
142+
<div class="distribution">
143+
<div class="header sdk">.NET SDK</div>
144+
145+
<div class="component dual sdkbuild">MSBuild DLLs</div>
146+
<div class="component dual sdkbuild">MSBuild Common.targets</div>
147+
<div class="component dual sdkbuild vsbuild10">Roslyn Compilers</div>
148+
<div class="component dual sdkbuild">Common Analyzers</div>
149+
<div class="component sdk sdkbuild"><tt>dotnet</tt> CLI</div>
150+
<div class="component sdk sdkbuild vsbuild vsbuild10 designtime">SDK Build Logic</div>
151+
<div class="component sdk sdkbuild">SDK Tasks (.NET)</div>
152+
<div class="component sdk vsbuild vsbuild10 designtime">SDK Tasks (net472)</div>
153+
<div class="component sdk sdkbuild vsbuild vsbuild10 designtime">SDK Analyzers</div>
154+
</div>
155+
<div class="distribution">
156+
<div class="header user">User Repo</div>
157+
<div class="component user sdkbuild vsbuild vsbuild10 designtime"><tt>global.json</tt></div>
158+
<div class="component user sdkbuild vsbuild vsbuild10 designtime"><tt>Directory.Build.props</tt></div>
159+
<div class="component user sdkbuild vsbuild vsbuild10 designtime"><tt>Foo.csproj</tt></div>
160+
</div>
161+
<div class="distribution legend">
162+
<div class="header" style="background-color: white; color: black">Legend</div>
163+
164+
<div class="component user">User Code</div>
165+
<div class="component vs">VS-built Component</div>
166+
<div class="component sdk">SDK Component</div>
167+
<div class="component dual">Dual-Inserted Component</div>
168+
</div>
169+
</div>
170+
171+
</body>
172+
173+
</html>

0 commit comments

Comments
 (0)