@startuml
'https://plantuml.com/component-diagram
skinparam componentStyle rectangle

node Browser {
  database "Browser\nStorage" as bs
  component page {
    component "m-ld clone" as jsClone #lightyellow
    interface "m-ld API" as mldAPI #lightyellow
    jsClone <..> bs : <<optional>>\npersist
    jsClone - mldAPI
    component "Form Controller" as form
    form <--> mldAPI : JS
  }
}

node "App Service Tier" {
  component "App Service\nContainer" {
    component [App Service] as app
  }
  component "m-ld Gateway\n(NodeJS)" as gw {
    component "m-ld clone" as gwClone #lightyellow
    interface "m-ld API" as gwCloneAPI #lightyellow
    gwClone - gwCloneAPI
  }
}

database volume #lightyellow

cloud {
  component "m-ld remotes service" as remotes #lightyellow
}

database "App Database" {
  [DB_TABLE]
}

form <--> app
app <--> gwCloneAPI : JSON/HTTP/ws
app <-> DB_TABLE
jsClone <--> remotes : pubsub
gwClone <--> volume : persist
gwClone <--> remotes : pubsub

@enduml