add communication diagram

src/content/docs/en/sdk/technical-stack/services.mdx

@@ -15,7 +15,9 @@ Scroll SDK is composed of various services that work together to create a functi
 
 We'll start by listing the services required for a minimal deployment, followed by a detailed description of each service. This information will help you understand the components of Scroll SDK and make informed decisions about which services to enable or disable based on your specific needs.
 
-This covers the full list of items in [values.yaml](https://github.com/scroll-tech/scroll-stack/blob/develop/charts/scroll-stack/values.yaml), which allows for enabling or disabling of specific services. New to Scroll’s Architecture? Check out [this article](/en/technology/chain/rollup/) for more info.
+This covers the full list of items in [values.yaml](https://github.com/scroll-tech/scroll-stack/blob/develop/charts/scroll-stack/values.yaml), which allows for enabling or disabling of specific services.
+
+**New to Scroll’s Architecture?** Check out [this article](/en/technology/chain/rollup/) for more general info.
 
 ## Helm & Kubernetes
 
@@ -185,3 +187,96 @@ The Kube Prometheus Stack is a collection of Kubernetes manifests, Grafana dashb
 #### Database Configuration (`db`)
 
 Allows configurations for a DB outside of the default postgres service included in the stack. This provides flexibility in database setup and management for various services within the Scroll SDK ecosystem.
+
+## Cross-Service Communication
+
+<span class="mermaid-diagram">
+```mermaid
+graph LR
+	subgraph K[Key]
+		direction LR
+		SS[Single Service]
+		RL1{{"Hex Shape: Reads from L1"}}
+		RL2[Dashed Border: Reads from L2 Sequencer]:::L2S
+		SS -.p2p connection.- RL1
+		RL1 <-- "Writes to L1" --> RL2
+	end
+
+	classDef L2S stroke:#77b,stroke-width:2px,stroke-dasharray: 7 4 2 4
+```
+```mermaid
+%%{ init: { 'flowchart': { 'curve': 'monotoneX' } } }%%
+flowchart LR
+	L1[l1-devnet / L1 Full Node]
+
+	L1 <----> GO
+	L1 <----> RN
+	L1 <-.via browser and wallet.-> F
+
+	subgraph SSC["Scroll SDK Chain"]
+		direction LR
+
+		DB[(DB)]
+		L2{{L2-sequencer}}
+		RN{{rollup-node}}:::L2S
+		GO{{gas-oracle}}:::L2S
+
+		EW{{event-watcher}}:::L2S
+		CM{{chain-monitor}}:::L2S
+		BHF{{bridge-history-fetcher}}:::L2S
+		CC[coordinator-cron]
+
+		L2R{{l2-rpc}}
+		L2B{{l2-bootnode}}
+		L2 -.- L2R
+		L2 -.- L2B
+
+		DB --> GO
+		DB --> EW
+		DB --> CC
+		DB --> CM
+		DB --> BHF
+		DB --> RN
+		DB --> REB
+
+		CC --> CA
+		BHF --> BHA
+
+		subgraph EXT["External APIs"]
+			BHA{{bridge-history-api}}:::L2S
+			CA[coordinator-api]
+			REB[rollup-explorer-backend]
+			RG
+			BHA
+		end
+	end
+
+
+
+
+	L2R --> RG[rpc-gateway]
+
+
+
+	F{{frontends}}:::L2S
+	PR[prover]
+
+	BHA --> F
+	REB --> F
+	RG --> F
+	CA --> PR
+
+	classDef L2S stroke:#77b,stroke-width:2px,stroke-dasharray: 7 4 2 4
+	style EXT fill:#FFE0B2
+    
+```
+
+{/* TODO: Assess is we want Aux services here */}
+	{/* subgraph AUX["Aux Services"]
+		direction TB
+		BC{{balance-checker}}
+		BS[blockscout]
+		GR[grafana]
+		LKI[loki]
+	end */}
+</span>

src/styles/index.css

@@ -62,9 +62,11 @@ nav ul {
 :where(a:hover) {
   @apply text-link-hover;
 }
+
 :where(a:focus) {
   @apply text-link-pressed;
 }
+
 article > section :is(ul, ol) > * + * {
   margin-top: 0.75rem;
 }
@@ -102,6 +104,7 @@ article > section ::marker {
   font-weight: bold;
   @apply text-marker;
 }
+
 .dark article > section ::marker {
   @apply text-dark-marker;
 }
@@ -247,6 +250,7 @@ th {
   font-weight: bold;
   @apply text-black dark:text-white-800;
 }
+
 td,
 th {
   padding: 8px 30px;
@@ -309,13 +313,16 @@ h2.heading {
   border-color: var(--orange-500);
   color: var(--orange-500);
 }
+
 .header-link:focus-within {
   border-left-color: hsla(var(--color-gray-40), 1);
   @apply text-light;
 }
+
 .header-link:hover svg {
   color: var(--orange-500);
 }
+
 .header-link:hover span {
   color: var(--orange-500);
 }
@@ -330,6 +337,7 @@ h2.heading {
 .header-link.depth-3 {
   padding-left: 2rem;
 }
+
 .header-link.depth-4 {
   padding-left: 3rem;
 }
@@ -339,6 +347,7 @@ h2.heading {
   color: inherit;
   text-decoration: none;
 }
+
 .header-link a span {
   font-size: 16px;
   line-height: normal;
@@ -387,9 +396,11 @@ h2.heading {
     --max-width: 46em;
     --fullwidth-max-width: 80rem;
   }
+
   .header-link {
     margin-left: 1rem;
   }
+
   h2.heading {
     font-size: 16px;
     padding: 0.1rem 1rem;
@@ -404,3 +415,7 @@ h2.heading {
   display: inline-block;
   margin-left: var(--space-2x);
 }
+
+.mermaid-diagram > img {
+  height: auto;
+}