feat: convert mermaid code blocks to svgs client side

Author: a-hariti

develop-docs/application/architecture.mdx

@@ -7,9 +7,31 @@ sidebar_order: 1
 
 Edges represent service dependencies.
 
-![](https://mermaid.ink/svg/pako:eNqFU01PwzAM_StRTiDGeu8BCbQbcKFc0DwhN_XWqs2H0kQwtv13smSj1SrgFj8_v9gvzo4LXRHP-caiqdnrAhQas3zT3rJ7Y7pGoGu0WrHb2zu2LxaPe9aVu92Txoo9YIdKkD0cQHVlYgDvSTm7ndMnStPRXGiZoWkygOom6522lAHfM0sdbv8uO9IS-v5B5RJ4EQN2FaJr4CtQ_VaWOraobdQZ6KDiDRFtcd3iGLBUNX0o_2GnYuVLnKCSpEBRUzXJGN27jaWp0Fn-qDduYAAmDBGmaGvtewIV2RH90rolMmSnvZ5CbVuyY2sicHJnzPltliF5YcqQmM455MYvAApUnCM5yYDXzpk-z7JN42pfxlXYkEsqWbKbB1oR6QstvAypuG_Az1rp1f7RStt01HqJ9AstPuOSrMSmCou-A8UC0dUkCXgejhWt0XfueOchUNE7XWyV4LmznmbcmwodLRoMX0TyfI1dH9DgVpj5OX2e-IcO3z0YL2M)
-[diagram source](https://mermaid.live/edit#pako:eNqFU01PwzAM_StRTiDGeu8BCbQbcKFc0DwhN_XWqs2H0kQwtv13smSj1SrgFj8_v9gvzo4LXRHP-caiqdnrAhQas3zT3rJ7Y7pGoGu0WrHb2zu2LxaPe9aVu92Txoo9YIdKkD0cQHVlYgDvSTm7ndMnStPRXGiZoWkygOom6522lAHfM0sdbv8uO9IS-v5B5RJ4EQN2FaJr4CtQ_VaWOraobdQZ6KDiDRFtcd3iGLBUNX0o_2GnYuVLnKCSpEBRUzXJGN27jaWp0Fn-qDduYAAmDBGmaGvtewIV2RH90rolMmSnvZ5CbVuyY2sicHJnzPltliF5YcqQmM455MYvAApUnCM5yYDXzpk-z7JN42pfxlXYkEsqWbKbB1oR6QstvAypuG_Az1rp1f7RStt01HqJ9AstPuOSrMSmCou-A8UC0dUkCXgejhWt0XfueOchUNE7XWyV4LmznmbcmwodLRoMX0TyfI1dH9DgVpj5OX2e-IcO3z0YL2M)
-
+```mermaid
+graph TD
+app[Your Application] --> |SDK| lb{{Load Balancer}}
+lb --> |"sentry.example.com/api/\d+/store/"| relay
+lb --> |"sentry.example.com"| sentry_web["Sentry (web)"]
+symbolicator --> sentry_web
+relay --> kafka
+relay --> redis
+sentry_web --> snuba
+sentry_web --> memcached
+sentry_web --> postgres
+sentry_web --> redis
+snuba --> kafka
+snuba --> redis
+snuba --> clickhouse
+kafka --> zookeeper
+sentry_web --> sentry_worker["Sentry (worker)"]
+sentry_worker --> memcached
+sentry_worker --> redis
+sentry_worker --> postgres
+sentry_worker --> symbolicator
+
+click snuba "https://github.com/getsentry/snuba" "Snuba Documentation"
+click relay "https://github.com/getsentry/relay" "Relay Documentation"
+```
 ## Event pipeline
 
 How an event gets saved. Edges represent data flow through system.
@@ -25,8 +47,29 @@ This graph is extremely simplified mostly due to layout constraints. Missing fro
 
 For more information read [Path of an event through Relay](https://getsentry.github.io/relay/relay_server/index.html#path-of-an-event-through-relay) and [Event Ingestion Pipeline](https://getsentry.github.io/event-ingestion-graph/).
 
-![](https://mermaid.ink/svg/pako:eNp9UsFugzAM_ZUop1Uq4o6mXtbLNO3UXSbSgwluQUCC4qQaovz7QqArbdWdEtvPz_azey51jjzhRwNtwb62QgkFbZt-a2eY_9SlBFtqtWdRtGFnQpUTkwaoQDqzOut7dSzVzzAIVWcTJoa2jFVMVhuMz8xgDZ1Q4QmACg4VpC_v6ohk2cdorfZCBXcAlCESSa3INWhSwXeorOnmALsEBPdpd-BA0BpsjZZIFOHJp45DkcumGSXWaLor6WQzC1RRYGQP-YGU4IQXuieQu6LPiLom00HXBd-D8xnh_21drSmoXAbRLLifeDQnxV8zs3kJQLIGoVkJPi7Br_dGrECQzpmzOgvSRZHltkKZi4Nu0m72JP3AVaEd4djd25-16IWvuUc3UOb-SPuRR3BbYOMxif_meABXW8GFGjwUnNW7TkmeWONwzV2be0G3JfhpGp4coCbvxbz0t_k5HX64_-EXvdQVKA)
-[diagram source](https://mermaid.live/edit#pako:eNp9UsFugzAM_ZUop1Uq4o6mXtbLNO3UXSbSgwluQUCC4qQaovz7QqArbdWdEtvPz_azey51jjzhRwNtwb62QgkFbZt-a2eY_9SlBFtqtWdRtGFnQpUTkwaoQDqzOut7dSzVzzAIVWcTJoa2jFVMVhuMz8xgDZ1Q4QmACg4VpC_v6ohk2cdorfZCBXcAlCESSa3INWhSwXeorOnmALsEBPdpd-BA0BpsjZZIFOHJp45DkcumGSXWaLor6WQzC1RRYGQP-YGU4IQXuieQu6LPiLom00HXBd-D8xnh_21drSmoXAbRLLifeDQnxV8zs3kJQLIGoVkJPi7Br_dGrECQzpmzOgvSRZHltkKZi4Nu0m72JP3AVaEd4djd25-16IWvuUc3UOb-SPuRR3BbYOMxif_meABXW8GFGjwUnNW7TkmeWONwzV2be0G3JfhpGp4coCbvxbz0t_k5HX64_-EXvdQVKA)
+```mermaid
+graph TD
+
+app[Your application] --> |sends crashes| lb{{nginx}}
+lb --> |/api/n/store/| relay
+relay --> kafka[(Ingest Kafka)]
+kafka --> ingest-consumer["Sentry ingest consumer"]
+ingest-consumer --> preprocess-event
+
+subgraph celery["Sentry celery tasks"]
+  preprocess-event --> save-event
+  preprocess-event --> process-event
+  preprocess-event --> symbolicate-event
+  symbolicate-event --> process-event
+  process-event --> save-event
+  save-event --> snuba-kafka[("Snuba Kafka<br>(eventstream)")]
+end
+
+subgraph snuba["Snuba"]
+  snuba-kafka --> snuba-consumer["Snuba consumers"]
+  snuba-consumer --> clickhouse[("Clickhouse")]
+end
+```
 
 ## Multi-Region
 
@@ -71,8 +114,26 @@ In addition to the siloed modes, there also exists a **Monolith** mode. In monol
 
 ### Multi-region architecture
 
-![multi-region architecture](https://mermaid.ink/svg/pako:eNp1UctqwzAQ_JVFpxSSH_ChUOoUeiiEuD5JOajS2hbIktGjJYT8e1dumjotvS2zs_NgT0x5jaxinfUfapAhwWstnHDZ8KfgXUKnoX0-wGZzDzmGsphnFa8j5lAuhIv5rQ9yGgoReNvAHnvj3UE4IEhOpmANuhSO8LC7ik49X9Fi52PqA8a7H_6FgJqvti1s3-kUaplkoVCwhaOKwB8pbvAWGmP9rKGK5RL9Y66K9zdjGeBWnRoCpwSLPpiLOGG_JTEXTVrc9pn5F8J_fdiajRhGaTQ95FSuBEsDjihYRaPGTmabBBPuTFSZk2-OTrEqhYxrlictE9ZGUuaRVZ20kVDUJvnw8vXk-dfnT1dDqnk)
-[diagram source](https://mermaid.live/edit#pako:eNp1UctqwzAQ_JVFpxSSH_ChUOoUeiiEuD5JOajS2hbIktGjJYT8e1dumjotvS2zs_NgT0x5jaxinfUfapAhwWstnHDZ8KfgXUKnoX0-wGZzDzmGsphnFa8j5lAuhIv5rQ9yGgoReNvAHnvj3UE4IEhOpmANuhSO8LC7ik49X9Fi52PqA8a7H_6FgJqvti1s3-kUaplkoVCwhaOKwB8pbvAWGmP9rKGK5RL9Y66K9zdjGeBWnRoCpwSLPpiLOGG_JTEXTVrc9pn5F8J_fdiajRhGaTQ95FSuBEsDjihYRaPGTmabBBPuTFSZk2-OTrEqhYxrlictE9ZGUuaRVZ20kVDUJvnw8vXk-dfnT1dDqnk)
+```mermaid
+flowchart TD
+
+ui[Frontend UI] --> usr
+ui --> cs
+ui --> eur
+
+
+subgraph usr [US Region]
+  usapi[US Sentry API] --> uspg[(US Postgres)]
+  usapi --> used[(EU Event Data)]
+end
+subgraph cs [Control Silo]
+  capi[Control Silo Sentry API] --> cpg[(Control Postgres)]
+end
+subgraph eur [EU Region]
+  euapi[EU Sentry API] --> eupg[(EU Postgres)]
+  euapi --> eued[(EU Event Data)]
+end
+```
 
 Each region silo can be scaled independently, and is isolated from other regions. Within each region exists separate, dedicated infrastructure and applications as outlined in the [application overview](/architecture/#high-level-overview).
 

src/components/docPage/index.tsx

@@ -1,4 +1,5 @@
 import {ReactNode} from 'react';
+import Script from 'next/script';
 
 import {getCurrentGuide, getCurrentPlatform, nodeForPath} from 'sentry-docs/docTree';
 import {serverContext} from 'sentry-docs/serverContext';
@@ -54,6 +55,9 @@ export function DocPage({
 
   const leafNode = nodeForPath(rootNode, unversionedPath);
 
+  // a hack to show syntax highlighting on editors
+  const javascript = String.raw;
+
   return (
     <div className="tw-app">
       <Header pathname={pathname} searchPlatforms={searchPlatforms} />
@@ -108,6 +112,34 @@ export function DocPage({
           )}
         </main>
       </section>
+      {/* can't use useEffect here (server component) */}
+      <Script
+        type="module"
+        id="mermaid-script"
+        dangerouslySetInnerHTML={{
+          __html: javascript`
+              const mermaidBlocks = document.querySelectorAll('.language-mermaid');
+              if (mermaidBlocks.length >= 0) {
+                const {default: mermaid} = await import(
+                  'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'
+                );
+                mermaid.initialize({startOnLoad: false});
+                mermaidBlocks.forEach(block => {
+                  // get rid of code highlighting
+                  const code = block.textContent;
+                  block.innerHTML = code;
+                  // force transparent background
+                  block.style.backgroundColor = 'transparent';
+                  const parentCodeTabs = block.closest('.code-tabs-wrapper')
+                  if(parentCodeTabs) {
+                    parentCodeTabs.innerHTML = block.outerHTML;
+                  }
+                });
+                await mermaid.run({nodes: document.querySelectorAll('.language-mermaid')});
+              }
+          `,
+        }}
+      />
     </div>
   );
 }