add pictures for module theory

docs/documentation/zh/modules-reference/diagrams/README

@@ -0,0 +1,11 @@
+Some of this content uses mermaid diagrams. We could render them as part of the website build with gatsby-remark-mermaid, but that requires puppeteer/Chromium, which has historically caused a lot of cross-platform build issues. These diagrams should not change often, so I’m just going to store the source here and generate the SVGs manually.
+
+Example:
+
+```sh
+npm install -g @mermaid-js/mermaid-cli
+cd packages/documentation/copy/en/modules-reference/diagrams
+mmdc -c mermaid.config.json -i esm-cjs-interop.md
+```
+
+declaration-files.svg is a non-Mermaid replacement for theory.md-4.svg. I made it for a talk one time and it’s better than what Mermaid can do with a flowchart.

docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md

@@ -0,0 +1,26 @@
+```mermaid
+graph TB
+  subgraph Transpiled[ESM transpiled to CJS]
+    direction TB
+    C[Importing module] -- designed based on spec --> D[Imported module]
+  end
+  subgraph ESM
+    direction TB
+    A[Importing module] -- specified behavior --> B[Imported module]
+  end
+```
+
+```mermaid
+graph TD
+  subgraph Transpiled[ESM transpiled to CJS]
+    C[Importing module] -- designed based on spec --> D[Imported module]
+  end
+  subgraph CJS[True CJS]
+    E[Imported module]
+  end
+  subgraph ESM
+    A[Importing module] -- specified behavior --> B[Imported module]
+  end
+  A -. unspecified behavior .-> E
+  C .->|"<span style='font-size: 3em'>❓🤷🏻‍♂️❓</span>"| E
+```