Layout
architecture
layered (for comparison)
The Mermaid below has no coordinates. Edit it — the drawing follows.
Grafloria Mermaid source
flowchart LR %%grafloria:layout architecture customer["<b>Customer</b><br/>phone or browser"] subgraph hp["HEALTHPAY'S SIDE · CARDS ARE TYPED HERE"] direction LR page["<b>HealthPay payment page</b><br/>the card is typed here"] wallets["<b>HealthPay wallets</b><br/>hold the customer's money"] end subgraph ours["OUR SIDE · MUST NEVER SEE A CARD"] direction LR api["<b>Our API</b><br/><code>sherkety-erp-api</code>"] db["<b>Our database</b><br/>keys, ledger, bank numbers"] end fake["<b>Fake card page</b><br/>not HealthPay's"]:::bad note@{ shape: text, label: "if someone swaps the link, the customer lands here (M1)" } customer -->|card number and CVV| page page -->|adds money| wallets api -->|asks HealthPay to move money| wallets api -->|saves keys| db api -->|sends the payment link| customer customer -.->|"card typed as a<br/>#quot;bank account#quot; (H1)"| api customer -.-> fake classDef box fill:#ffffff,stroke:#d0d5dd,shadow:none,rx:4,font-size:13px classDef bad fill:#fdecec,stroke:#e5a0a0,shadow:none,rx:4,font-size:13px class customer,page,wallets,api,db box style note color:#cf222e,font-weight:bold,font-size:11px style hp fill:#e9f2f3,stroke:#7aabb3,stroke-dasharray:5 4,color:#2a7a86,font-weight:bold,letter-spacing:1px style ours fill:#f3f4f6,stroke:#d7dbe0,color:#4b5563,font-weight:bold,letter-spacing:1px linkStyle default interpolate stepBefore linkStyle 0 stroke:#1a7f37,color:#1a7f37,font-weight:bold,font-size:11px,stroke-width:1.5px linkStyle 1,2,3,4 stroke:#6b7785,color:#5f6b7a,font-size:11px,stroke-width:1.5px linkStyle 5,6 stroke:#cf222e,color:#cf222e,font-weight:bold,font-size:11px,stroke-width:1.5px %%grafloria:group ours caption:bottom-left %%grafloria:edge * * label:above %%grafloria:edge customer api label:below %%grafloria:edge api wallets from:top, to:bottom %%grafloria:edge customer fake from:bottom, to:top %%grafloria:near note fake right