content: Add diagram

This CL adds a rudimentary architecture diagram for `//content`. Note
that the WebKit directories referenced in the older diagram are long
gone ([1], [2]) and so no longer appear in the revised diagram. A modest
effort is made to draw attention to how `//content` fans out pretty
quickly into its components.

[1] https://codereview.chromium.org/1102673007
[2] https://chromium-review.googlesource.com/c/chromium/src/+/1437626

Change-Id: I78402a5609e9c6793a3d14819513d7277381875e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4384793
Reviewed-by: Avi Drissman <avi@chromium.org>
Auto-Submit: Kalvin Lee <kdlee@chromium.org>
Commit-Queue: Avi Drissman <avi@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1128233}

content/README.md

@@ -56,7 +56,9 @@ use). The `content` module itself must remain generic, with no hardcoded
 vendor-specific logic.
 
 ## Architectural Diagram
-TODO: Draw a modern diagram.
+![Chrome browser depends on content, which as a whole depends on Chromium's
+  low-level libraries and on the constituent parts of
+  //content.](./architecture.png)
 
 See an older diagram at: https://www.chromium.org/developers/content-module.
 

content/architecture.dot

@@ -0,0 +1,70 @@
+digraph {
+  graph[bgcolor=transparent]
+  node[shape=plaintext]
+
+  Embedder[label=<
+    <table border="1" cellborder="0">
+      <tr>
+        <td port="left1" width="25"></td>
+        <td port="left2" width="25"></td>
+        <td port="center" width="200">Embedder</td>
+        <td port="right" width="50"></td>
+      </tr>
+    </table>
+  >]
+  Content[label=<
+    <table border="1" cellborder="0">
+      <tr>
+        <td port="left1" width="30"></td>
+        <td port="left2" width="30"></td>
+        <td port="center" width="60">Content</td>
+        <td port="right" width="60"></td>
+      </tr>
+    </table>
+  >]
+  Embedder:center->Content:center[label="Content\nPublic API"]
+
+  Blink[label=<
+    <table border="1" cellborder="0">
+      <tr>
+        <td port="left" width="50"></td>
+        <td width="50">Blink</td>
+        <td port="right" width="50"></td>
+      </tr>
+    </table>
+  >]
+
+  {rank=same net, V8}
+  net[label=<
+    <table border="1" cellborder="0">
+      <tr><td>//net</td></tr>
+    </table>
+  >]
+  V8[label=<
+    <table border="1" cellborder="0">
+      <tr><td>V8</td></tr>
+    </table>
+  >]
+  base[label=<
+    <table border="1" cellborder="0">
+      <tr>
+        <td port="left1" width="25"></td>
+        <td port="left2" width="25"></td>
+        <td port="center" width="200">//base</td>
+        <td port="right" width="50"></td>
+      </tr>
+    </table>
+  >]
+
+  Embedder:left1->base:left1
+  Embedder:right->Blink:right[dir=both, label="Blink\nPublic API"]
+  Embedder:left2->net[dir=both]
+
+  Content->base:center
+  Content:left1->net[dir=both]
+  Content:left2->V8[dir=both]
+  Content:right->Blink:left[dir=both]
+  Blink:left->V8[dir=both]
+  Blink->base:right
+  net->base:left2
+}