Convert ASCII architecture diagram to mermaid

docs-main/appdev/quickstart/deploy-to-devnet.mdx

@@ -4,7 +4,6 @@ description: "Deploy the Canton Network Quickstart application from LocalNet to
 ---
 
 import CantonGlobalSynchronizerDeploymentInstallationL41 from "/snippets/canton-docs/global-synchronizer_deployment_installation_L41.mdx";
-import ExternalCnQuickstartMainCnQuickstartRstCodeSdkDocsSharableSdkQuickstartOperateDeployQuickstartToDevnetText37 from "/snippets/external/cn-quickstart/main/cn-quickstart-rst-code-sdk-docs-sharable-sdk-quickstart-operate-deploy-quickstart-to-devnet-text-37.mdx";
 import ExternalCnQuickstartMainCnQuickstartRstCodeSdkDocsSharableSdkQuickstartOperateDeployQuickstartToDevnetBash96 from "/snippets/external/cn-quickstart/main/cn-quickstart-rst-code-sdk-docs-sharable-sdk-quickstart-operate-deploy-quickstart-to-devnet-bash-96.mdx";
 import ExternalCnQuickstartMainCnQuickstartRstCodeSdkDocsSharableSdkQuickstartOperateDeployQuickstartToDevnetBash174 from "/snippets/external/cn-quickstart/main/cn-quickstart-rst-code-sdk-docs-sharable-sdk-quickstart-operate-deploy-quickstart-to-devnet-bash-174.mdx";
 import ExternalCnQuickstartMainCnQuickstartRstCodeSdkDocsSharableSdkQuickstartOperateDeployQuickstartToDevnetBash233 from "/snippets/external/cn-quickstart/main/cn-quickstart-rst-code-sdk-docs-sharable-sdk-quickstart-operate-deploy-quickstart-to-devnet-bash-233.mdx";
@@ -102,7 +101,27 @@ The Quickstart DevNet deployment splits across two components:
 -   **cn-quickstart**: Provides the application layer (keycloak, pqs,
     backend-service, frontend)
 
-<ExternalCnQuickstartMainCnQuickstartRstCodeSdkDocsSharableSdkQuickstartOperateDeployQuickstartToDevnetText37 />
+```mermaid
+flowchart TB
+    subgraph SN["splice-node"]
+        direction LR
+        P["Participant<br/>:8080"]
+        V["Validator<br/>:5012"]
+        W["Wallet-UI<br/>:3000"]
+        A["ANS-UI<br/>:3000"]
+    end
+    subgraph CQ["cn-quickstart"]
+        direction LR
+        K["Keycloak<br/>:8082"]
+        PQ["PQS<br/>(scribe)"]
+        B["Backend<br/>:8089"]
+        F["Frontend<br/>:5173"]
+    end
+    P -->|Ledger API| B
+    V -->|Registry API| B
+```
+
+{/* LOCAL_MODIFICATION: the architectural overview diagram was converted from ASCII box-drawing to mermaid for consistency with other diagrams in the project. The upstream snippet (cn-quickstart-rst-code-sdk-docs-sharable-sdk-quickstart-operate-deploy-quickstart-to-devnet-text-37.mdx) contains the original ASCII art. */}
 
 `splice-node` ports are internal container ports and routed via nginx by
 hostname. `cn-quickstart` ports are directly exposed.

docs-main/integrations/dapp-building-overview.mdx

@@ -19,17 +19,23 @@ A typical setup involves:
 
 ## High-Level Architecture
 
-```
-┌─────────────┐      dApp API        ┌──────────────────┐     Ledger API      ┌─────────────────┐
-│   Your dApp │ ◄──────────────────► │  Wallet Gateway  │ ◄─────────────────► │ Canton Validator│
-│ (dApp SDK)  │   (HTTP / WebSocket) │                  │                     │                 │
-└─────────────┘                      │  ┌────────────┐  │     Signing         └─────────────────┘
-       │                             │  │  User API  │  │
-       │      User interactions      │  │  User UI   │  │     ┌─────────────────┐
-       └────────────────────────────►│  └────────────┘  │ ◄──►│ Signing Provider│
-            (User UI / User API)     │                  │     │ (Participant,   │
-                                     └──────────────────┘     │  Fireblocks…)   │
-                                                              └─────────────────┘
+```mermaid
+flowchart LR
+    D["Your dApp<br/>(dApp SDK)"]
+    U[User]
+    subgraph WG[Wallet Gateway]
+        direction TB
+        DA[dApp API]
+        UA[User API]
+        UI[User UI]
+    end
+    V[Canton Validator]
+    S["Signing Provider<br/>(Participant, Fireblocks, …)"]
+    D <-->|dApp API<br/>HTTP / WebSocket| DA
+    U -->|browser| UI
+    U -->|programmatic| UA
+    WG <-->|Ledger API| V
+    WG <-->|Signing| S
 ```
 
 - **dApp → Wallet Gateway**: Your dApp uses the dApp SDK to call the **dApp API** (connect, list accounts, prepare and execute transactions). The SDK can use HTTP (remote Wallet Gateway) or `postMessage` (browser extension).
@@ -65,3 +71,5 @@ See [Usage](/integrations/wallet-gateway/usage) and [APIs](/integrations/wallet-
 - **Using the User UI or User API?** → See [Usage](/integrations/wallet-gateway/usage) for typical workflows and when to use which interface.
 
 {/* COPIED_END */}
+
+{/* LOCAL_MODIFICATION: the "High-Level Architecture" diagram was converted from ASCII box-drawing to mermaid for consistency with other diagrams in the project. The diagram is the only divergence from the upstream source; the surrounding prose is verbatim. */}