Cleaning up mermaid code and made it a bit more readable in dark mode (…

…#11726) * Cleaning up mermaid code and made it a bit more readable in dark mode * The half working solution * Added documentation on how to use Mermaid in MDX.
getsentry · Nov 5, 2024 · c0afb0c · c0afb0c
1 parent babc777
commit c0afb0c
Show file tree

Hide file tree

Showing 13 changed files with 214 additions and 171 deletions.
diff --git a/develop-docs/application/architecture.mdx b/develop-docs/application/architecture.mdx
@@ -9,28 +9,28 @@ Edges represent service dependencies.
 
 ```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"
+  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
 
@@ -49,26 +49,25 @@ For more information read [Path of an event through Relay](https://getsentry.git
 
 ```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
+  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
@@ -116,23 +115,23 @@ In addition to the siloed modes, there also exists a **Monolith** mode. In monol
 
 ```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
+  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).

diff --git a/develop-docs/application/control-silo.mdx b/develop-docs/application/control-silo.mdx
@@ -44,23 +44,22 @@ Integrations can be shared by multiple organizations. For example, a single MS t
 
 ```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
+  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:
@@ -141,13 +140,12 @@ For each mailbox with undelivered messages, we select a block of messages, and u
 
 ```mermaid
 sequenceDiagram
+  participant Control Silo
 
-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
+  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
@@ -158,21 +156,21 @@ Draining a mailbox involves sending as many messages from a given mailbox as we
 
 ```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
+  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.
diff --git a/develop-docs/application/cross-region-replication.mdx b/develop-docs/application/cross-region-replication.mdx
@@ -41,8 +41,21 @@ User, Organization, and Membership deletions are the most common form of cross r
 
 The flow for removing a user is
 
-![tombstone workflow diagram](https://mermaid.ink/svg/pako:eNplkTFrwzAQhf-K0BYcD203Q7O0ayHEdNMiSxdHIN2l0qk0hPz3ntMUYme703vf49A7a0cedKcLfFVAB-_Bjtkmg7YyYU0DZIOyOaasPsu0HW3m4MLRIqs3Qs4UVR8izZUdjIHwJhicUNVuNs0MUZ3yEIFB1UkP_vXp-cXgzCLQktlBou8b06hiZabKA_2oBKXYEZYRktFerxd4OD3Kq-b-XjFt6xBDOTzE3ruuoXOsn05hSkORz1va29XCvQNH6EKcIXqtE-Rkg5dWzgaVMpoPkMDoTkYPe1sjG23wItappf6ETnecK6x1PXrL_yXqbm9jkVfwQer7-Gv6WvjlF-fzsOs)
-[diagram source](https://mermaid.live/edit#pako:eNplkTFrwzAQhf-K0BYcD203Q7O0ayHEdNMiSxdHIN2l0qk0hPz3ntMUYme703vf49A7a0cedKcLfFVAB-_Bjtkmg7YyYU0DZIOyOaasPsu0HW3m4MLRIqs3Qs4UVR8izZUdjIHwJhicUNVuNs0MUZ3yEIFB1UkP_vXp-cXgzCLQktlBou8b06hiZabKA_2oBKXYEZYRktFerxd4OD3Kq-b-XjFt6xBDOTzE3ruuoXOsn05hSkORz1va29XCvQNH6EKcIXqtE-Rkg5dWzgaVMpoPkMDoTkYPe1sjG23wItappf6ETnecK6x1PXrL_yXqbm9jkVfwQer7-Gv6WvjlF-fzsOs)
+```mermaid
+sequenceDiagram
+  autonumber
+
+  actor User
+  participant Control Silo
+  participant Region Silo
+
+  User ->>+ Control Silo : delete user id=123
+  Control Silo ->> Control Silo : Remove user + save outbox message
+  Control Silo -->>- User : bye
+  Control Silo --)+ Region Silo : Publish outbox message
+  Region Silo ->>- Region Silo : Save tombstone
+  Region Silo --) Region Silo : Reconcile tombstone
+```
 
 In step 5 and 6 of the above diagram we reconcile the tombstone changes with the rest of the data in the region. Tombstones needs to be reconciled for each relation that the removed record had. For example, removing a user will:
 

diff --git a/develop-docs/application/dynamic-sampling/outcomes.mdx b/develop-docs/application/dynamic-sampling/outcomes.mdx
@@ -15,23 +15,23 @@ For a sampled transaction:
 
 ```mermaid
 flowchart LR
-    SDK --transaction--> Relay
-    Relay --transaction--> DS[Dynamic Sampling]
-    Relay --transaction_indexed--> DS
-    DS --transaction-->Store
-    DS --transaction_indexed-->Store
+  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:
 
 ```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
+  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