diff --git a/documentation/Components.html b/documentation/Components.html
new file mode 100644
index 00000000000..e837194bba6
--- /dev/null
+++ b/documentation/Components.html
@@ -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>
+    <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;
+        }
+
+        #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;
+            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>
+
+    <div id="diagram" class="holder">
+        <div class="distribution">
+            <div class="header vs">Visual Studio</div>
+
+            <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>
+            <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>
+        </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>
\ No newline at end of file
