From d1a3d7fc97d2dc79e4919eadce111221b6339e74 Mon Sep 17 00:00:00 2001 From: 8bitpal Date: Tue, 9 Jun 2026 10:44:07 +0200 Subject: [PATCH 1/2] Convert ASCII box diagram to mermaid in dapp-building-overview (issue #631) The High-Level Architecture diagram in integrations/dapp-building-overview.mdx used Unicode box-drawing characters. Converted to a mermaid flowchart matching the project convention established in PR #629 (flowchart LR with subgraph for Wallet Gateway internals). LOCAL_MODIFICATION comment added after COPIED_END to document the divergence from the upstream source. --- .../integrations/dapp-building-overview.mdx | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/docs-main/integrations/dapp-building-overview.mdx b/docs-main/integrations/dapp-building-overview.mdx index 7a93b4b0..3f54a926 100644 --- a/docs-main/integrations/dapp-building-overview.mdx +++ b/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
(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
(Participant, Fireblocks, …)"] + D <-->|dApp API
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. */} From 3c7c8b7aa213e7282f00e08b3c284992e2b1f4da Mon Sep 17 00:00:00 2001 From: 8bitpal Date: Tue, 9 Jun 2026 10:58:33 +0200 Subject: [PATCH 2/2] Also convert ASCII diagram in deploy-to-devnet architectural overview The Architectural Overview section in appdev/quickstart/deploy-to-devnet.mdx rendered an ASCII box-drawing diagram via an auto-generated cn-quickstart snippet. Replaced the snippet component with an equivalent mermaid flowchart (flowchart TB with two subgraphs: splice-node and cn-quickstart, connected by Ledger API and Registry API arrows). --- .../appdev/quickstart/deploy-to-devnet.mdx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/docs-main/appdev/quickstart/deploy-to-devnet.mdx b/docs-main/appdev/quickstart/deploy-to-devnet.mdx index 298e801c..8cd0a614 100644 --- a/docs-main/appdev/quickstart/deploy-to-devnet.mdx +++ b/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) - +```mermaid +flowchart TB + subgraph SN["splice-node"] + direction LR + P["Participant
:8080"] + V["Validator
:5012"] + W["Wallet-UI
:3000"] + A["ANS-UI
:3000"] + end + subgraph CQ["cn-quickstart"] + direction LR + K["Keycloak
:8082"] + PQ["PQS
(scribe)"] + B["Backend
:8089"] + F["Frontend
: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.