C4 model — System Context

{
  "nodes": [
    { "id":"a","type":"actor","label":"Customer","x":40,"y":240 },
    { "id":"sys","type":"container","label":"<<software system>>  Shop","x":260,"y":80,"width":420,"height":340,"fill":"rgba(219,234,254,0.4)","stroke":"#2563eb" },
    { "id":"sw","type":"rounded","label":"Web app","x":320,"y":160,"fill":"#dbeafe","stroke":"#2563eb" },
    { "id":"sa","type":"rounded","label":"API","x":520,"y":160,"fill":"#dbeafe","stroke":"#2563eb" },
    { "id":"sd","type":"cylinder","label":"DB","x":420,"y":300,"fill":"#fef3c7","stroke":"#a16207" },
    { "id":"ext1","type":"cloud","label":"Email\nservice","x":760,"y":120,"fill":"#e0f2fe","stroke":"#0369a1" },
    { "id":"ext2","type":"cloud","label":"Payment\nprovider","x":760,"y":260,"fill":"#e0f2fe","stroke":"#0369a1" },
    { "id":"ext3","type":"cloud","label":"Shipping\nAPI","x":760,"y":400,"fill":"#e0f2fe","stroke":"#0369a1" }
  ],
  "edges": [
    { "id":"e1","source":"a","target":"sw","label":"uses" },
    { "id":"e2","source":"sw","target":"sa","label":"HTTPS" },
    { "id":"e3","source":"sa","target":"sd","label":"reads/writes" },
    { "id":"e4","source":"sa","target":"ext1","label":"sends" },
    { "id":"e5","source":"sa","target":"ext2","label":"charges" },
    { "id":"e6","source":"sa","target":"ext3","label":"creates labels" }
  ]
}