diff --git a/docs/architecture/README.md b/docs/architecture/README.md
new file mode 100644
index 000000000..126358fc8
--- /dev/null
+++ b/docs/architecture/README.md
@@ -0,0 +1,5 @@
+# Table of Contents
+
+## Overview
+
+
diff --git a/docs/architecture/overview.d2 b/docs/architecture/overview.d2
new file mode 100644
index 000000000..e822ef864
--- /dev/null
+++ b/docs/architecture/overview.d2
@@ -0,0 +1,61 @@
+input: |d2
+ # D2 script
+ hello -> world
+|
+
+input -> compiler
+
+compiler: {
+ width: 300
+ height: 100
+ style: {
+ fill: "#7B90D2"
+ font-color: white
+ }
+}
+
+compiler -> graph
+graph: Graph\n(shapes & connections) {
+ shape: oval
+ style.fill: "#A8D8B9"
+}
+
+configs -> graph mods
+
+graph -> graph mods -> layout
+
+
+# Set Dimensions -> Use ruler to measure all texts -> measured graph
+# Set Dimensions -> Use given, premeasured dimensions -> measured graph
+
+# measured graph: {
+# shape: oval
+# style.fill: honeydew
+# }
+#
+# measured graph -> layout engine -> positioned graph
+#
+# positioned graph: {
+# shape: oval
+# style.fill: honeydew
+# }
+#
+# positioned graph -> exporter -> diagram
+#
+# diagram: finalized diagram (styled) {
+# shape: oval
+# style.fill: honeydew
+# }
+#
+# diagram -> render SVG
+#
+# render SVG -> use sketch post processor: optional
+#
+# use sketch post processor -> SVG bytes
+#
+# SVG bytes: {
+# shape: oval
+# style.fill: honeydew
+# }
+#
+# SVG bytes -> screenshot for PNG: optional
diff --git a/docs/architecture/overview.svg b/docs/architecture/overview.svg
new file mode 100644
index 000000000..26d3b6432
--- /dev/null
+++ b/docs/architecture/overview.svg
@@ -0,0 +1,109 @@
+