feat: Convert mermaid code blocks to SVGs client side (#11690)

* feat: convert mermaid code blocks to svgs client side

* use client component

* escape text content before interpreting as HTML

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* [getsentry/action-github-commit] Auto commit

* port the rest of mermaid diagrams to docs

* fix type

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

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).
 

develop-docs/application/control-silo.mdx

@@ -42,8 +42,26 @@ When a request is handled by the API Gateway, the response delivered to the clie
 
 Integrations can be shared by multiple organizations. For example, a single MS teams workspace can be connected to multiple organizations, and those organizations can live in multiple regions. A few of our integrations leverage refresh tokens and use short lived access tokens. To avoid racy updates when tokens become invalidated and need to be refreshed, we send outbound requests to control silo, which acts as a proxy for the integration service. By funnelling all outbound traffic for integrations that require refresh tokens through control silo we can more easily co-ordinate token replacements.
 
-![credential-proxy-flowchart](https://mermaid.ink/svg/pako:eNqdk01uwjAQha8y9RoukAWbdsumdOnNKH4Bq_GY2hNBhbh7DUnURJFA7c4ave_Nry-mjg6mMhlfHaTGm-d94mDFCtcaE71j76PsfBvHyGsUTbGdhrb5AxzyjfrV03qzmeAVZYgjn3MH4hZJF-KJMy3lpJFC1j7RVLpE28gFFUXpRUsGClB2rPwMZDfn6gQHUc9tvqVPtyllXboMAxirlqi-8XXvMUB08nqYGloZqfWyEI2fEML56Avw8ihhQpOQDz3x0LPIjlEyng2hO5ZRgXLZLNzo-5eO750KTv-vaX46M51ZmYAU2LtythcrRNboAQHWVOXp0HDXqjVWrkXKncbdt9Sm0tRhZfrehis3VVP2UKJwvjS77b_C_UdcfwDQFR3U)
-[diagram source](https://mermaid.live/edit#pako:eNqdk01uwjAQha8y9RoukAWbdsumdOnNKH4Bq_GY2hNBhbh7DUnURJFA7c4ave_Nry-mjg6mMhlfHaTGm-d94mDFCtcaE71j76PsfBvHyGsUTbGdhrb5AxzyjfrV03qzmeAVZYgjn3MH4hZJF-KJMy3lpJFC1j7RVLpE28gFFUXpRUsGClB2rPwMZDfn6gQHUc9tvqVPtyllXboMAxirlqi-8XXvMUB08nqYGloZqfWyEI2fEML56Avw8ihhQpOQDz3x0LPIjlEyng2hO5ZRgXLZLNzo-5eO750KTv-vaX46M51ZmYAU2LtythcrRNboAQHWVOXp0HDXqjVWrkXKncbdt9Sm0tRhZfrehis3VVP2UKJwvjS77b_C_UdcfwDQFR3U)
+```mermaid
+sequenceDiagram
+
+actor RegionSilo
+actor ControlSilo
+actor MsTeams
+
+RegionSilo ->> RegionSilo: send issue alert
+RegionSilo ->> ControlSilo : send issue alert to msteams
+ControlSilo ->> ControlSilo : load integration metadata
+ControlSilo ->> ControlSilo : add integration credentials to request
+ControlSilo ->> MsTeams : send notification request with credentials
+MsTeams -->> ControlSilo : token expired!
+ControlSilo ->> MsTeams : refresh token
+MsTeams -->> ControlSilo : response
+ControlSilo ->> ControlSilo : update stored token
+ControlSilo ->> MsTeams : send notification with new token
+MsTeams -->> ControlSilo : response
+ControlSilo -->> RegionSilo : response
+```
 
 The integration proxy is implemented as a class that integrations requiring refresh tokens can sub-class. Currently the following integrations use the integration credential proxy:
 
@@ -121,17 +139,40 @@ where id in (...) and schedule_for < current_timestamp
 
 For each mailbox with undelivered messages, we select a block of messages, and update their next schedule time to be a few minutes in the future. Doing this helps reduce the next scheduling task from attempting to deliver the same messages again.
 
-![mailbox-delivery-flowchart](https://mermaid.ink/svg/pako:eNqNUTtyAzEIvQpD7VxgCzdJm2pbNXjF2owl2EjIn_H47lFiJ5OkcTrgfWB4F5wsMg5Y-a2xTvwitC2UgwZdqLhMspA6PJt6sQSjJPvAfvbwtF7_IsAAs2iETJI2duIKR_EdZK6Vtlz_o07OBaz5X4-5eSsMkZMcuJwfW7UlkjMon_xbBS6ZYbYCvrtDm2TT_rHbuNBRwanuwQ1iIVGgrxuD4gozl97G_tFLUICAfUXmgEMvI8_UkgcMeu1Uam7jWSccvDRe4e3UewA4zJRqn3IUt_J6S-kzrOs7BGObcw)
-[diagram source](https://mermaid.live/edit#pako:eNqNUTtyAzEIvQpD7VxgCzdJm2pbNXjF2owl2EjIn_H47lFiJ5OkcTrgfWB4F5wsMg5Y-a2xTvwitC2UgwZdqLhMspA6PJt6sQSjJPvAfvbwtF7_IsAAs2iETJI2duIKR_EdZK6Vtlz_o07OBaz5X4-5eSsMkZMcuJwfW7UlkjMon_xbBS6ZYbYCvrtDm2TT_rHbuNBRwanuwQ1iIVGgrxuD4gozl97G_tFLUICAfUXmgEMvI8_UkgcMeu1Uam7jWSccvDRe4e3UewA4zJRqn3IUt_J6S-kzrOs7BGObcw)
+```mermaid
+sequenceDiagram
+
+participant Control Silo
+
+Control Silo ->> Control Silo : find mailboxes with messages
+Control Silo ->> Control Silo : filter out mailboxes with future delivery
+Control Silo ->> Control Silo : update next delivery time for the next block
+Control Silo ->> Control Silo : Spawn task to drain a mailbox
+```
 
 ### Webhook Delivery
 
 Scheduled webhooks are delivered by celery tasks. Delivery tasks attempt to forward requests to the relevant region silo. If delivery succeeds, the payload record is deleted from postgres. If the request fails and  `attempts` is lower than the max attempts (10) the message is left alone, if the `attempts` is equal or higher than the max attempts, an log message is emitted and the webhook is discarded.
 
 Draining a mailbox involves sending as many messages from a given mailbox as we can. Should we hit a networking error, the current head of line will be rescheduled and have its attempt number increased.
 
-![delivery flow chart](https://mermaid.ink/svg/pako:eNqNUrFuAjEM_RUrM1SoapcbWIq6dYE1i0l8XETOviYOokL8e8NBK5CQYIkS-eW9Z_sdjBNPpjGZvguxo0XATcLe8oBJgwsDssKHsCaJsApRbitL2gThS8HyNRCm8_nNT2jgk9R10BF6WEdxW5AWegxxLXvLUWSAVhJhxfSUM27IMsAj0tBCJ7KFkAHXsqPKuAdUpX7QDJ4iKb3cJbpyX3kWFMOO0khWm1GMCrk4V52cnnADn94x8jqbTd9m-zP4keuzr38xipmAUpL0nNb7SQfgiemwS9RT3dVlJIDsIVF2HfkSaRRnb3k8LJuJ6SnVpfiaisNJwxrtKoM1Tb16arFEtcbysUKxqKx-2JlGU6GJKYNH_QuRaVqsbU0M-aCSvs5JGwN3_AUkRNw7)
-
-[diagram source](https://mermaid.live/edit#pako:eNqNUrFuAjEM_RUrM1SoapcbWIq6dYE1i0l8XETOviYOokL8e8NBK5CQYIkS-eW9Z_sdjBNPpjGZvguxo0XATcLe8oBJgwsDssKHsCaJsApRbitL2gThS8HyNRCm8_nNT2jgk9R10BF6WEdxW5AWegxxLXvLUWSAVhJhxfSUM27IMsAj0tBCJ7KFkAHXsqPKuAdUpX7QDJ4iKb3cJbpyX3kWFMOO0khWm1GMCrk4V52cnnADn94x8jqbTd9m-zP4keuzr38xipmAUpL0nNb7SQfgiemwS9RT3dVlJIDsIVF2HfkSaRRnb3k8LJuJ6SnVpfiaisNJwxrtKoM1Tb16arFEtcbysUKxqKx-2JlGU6GJKYNH_QuRaVqsbU0M-aCSvs5JGwN3_AUkRNw7)
+```mermaid
+sequenceDiagram
+participant Control Silo
+participant Region Silo
+
+Control Silo ->> Control Silo : Fetch head block of mailbox
+loop foreach message
+  Control Silo ->> Control Silo : if hook is above max attempts delete.
+  Control Silo ->> Region Silo : Deliver hook
+	alt success
+	  Region Silo -->> Control Silo : 200-40x
+	  Control Silo ->> Control Silo : delete hook
+	else error
+	  Region Silo -->> Control Silo : 50x
+    Control Silo ->> Control Silo : increment attempt and reschedule
+	end
+end
+```
 
 Notably, most 40x errors are considered 'successful' deliveries. The reason for this is that re-attempting a delivery of a webhook that initially had a 40x response will generally not result in a 200.

develop-docs/application/dynamic-sampling/outcomes.mdx

@@ -13,11 +13,26 @@ These charts illustrate the flow of data categories for transactions:
 
 For a sampled transaction:
 
-![](https://mermaid.ink/img/pako:eNp1UT1vgzAQ_SvWzYAgJoA9ZGJru4StdVWdwCGWwI4c04Yi_nsNDI2U1l589z58TzdBbRoJHE6d-arPaB15PgpN_KnKJxKGzqK-Yu2U0WF4IEfZ4bjh6_ORUVZv5aixVzWpsL90Srfv_wo-lG7kTTabcKOV1YNp5YyVf6N3DncsoZcLAfTS9qgaH3BaEPGbUwAnk2_Ug_2USyHAzyrRCiCz0LMX4-BMNeoauLODDGC4NOhkqbC12AM_YXf13Qtq4BPcgCcJi2gRs13BaLYvkl0RwAg8zVjEWBonOaVZwWI6B_BtjHeIo32esyyOk5SmdJcleQCyUT7Hy7aVdTkBWDO05_sPX1f5MtX8Azhkjhw)
+```mermaid
+flowchart LR
+    SDK --transaction--> Relay
+    Relay --transaction--> DS[Dynamic Sampling]
+    Relay --transaction_indexed--> DS
+    DS --transaction-->Store
+    DS --transaction_indexed-->Store
+```
 
 For a transaction filtered by dynamic sampling:
 
-![](https://mermaid.ink/img/pako:eNp1UcFSgzAQ_ZXMeoVOaCiQHDxxUy_lpnGcDGzbKCSdNGiR4d8N5WBnqskl-_a9t9ndEWrbIAjYtfarPijnyeNWGhJOVT6QOPZOmZOqvbYmju_JFls1LPnL85ZRVi_lYFSna1Kp7thqs3_9V_CmTYNnbBbhQiurG9PKW4d_Z68ctviOtV9oJz-0SBYkBM5-oLjbUSrNfCGCDl2ndBM6H2eF_B2ABEHGANS9-8Q5kBCaQOUkkEmaKYhV7201mBqEdz1G0B8b5bHUau9UB2Kn2lNAj8qAGOEMIkn4ihWUrwvOsk2RrIsIBhBpxlecpzTJGcsKTtkUwbe1wYGuNnnOM0qTlKVsnSV5BNjoMIanZV2XrUXgbL8_XBd8vsjnX00_t7aW9Q)
+```mermaid
+flowchart LR
+    SDK --transaction--> Relay
+    Relay --transaction--> DS[Dynamic Sampling]
+    Relay --transaction_indexed--> DS
+    DS --transaction-->Store
+    DS --transaction_indexed-->Reject
+    style Reject stroke:#f00
+```
 
 ## Data Types
 

develop-docs/application/feedback-architecture.mdx

@@ -74,8 +74,15 @@ event[”contexts”][”feedback”] = {
 
 ### Ingest diagram
 
-![](https://mermaid.ink/svg/pako:eNptkc1qwzAQhF9F7MmGmN59KJSmx_ZQ91IsYxR5YwvbkqqfgEny7l05NW0hOg3a0erb2TNI0yGU0DthB_ax55rREdbWnyY69mTtpKQIyuiGFcUju3BAfcLJWORwYe84iYVrHlaxOo6tNNrHGV1WK92jD8URsTsIORZ4Qh18k6cXv76t8VfEiJ4JzyRO6BYWhB_TL9KhCNhubVrlfcTU425hbWf-UHD44TBSRudQS_QcbhTmP4WmNHwwDuvsbZN5c8dIuC9pmCoQwpwgvY4HUWccqiQenim3cTDRU055Azugl7NQHWV9TiFzCAPOVCxJTqofAgeur2QUMZhq0RLK4CLuINqOhtwrQTuat0vsFLG93pa37vD6DRJvo7g)
-[diagram source](https://mermaid.live/edit#pako:eNptkc1qwzAQhF9F7MmGmN59KJSmx_ZQ91IsYxR5YwvbkqqfgEny7l05NW0hOg3a0erb2TNI0yGU0DthB_ax55rREdbWnyY69mTtpKQIyuiGFcUju3BAfcLJWORwYe84iYVrHlaxOo6tNNrHGV1WK92jD8URsTsIORZ4Qh18k6cXv76t8VfEiJ4JzyRO6BYWhB_TL9KhCNhubVrlfcTU425hbWf-UHD44TBSRudQS_QcbhTmP4WmNHwwDuvsbZN5c8dIuC9pmCoQwpwgvY4HUWccqiQenim3cTDRU055Azugl7NQHWV9TiFzCAPOVCxJTqofAgeur2QUMZhq0RLK4CLuINqOhtwrQTuat0vsFLG93pa37vD6DRJvo7g)
+```mermaid
+graph TD
+    app[Your Application] --> |"envelope"| Relay
+	Relay --> f_consumer([ingest-feedback-events])
+	f_consumer --> |"queues as celery task"| create_feedback_issue
+	create_feedback_issue --> o_consumer(["ingest-occurrences"])
+	o_consumer --> nodestore[(Nodestore)]
+	o_consumer --> |"EventStream"| snuba[("Snuba/Clickhouse")]
+```
 
 In Relay v24.5.1, we migrated feedback to its own kafka topic + consumer,
 `ingest-feedback-events`. This decouples risk and ownership from errors
@@ -114,8 +121,39 @@ user_report = {
 
 ### Ingest diagram
 
-![](https://mermaid.ink/svg/pako:eNp9VNtq3DAQ_ZVBEHAgy77vQ6EkDfShF7KhUKzFaOXZtYgtqbpsCUn-vaOxvWmT3frF4-HozJkzIz8J7VoUK7EPyndwfyOtTDFvx8812hQeS0qmgN6F1KBtvTM21VIsc8Sw2CG2W6UfpNiMQB1U7JoJPrhW9YS9Lkm44yT8MPh7ghMdvf6uuctWJ-NsrG_nCBYQsgVjIeAOQ8AwlYrqgE1RMVYrSaAndmZokmuO0iZdqBIek42JMeNJHlgsPsCzFJ9vAQ9kAfjgNMaIrRTPZ9jfZpnjbMlj2xcXgPaAvfMI3njsjWWA8r7-6XKAj973Rqviw2bWNZ8oau6wVzwhDhihSIc3uqqN3WNMC5WS0t1AjcTNJZOPAAa_t3BWNc4ZlG2BRwojIk7yZjHfv63vi5A3-3GG_NTJ9wvzX2VsYgTfq7RzYSjZkz4ziWs0LVAeMFS0hZMhTutMrJZmSmvIlrzi-JilSxGTC1hXX-fwcnMCSG18KiuypvuhBl4Pm7eqrtbltbym2T10jrrg02MDpafJLm4yLrNvST87e2oVvYtpHzDWFZk2xVKMerjcLOVXxmDIG95aFs2K_qUUV4LUD8q0dO2fpAWQInU4EHZFYW_2XZJC2hcCqpzc-tFqsUoh45UYhd4YRXd1EKud6iNlsTVU68v4I-H_ycsfwTWaqg)
-[diagram source](https://mermaid.live/edit#pako:eNp9VNtq3DAQ_ZVBEHAgy77vQ6EkDfShF7KhUKzFaOXZtYgtqbpsCUn-vaOxvWmT3frF4-HozJkzIz8J7VoUK7EPyndwfyOtTDFvx8812hQeS0qmgN6F1KBtvTM21VIsc8Sw2CG2W6UfpNiMQB1U7JoJPrhW9YS9Lkm44yT8MPh7ghMdvf6uuctWJ-NsrG_nCBYQsgVjIeAOQ8AwlYrqgE1RMVYrSaAndmZokmuO0iZdqBIek42JMeNJHlgsPsCzFJ9vAQ9kAfjgNMaIrRTPZ9jfZpnjbMlj2xcXgPaAvfMI3njsjWWA8r7-6XKAj973Rqviw2bWNZ8oau6wVzwhDhihSIc3uqqN3WNMC5WS0t1AjcTNJZOPAAa_t3BWNc4ZlG2BRwojIk7yZjHfv63vi5A3-3GG_NTJ9wvzX2VsYgTfq7RzYSjZkz4ziWs0LVAeMFS0hZMhTutMrJZmSmvIlrzi-JilSxGTC1hXX-fwcnMCSG18KiuypvuhBl4Pm7eqrtbltbym2T10jrrg02MDpafJLm4yLrNvST87e2oVvYtpHzDWFZk2xVKMerjcLOVXxmDIG95aFs2K_qUUV4LUD8q0dO2fpAWQInU4EHZFYW_2XZJC2hcCqpzc-tFqsUoh45UYhd4YRXd1EKud6iNlsTVU68v4I-H_ycsfwTWaqg)
+```mermaid
+graph TD
+	subgraph Sentry
+		report_endpoint["/user-feedback"]
+		crash_report_modal["Crash Report View"]
+	end
+
+	subgraph functions[Functions - run in referrer]
+		save_userreport
+	    shim_to_feedback
+		create_feedback_issue
+		save_userreport --> |"IF event processed"| shim_to_feedback
+		shim_to_feedback --> create_feedback_issue
+	end
+
+	%% envelope pipeline
+	app[Your Application] --> |"envelope"| Relay
+	Relay --> a_topic([ingest-attachments])
+	a_topic --> save_userreport
+
+	%% endpoint and crash reports
+	app --> |"POST"| report_endpoint --> save_userreport
+	app --> |"POST"| crash_report_modal --> save_userreport
+
+	%% issues platform
+	create_feedback_issue --> o_consumer(["ingest-occurrences"])
+	o_consumer --> nodestore[(Nodestore)]
+	o_consumer --> |"EventStream"| snuba[(Snuba/Clickhouse)]
+
+	%% user report saves/updates
+	save_userreport --> postgres[("Postgres")]
+	snuba --> |"queries eventstore"| save_userreport
+```
 
 <br />
 
@@ -134,8 +172,14 @@ added a post process job to the errors pipeline: [`link_event_to_user_report()`]
 This is the 5th, automated way of creating feedback.
 
 Simplified diagram:
-![](https://mermaid.ink/svg/pako:eNpdULtuwzAM_BWBUwIkzm4UXZq1QIF0MwNDlllLTfSoKAUokvx7ZasZWi06kMfj8a6g_EjQwhRl0OJ9j06Ux9rYPvn-g2gcpDqJ7fZZ3BCapkG4CXZ5kN3qMH-7l7NRJ-0z0_qIDtPSfAx8ZYqGWNCFXOLkI83zIfSffqirKu4QKEYfWQTPSYToFTGLmQVH8fRXbZfDKBPxIlXoUyTuVghvvxihOqnSi5X_B9XdsAFL0UozlgSucw0habLFZFvg2Uw6IaC7F6LMyR--nYI2xUwbqB72Rpbk7KNIoyk3vtZIl2TvP_9DeX4)
-[diagram source](https://mermaid.live/edit#pako:eNpdULtuwzAM_BWBUwIkzm4UXZq1QIF0MwNDlllLTfSoKAUokvx7ZasZWi06kMfj8a6g_EjQwhRl0OJ9j06Ux9rYPvn-g2gcpDqJ7fZZ3BCapkG4CXZ5kN3qMH-7l7NRJ-0z0_qIDtPSfAx8ZYqGWNCFXOLkI83zIfSffqirKu4QKEYfWQTPSYToFTGLmQVH8fRXbZfDKBPxIlXoUyTuVghvvxihOqnSi5X_B9XdsAFL0UozlgSucw0habLFZFvg2Uw6IaC7F6LMyR--nYI2xUwbqB72Rpbk7KNIoyk3vtZIl2TvP_9DeX4)
+
+```mermaid
+graph TD
+    shim_to_feedback --> |"..."| snuba[(Snuba/Clickhouse)]
+	snuba --> |"queries eventstore"| pp_job
+    pp_job["errors post process job"] <--> |"queries/updates"| postgres[("Postgres")]
+	pp_job --> shim_to_feedback
+```
 
 <br />
 
@@ -179,8 +223,24 @@ Crash reports are also shimmed to feedback. The pipeline is the same as the
 
 ## Sentry UI
 
-![](https://mermaid.ink/svg/pako:eNp9Uj1vwjAQ_SvWTUECsWdgKaViqFQVmDhUmeRILBI7tc8DAv577YRAG6F68fn53b37OkNmcoIUCiubUqznqEU4zu87YMXGyoJcB8fTGMeFJbdNED5utkg2juwnNcayGyGMdg--034vt8kqXtOXSmXH0nhHPYV03hmokR-ypNmeIoSsnPPkvgKxMUrzFmHaQQi7pwwxmczEBeHtdY1wEV4FlwVRvpfZUWyWIpkebq_RPYRtc_8jEpK0k57ZEvuSBuSB3u23lV3GzMScWKrKRe2ZiJ0Si2dh_y_jHvZX3zqzn0jv8O3JqtieyzDTtsdxEE-oA3UYQ022lioPy3GOQghcUk0IaTArVZSMgPoaiNKzWZ10BilbT2PwTS6Z5kqGYdaQHmTlAkq5Csv03q1bu3XXH4El2dU)
-[diagram source](https://mermaid.live/edit#pako:eNp9Uj1vwjAQ_SvWTUECsWdgKaViqFQVmDhUmeRILBI7tc8DAv577YRAG6F68fn53b37OkNmcoIUCiubUqznqEU4zu87YMXGyoJcB8fTGMeFJbdNED5utkg2juwnNcayGyGMdg--034vt8kqXtOXSmXH0nhHPYV03hmokR-ypNmeIoSsnPPkvgKxMUrzFmHaQQi7pwwxmczEBeHtdY1wEV4FlwVRvpfZUWyWIpkebq_RPYRtc_8jEpK0k57ZEvuSBuSB3u23lV3GzMScWKrKRe2ZiJ0Si2dh_y_jHvZX3zqzn0jv8O3JqtieyzDTtsdxEE-oA3UYQ022lioPy3GOQghcUk0IaTArVZSMgPoaiNKzWZ10BilbT2PwTS6Z5kqGYdaQHmTlAkq5Csv03q1bu3XXH4El2dU)
+```mermaid
+graph TD
+    subgraph Storages
+        postgres[("Postgres (UserReports)")]
+        snuba[(Snuba/Clickhouse)]
+    end
+
+	subgraph Sentry
+		issues_endpoint["/issues"]
+		issues_endpoint --> |"GET"| ui["Feedback UI (/feedback)"]
+		report_endpoint["/user-feedback"]
+        report_endpoint --> |"GET"| report_ui["Issue Details UI > User Feedback"]
+        issues_endpoint --> |"GET"| report_ui
+    end
+
+    postgres --> |"queries"| report_endpoint
+	snuba --> |"queries"| issues_endpoint
+```
 
 You can view the user reports related to a specific issue at the "User Feedback"
 tab of Issue Details. This excludes "new" feedback (anything sent from the widget).

package.json

@@ -71,6 +71,7 @@
     "js-yaml": "^4.1.0",
     "match-sorter": "^6.3.4",
     "mdx-bundler": "^10.0.1",
+    "mermaid": "^11.4.0",
     "micromark": "^4.0.0",
     "next": "14.2.4",
     "next-mdx-remote": "^4.4.1",