Add Mermaid + basic architecture diagram

gatsby-config.js

@@ -47,6 +47,9 @@ const getPlugins = () => {
               linkImagesToOriginal: false,
             },
           },
+          {
+            resolve: "gatsby-remark-mermaid",
+          },
           {
             resolve: require.resolve("./plugins/gatsby-plugin-code-tabs"),
           },

package.json

@@ -26,12 +26,14 @@
     "gatsby-remark-check-links": "^2.1.0",
     "gatsby-remark-copy-linked-files": "^2.3.2",
     "gatsby-remark-images": "^3.3.1",
+    "gatsby-remark-mermaid": "^2.0.0",
     "gatsby-remark-prismjs": "^3.5.1",
     "gatsby-source-filesystem": "^2.3.1",
     "gatsby-transformer-remark": "^2.8.7",
     "node-sass": "^4.14.1",
     "prismjs": "^1.20.0",
     "prop-types": "^15.7.2",
+    "puppeteer": "^5.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
@@ -62,7 +64,7 @@
     "react-test-renderer": "^16.13.1"
   },
   "volta": {
-    "node": "10.16.3",
+    "node": "10.18.1",
     "yarn": "1.16.0"
   }
 }

src/docs/architecture.mdx

@@ -2,4 +2,32 @@
 title: Architecture
 ---
 
+## Service Diagram
+
+```mermaid
+graph TD
+app[Your Application] --> |SDK| lb{{Load Balancer}}
+lb --> relay
+lb --> sentry_web["Sentry (web)"]
+relay --> kafka
+relay --> redis
+sentry_web --> symbolicator
+sentry_web --> snuba
+sentry_web --> memcached
+sentry_web --> postgres
+snuba --> kafka
+snuba --> redis
+snuba --> clickhouse
+kafka --> zookeeper
+sentry_web --> sentry_worker["Sentry (worker)"]
+sentry_worker --> memcached
+sentry_worker --> redis
+sentry_worker --> postgres
+
+click snuba "https://github.com/getsentry/snuba" "Snuba Documentation"
+click relay "https://github.com/getsentry/relay" "Relay Documentation"
+```
+
+## Additional Resources
+
 - [Event Ingestion Pipeline](https://getsentry.github.io/event-ingestion-graph/)