graph TB
  linkStyle default fill:#ffffff

  subgraph diagram [System Landscape]
    style diagram fill:#ffffff,stroke:#ffffff

    1["<div style='font-weight: bold'>Checkout Consumer System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"]
    style 1 fill:#dddddd,stroke:#9a9a9a,color:#000000
    24["<div style='font-weight: bold'>Checkout Storage System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"]
    style 24 fill:#dddddd,stroke:#9a9a9a,color:#000000
    27["<div style='font-weight: bold'>Checkout Merchant System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"]
    style 27 fill:#dddddd,stroke:#9a9a9a,color:#000000
    31["<div style='font-weight: bold'>Superfluid User Products</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"]
    style 31 fill:#1db227,stroke:#147c1b,color:#ffffff
    38["<div style='font-weight: bold'>Web3 Wallet</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The user's wallet with RPC &<br />signature access.</div>"]
    style 38 fill:#f6851b,stroke:#ac5d12,color:#000000
    39["<div style='font-weight: bold'>Web3 Stores</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"]
    style 39 fill:#dddddd,stroke:#9a9a9a,color:#000000
    42["<div style='font-weight: bold'>Web3 Merchant</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div>"]
    style 42 fill:#976440,stroke:#69462c,color:#ffffff
    44["<div style='font-weight: bold'>Web3 Consumer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div>"]
    style 44 fill:#976440,stroke:#69462c,color:#ffffff

    27-. "<div>Gets details from</div><div style='font-size: 70%'></div>" .->24
    31-. "<div>Can contain a generic<br />'hosted' version</div><div style='font-size: 70%'></div>" .->1
    39-. "<div>The website that holds the<br />checkout widget(s).</div><div style='font-size: 70%'></div>" .->1
    42-. "<div>Uses</div><div style='font-size: 70%'></div>" .->27
    44-. "<div>Uses to manage token balances</div><div style='font-size: 70%'></div>" .->31
    44-. "<div>Goes to subscribe to a<br />product</div><div style='font-size: 70%'></div>" .->39
    44-. "<div>Uses to make payment</div><div style='font-size: 70%'></div>" .->1
  end