diff --git a/docs/documentation/zh/modules-reference/diagrams/README b/docs/documentation/zh/modules-reference/diagrams/README
new file mode 100644
index 0000000..8c3bc26
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/docs/documentation/zh/modules-reference/diagrams/declaration-files.svg b/docs/documentation/zh/modules-reference/diagrams/declaration-files.svg
new file mode 100644
index 0000000..742a679
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/declaration-files.svg
@@ -0,0 +1,17 @@
+
diff --git a/docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md b/docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md
new file mode 100644
index 0000000..e4c00f4
--- /dev/null
+++ b/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 .->|"βπ€·π»ββοΈβ"| E
+```
\ No newline at end of file
diff --git a/docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md-1.svg b/docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md-1.svg
new file mode 100644
index 0000000..de867fe
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md-2.svg b/docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md-2.svg
new file mode 100644
index 0000000..389d5c6
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/esm-cjs-interop.md-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/documentation/zh/modules-reference/diagrams/mermaid.config.json b/docs/documentation/zh/modules-reference/diagrams/mermaid.config.json
new file mode 100644
index 0000000..7bce33f
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/mermaid.config.json
@@ -0,0 +1,6 @@
+{
+ "theme": "default",
+ "themeVariables": {
+ "fontFamily": "Helvetica, Arial, sans-serif"
+ }
+}
\ No newline at end of file
diff --git a/docs/documentation/zh/modules-reference/diagrams/theory.md b/docs/documentation/zh/modules-reference/diagrams/theory.md
new file mode 100644
index 0000000..5f5d17d
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/theory.md
@@ -0,0 +1,46 @@
+```mermaid
+graph LR
+ main.ts -- "#quot;./math#quot;" --> math.ts
+```
+
+```mermaid
+graph LR
+ subgraph Output files
+ main.js
+ style main.js stroke-dasharray: 5 5
+ math.js
+ style math.js stroke-dasharray: 5 5
+ end
+ subgraph Input files
+ main.ts
+ math.ts
+ end
+ main.ts -. Map to output .-> main.js
+ main.js -- "#quot;./math#quot;" --> math.js
+ math.js -. Map to input .-> math.ts
+```
+
+```mermaid
+graph LR
+ subgraph Output files
+ dist/main.mjs
+ style dist/main.mjs stroke-dasharray: 5 5
+ dist/math.mjs
+ style dist/math.mjs stroke-dasharray: 5 5
+ end
+ subgraph Input files
+ src/main.mts
+ src/math.mts
+ end
+ src/main.mts -. Map to output .-> dist/main.mjs
+ dist/main.mjs -- "#quot;./math.mjs#quot;" --> dist/math.mjs
+ dist/math.mjs -. Map to input .-> src/math.mts
+```
+
+```mermaid
+graph TB
+ main.ts --> main.js
+ main.ts --> main.d.ts
+ style main.js stroke-dasharray: 5 5
+ style main.d.ts stroke-dasharray: 15 4
+```
diff --git a/docs/documentation/zh/modules-reference/diagrams/theory.md-1.svg b/docs/documentation/zh/modules-reference/diagrams/theory.md-1.svg
new file mode 100644
index 0000000..807b73a
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/theory.md-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/documentation/zh/modules-reference/diagrams/theory.md-2.svg b/docs/documentation/zh/modules-reference/diagrams/theory.md-2.svg
new file mode 100644
index 0000000..4a13022
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/theory.md-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/documentation/zh/modules-reference/diagrams/theory.md-3.svg b/docs/documentation/zh/modules-reference/diagrams/theory.md-3.svg
new file mode 100644
index 0000000..529ca93
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/theory.md-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/documentation/zh/modules-reference/diagrams/theory.md-4.svg b/docs/documentation/zh/modules-reference/diagrams/theory.md-4.svg
new file mode 100644
index 0000000..a43fe1c
--- /dev/null
+++ b/docs/documentation/zh/modules-reference/diagrams/theory.md-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file