@itsthecsguy/linework 0.0.0-stage → 0.1.0

package/skills/linework/SKILL.md

@@ -0,0 +1,214 @@
+---
+name: linework
+description: Create and edit software diagrams (architecture, flowcharts, state machines, sequence diagrams, ER/database schemas) as .drawio.svg files that render in Markdown, HTML and GitHub, and that people can open and edit by hand in draw.io. Use when a design doc, README or ADR needs a diagram, or when asked to change an existing .drawio.svg.
+---
+
+# Linework
+
+You describe the diagram as a small YAML spec. `linework` does the layout, styling and rendering, and writes a `.drawio.svg`. That's a normal SVG for docs, with the editable draw.io model embedded inside it. Never write coordinates, SVG or draw.io XML yourself.
+
+Run it as `npx -y @itsthecsguy/linework` unless `linework` is already on PATH. The first run needs a Chromium-based browser. If it says none was found, run `npx playwright install chromium`.
+
+## Workflow
+
+1. **Decide what the diagram is for.** One diagram makes one point. Pick the type:
+   - `architecture`: components and how they talk. Services, data stores, queues, external systems, trust boundaries.
+   - `flow`: a process with steps and decisions.
+   - `state`: the lifecycle of one thing, like an order, payment or job.
+   - `sequence`: who calls whom, in what order, for one scenario.
+   - `er`: database tables, their columns and how they relate.
+
+   If the doc already has a Mermaid diagram, convert it instead of rewriting it: `npx -y @itsthecsguy/linework import doc.md --block 1 -o docs/diagrams/x.drawio.svg`.
+2. **Write the spec** to a scratch file, or pipe it on stdin. The `.drawio.svg` is the source of truth, so you don't need to keep the YAML.
+3. **Build with a preview:**
+   ```bash
+   npx -y @itsthecsguy/linework build spec.yaml -o docs/diagrams/checkout.drawio.svg --png /tmp/checkout.png
+   ```
+4. **Read the output.** `spec error` lines tell you exactly what to fix. `check:` lists layout problems. Fix every `error` and the warnings that matter, then rebuild.
+5. **Look at the PNG** if you can view images. Check that the diagram tells the story you meant, flows in a sensible direction and doesn't sprawl. If `check` says `too-wide`, remove `direction` (or set `TB`) or split it.
+6. **Embed the `.drawio.svg`**, never the PNG (see "Putting it in a doc").
+
+## Spec
+
+```yaml
+type: architecture            # architecture | flow | state | sequence | er
+title: Checkout               # optional
+direction: auto               # auto (default) | TB | LR | BT | RL
+theme: clean                  # clean (default) | soft | dark | sketch | blueprint | c4
+groups:                       # optional boxes around nodes; can nest with `in`
+  vpc: { label: Production VPC }
+  data: { label: Data tier, in: vpc }
+nodes:                        # id: { label, kind, tech, in }  (all optional)
+  user:   { label: Shopper, kind: person }
+  web:    { label: Web app, kind: client, tech: Next.js }
+  api:    { label: Checkout API, tech: Go, in: vpc, highlight: true }
+  queue:  { label: order-events, kind: queue, tech: Kafka, in: vpc }
+  db:     { label: Orders, kind: database, tech: Postgres, in: data }
+  stripe: { kind: external, tech: Payments API }   # label defaults to "Stripe"
+edges:                        # "from ARROW to: label"
+  - user -> web
+  - web ==> api: HTTPS          # ==> highlighted: the path the doc is about
+  - api -> db: SQL
+  - api -.-> queue: OrderPlaced  # -.-> async/event, dashed
+  - api -> stripe: charge
+```
+
+- Ids use letters, digits, `_`, `.` and `-`. The label defaults to the id with its first letter capitalized.
+- Arrows: `->` call or flow, `==>` the same but highlighted, `-.->` async or event, `<->` two-way, `--` no arrowhead. Put spaces around the arrow.
+- `tech` is the small, quieter second line. Use it for the technology, not a description.
+- Node order matters a little. Layout tries to keep the declaration order, so list nodes roughly in reading order.
+- Quote an edge if its label contains `: ` or `#`, for example `- "api -> db: SELECT: orders"`.
+- Architecture nodes can carry a cloud icon: `icon: aws.lambda`, `gcp.cloud_run`, `k8s.pod`, `azure.<name>`. Run `npx -y @itsthecsguy/linework icons aws lambda` to search names. Use icons when the doc is about a specific cloud; leave them off for logical diagrams.
+- Styles (`theme:`): use `clean` unless asked. It's minimal: white boxes, hairline borders, groups as gray grounds, IBM Plex Sans, and color only where it means something.
+  - `soft`: borderless pastel cards, tinted by kind. For slides and docs that want color coding.
+  - `dark`: for dark-mode docs and slides.
+  - `sketch`: hand-drawn lines and handwriting. For early proposals ("this is a draft") and whiteboard-style explainers.
+  - `blueprint`: light lines on deep blue, monospace. For technical deep dives that want a distinct look.
+  - `c4`: C4-model conventions; labels each box with its element type.
+- Color is for meaning, so most nodes stay neutral:
+  - `highlight: true` on a node, group or participant, or `==>` on an edge or message, makes it the first thing a reader sees. Highlight the one path or component the surrounding text is about: often one node and the 2 or 3 edges into and out of it. `build` warns when you highlight so much that nothing stands out.
+  - `color: <name>` tints a node, group or edge to mark a category, like red for failure paths or green for what's new in this proposal. Say what the color means in the doc text. Names: `blue`, `violet`, `pink`, `red`, `orange`, `amber`, `green`, `teal`, `gray`.
+  - Kinds `error` and `success` are red and green in every style.
+  - An edge with a color uses the object form: `- { from: api, to: dlq, label: on failure, style: async, color: red }`.
+
+Node kinds, also listed by `linework kinds`:
+
+| type | kinds (default first) |
+|---|---|
+| architecture | `service`, `person`, `client`, `function`, `database`, `cache`, `storage`, `queue`, `external` |
+| flow | `step`, `decision`, `terminal`, `data`, `error` |
+| state | `state`, `success`, `error` (start and end come from `[*]`) |
+| sequence | `service`, `person`, `client`, `function`, `database`, `queue`, `external` |
+| er | `entity`, `view`, `external` |
+
+Flow and state specifics:
+
+```yaml
+type: flow
+nodes:
+  start:  { label: Refund requested, kind: terminal }
+  window: { label: Within 30 days?, kind: decision }
+  refund: { label: Issue refund }
+  deny:   { label: Deny with reason, kind: error }
+edges:
+  - start -> window
+  - window -> refund: "yes"     # label every edge leaving a decision
+  - window -> deny: "no"
+```
+
+```yaml
+type: state
+nodes:
+  pending: {}
+  paid: { kind: success }
+  failed: { kind: error }
+edges:
+  - "[*] -> pending"            # quote edges that use [*]
+  - pending -> paid: payment_succeeded
+  - pending -> failed: declined
+  - "paid -> [*]"
+```
+
+Sequence diagrams use `participants` (in left-to-right order) and `messages`:
+
+```yaml
+type: sequence
+participants:
+  web:    { label: Web app, kind: client }
+  api:    { label: Checkout API }
+  stripe: { kind: external }
+messages:
+  - web ==> api: POST /checkout       # -> call; ==> highlighted call
+  - api -> stripe: create PaymentIntent
+  - stripe --> api: client_secret     # --> reply (dashed)
+  - api --> web: 200 OK
+  - note over api, stripe: retried with an idempotency key
+  - alt:                              # alt and par take branches
+      - when: payment succeeded
+        do:
+          - stripe -.-> api: webhook  # -.-> async
+      - when: declined
+        do:
+          - api --> web: 402
+  - loop: every 30s                   # loop, opt, critical, break take one block
+    do:
+      - web -> api: poll status
+```
+
+Activation bars come from call/reply pairs automatically: each `a -> b` closed by a later `b --> a`. Participants take `color` and `highlight` like nodes.
+
+ER diagrams put `fields` on nodes and use Mermaid's crow's-foot notation for edges:
+
+```yaml
+type: er
+nodes:
+  users:
+    fields:
+      - id: uuid pk
+      - org_id: uuid fk
+      - email: text unique
+  orgs:
+    label: organizations
+    fields: [ "id: uuid pk", "name: text" ]
+edges:
+  - users }o--|| orgs: belongs to     # many users to exactly one org
+```
+
+Field flags: `pk`, `fk`, `unique`, `null`. Cardinality ends: `||` one, `|o` zero or one, `}o` / `o{` many, `}|` / `|{` one or many. Use `--` for identifying relationships, `..` for the rest.
+
+More examples and rules are in `references/spec.md`. Read `references/style-guide.md` before drawing anything non-trivial.
+
+## Editing an existing diagram
+
+Always start from the file, never from an old copy of the spec:
+
+```bash
+npx -y @itsthecsguy/linework show docs/diagrams/checkout.drawio.svg > /tmp/spec.yaml   # current spec, hand edits included
+# edit /tmp/spec.yaml; keep the "# linework-base:" line at the top
+npx -y @itsthecsguy/linework build /tmp/spec.yaml -o docs/diagrams/checkout.drawio.svg --png /tmp/checkout.png
+```
+
+If someone has arranged the diagram by hand in draw.io, `build` merges your changes into their layout instead of starting over. (For sequence diagrams, hand-placed lifeline columns stay; rows always follow message order.)
+- Existing nodes stay exactly where they are.
+- New nodes go next to the node they connect to.
+- Removed nodes disappear.
+- Groups grow to fit new members.
+- Only new edges, and edges whose routes went stale, get rerouted.
+- Their colours, label edits and notes survive.
+
+The `merged into the existing layout:` line tells you what happened. Mention it to the user.
+
+The `# linework-base:` line tells `build` your spec includes the latest hand edits. Without it, `build` won't delete shapes someone added by hand that your spec doesn't mention. It keeps them and prints a note. If you see that note, run `show` again and redo your edit from its output.
+
+`--relayout` throws the hand-made layout away and lays everything out from scratch. **Only use it if the user asks,** because it undoes their layout work.
+
+If someone moved shapes by hand and left edges crossing through boxes, `npx -y @itsthecsguy/linework tidy file.drawio.svg` reroutes just the broken edges and changes nothing else.
+
+## Putting it in a doc
+
+- Markdown (GitHub, GitLab, most renderers): `![Checkout architecture](diagrams/checkout.drawio.svg)`
+- HTML: `<img src="diagrams/checkout.drawio.svg" alt="Checkout architecture">`
+- Tell the user they can edit it by hand: open the file in VS Code with the "Draw.io Integration" extension, in draw.io desktop, or at app.diagrams.net. It saves back into the same file, and your later edits will keep their layout.
+- In a git repo, offer to run `npx -y @itsthecsguy/linework git-setup` once, so `git diff` on diagrams shows readable spec changes.
+- Google Docs can't hold SVG. `npx -y @itsthecsguy/linework publish file.drawio.svg` copies it into the user's Google Drive folder, and draw.io's Google Docs add-on inserts it from there and refreshes it after changes. Setup and the update steps are in `references/google-docs.md`; walk the user through them the first time.
+
+## Letting the user edit
+
+If the user wants to adjust a diagram by hand, `npx -y @itsthecsguy/linework edit file.drawio.svg` opens it in draw.io in their browser, served from their machine. Saving there writes the file. When they say they're done, run `show` and carry on from its output; their changes are in it.
+
+## Commands
+
+| command | does |
+|---|---|
+| `build <spec\|-> -o out.drawio.svg [--png p.png] [--relayout]` | layout (or merge into an existing file), write, lint |
+| `show <file> [--geometry]` | print the spec, stamped with `linework-base` |
+| `tidy <file>` | reroute edges that pass through nodes; nothing else changes |
+| `import <file.mmd\|doc.md> [--block N] [-o out.drawio.svg]` | convert Mermaid (flowchart, state, sequence, ER) |
+| `icons <aws\|gcp\|k8s\|azure> [filter]` | list icon names |
+| `edit <file>` | open the diagram in draw.io in the user's browser; saving writes the file |
+| `publish <file...> [--to dir] [--pull]` | copy diagrams into Google Drive for the Docs add-on; `--pull` brings Drive edits back |
+| `git-setup` | make `git diff` show diagram changes as spec changes |
+| `render <file> -o out.png [--scale 2]` | preview image |
+| `check <file>` | lint only; exit 1 on errors |
+| `kinds [type]` | list node kinds |
+| `schema` | JSON Schema of the spec |

package/skills/linework/examples/billing-er.drawio.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than draw.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" style="background: #FFFFFF; background-color: light-dark(#FFFFFF, #121212);" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="886px" height="358px" viewBox="0 0 886 358" content="&lt;mxfile host=&quot;aiviz&quot; agent=&quot;aiviz&quot;&gt;&lt;diagram id=&quot;aiviz&quot; name=&quot;Billing schema&quot;&gt;&lt;mxGraphModel grid=&quot;1&quot; gridSize=&quot;8&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; page=&quot;0&quot; background=&quot;#FFFFFF&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&lt;root&gt;&lt;object id=&quot;0&quot; label=&quot;&quot; aiviz_version=&quot;1&quot; aiviz_type=&quot;er&quot; aiviz_direction=&quot;auto&quot; aiviz_title=&quot;Billing schema&quot;&gt;&lt;mxCell/&gt;&lt;/object&gt;&lt;mxCell id=&quot;1&quot; parent=&quot;0&quot;/&gt;&lt;object id=&quot;orgs&quot; label=&quot;organizations&quot; aiviz_kind=&quot;entity&quot; aiviz_label=&quot;organizations&quot; aiviz_auto=&quot;708,120,160,116&quot;&gt;&lt;mxCell style=&quot;shape=swimlane;childLayout=stackLayout;horizontal=1;startSize=32;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;rounded=1;absoluteArcSize=1;arcSize=12;swimlaneFillColor=#FFFFFF;fontStyle=1;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#EEF2FF;strokeColor=#4F46E5;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;708&quot; y=&quot;120&quot; width=&quot;160&quot; height=&quot;116&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;users&quot; label=&quot;Users&quot; aiviz_kind=&quot;entity&quot; aiviz_label=&quot;Users&quot; aiviz_auto=&quot;364,16,184,142&quot;&gt;&lt;mxCell style=&quot;shape=swimlane;childLayout=stackLayout;horizontal=1;startSize=32;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;rounded=1;absoluteArcSize=1;arcSize=12;swimlaneFillColor=#FFFFFF;fontStyle=1;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#EEF2FF;strokeColor=#4F46E5;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;364&quot; y=&quot;16&quot; width=&quot;184&quot; height=&quot;142&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;subscriptions&quot; label=&quot;Subscriptions&quot; aiviz_kind=&quot;entity&quot; aiviz_label=&quot;Subscriptions&quot; aiviz_auto=&quot;372,198,168,142&quot;&gt;&lt;mxCell style=&quot;shape=swimlane;childLayout=stackLayout;horizontal=1;startSize=32;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;rounded=1;absoluteArcSize=1;arcSize=12;swimlaneFillColor=#FFFFFF;fontStyle=1;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#EEF2FF;strokeColor=#4F46E5;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;372&quot; y=&quot;198&quot; width=&quot;168&quot; height=&quot;142&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;invoices&quot; label=&quot;Invoices&quot; aiviz_kind=&quot;entity&quot; aiviz_label=&quot;Invoices&quot; aiviz_auto=&quot;16,198,192,142&quot;&gt;&lt;mxCell style=&quot;shape=swimlane;childLayout=stackLayout;horizontal=1;startSize=32;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;rounded=1;absoluteArcSize=1;arcSize=12;swimlaneFillColor=#FFFFFF;fontStyle=1;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#EEF2FF;strokeColor=#4F46E5;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;16&quot; y=&quot;198&quot; width=&quot;192&quot; height=&quot;142&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;orgs__id&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;&amp;lt;b&amp;gt;id&amp;lt;/b&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;uuid PK&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;id&quot; aiviz_ftype=&quot;uuid&quot; aiviz_flags=&quot;pk&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;orgs&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;32&quot; width=&quot;160&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;orgs__name&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;name&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;text&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;name&quot; aiviz_ftype=&quot;text&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;orgs&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;58&quot; width=&quot;160&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;orgs__plan&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;plan&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;text&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;plan&quot; aiviz_ftype=&quot;text&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;orgs&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;84&quot; width=&quot;160&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;users__id&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;&amp;lt;b&amp;gt;id&amp;lt;/b&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;uuid PK&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;id&quot; aiviz_ftype=&quot;uuid&quot; aiviz_flags=&quot;pk&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;users&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;32&quot; width=&quot;184&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;users__org_id&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;org_id&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;uuid FK&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;org_id&quot; aiviz_ftype=&quot;uuid&quot; aiviz_flags=&quot;fk&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;users&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;58&quot; width=&quot;184&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;users__email&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;email&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;text unique&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;email&quot; aiviz_ftype=&quot;text&quot; aiviz_flags=&quot;unique&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;users&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;84&quot; width=&quot;184&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;users__created_at&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;created_at&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;timestamptz&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;created_at&quot; aiviz_ftype=&quot;timestamptz&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;users&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;110&quot; width=&quot;184&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;subscriptions__id&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;&amp;lt;b&amp;gt;id&amp;lt;/b&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;uuid PK&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;id&quot; aiviz_ftype=&quot;uuid&quot; aiviz_flags=&quot;pk&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;subscriptions&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;32&quot; width=&quot;168&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;subscriptions__org_id&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;org_id&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;uuid FK&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;org_id&quot; aiviz_ftype=&quot;uuid&quot; aiviz_flags=&quot;fk&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;subscriptions&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;58&quot; width=&quot;168&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;subscriptions__stripe_id&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;stripe_id&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;text unique&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;stripe_id&quot; aiviz_ftype=&quot;text&quot; aiviz_flags=&quot;unique&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;subscriptions&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;84&quot; width=&quot;168&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;subscriptions__status&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;status&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;text&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;status&quot; aiviz_ftype=&quot;text&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;subscriptions&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;110&quot; width=&quot;168&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;invoices__id&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;&amp;lt;b&amp;gt;id&amp;lt;/b&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;uuid PK&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;id&quot; aiviz_ftype=&quot;uuid&quot; aiviz_flags=&quot;pk&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;invoices&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;32&quot; width=&quot;192&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;invoices__subscription_id&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;subscription_id&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;uuid FK&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;subscription_id&quot; aiviz_ftype=&quot;uuid&quot; aiviz_flags=&quot;fk&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;invoices&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;58&quot; width=&quot;192&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;invoices__amount_cents&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;amount_cents&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;int&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;amount_cents&quot; aiviz_ftype=&quot;int&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;invoices&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;84&quot; width=&quot;192&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;invoices__paid_at&quot; label=&quot;&amp;lt;table style=&amp;quot;width:100%;height:100%;border-collapse:collapse&amp;quot;&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td style=&amp;quot;padding:0 6px 0 12px&amp;quot;&amp;gt;paid_at&amp;lt;/td&amp;gt;&amp;lt;td style=&amp;quot;text-align:right;padding:0 12px 0 6px;color:#64748B&amp;quot;&amp;gt;timestamptz null&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&amp;lt;/table&amp;gt;&quot; aiviz_field=&quot;paid_at&quot; aiviz_ftype=&quot;timestamptz&quot; aiviz_flags=&quot;null&quot;&gt;&lt;mxCell style=&quot;text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=10;spacingRight=10;overflow=fill;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=12;fontColor=#0F172A;&quot; vertex=&quot;1&quot; parent=&quot;invoices&quot;&gt;&lt;mxGeometry x=&quot;0&quot; y=&quot;110&quot; width=&quot;192&quot; height=&quot;26&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_users__orgs&quot; label=&quot;belongs to&quot; aiviz_edge=&quot;users-&amp;gt;orgs&quot; aiviz_auto=&quot;680,87 680,159&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;startArrow=ERzeroToMany;endArrow=ERmandOne;startFill=0;endFill=0;startSize=10;endSize=10;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.333;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;users&quot; target=&quot;orgs&quot;&gt;&lt;mxGeometry x=&quot;-0.309&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&lt;Array as=&quot;points&quot;&gt;&lt;mxPoint x=&quot;680&quot; y=&quot;87&quot;/&gt;&lt;mxPoint x=&quot;680&quot; y=&quot;159&quot;/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_subscriptions__orgs&quot; label=&quot;billed to&quot; aiviz_edge=&quot;subscriptions-&amp;gt;orgs&quot; aiviz_auto=&quot;680,269 680,197&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;startArrow=ERzeroToMany;endArrow=ERmandOne;startFill=0;endFill=0;startSize=10;endSize=10;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.667;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;subscriptions&quot; target=&quot;orgs&quot;&gt;&lt;mxGeometry x=&quot;-0.266&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&lt;Array as=&quot;points&quot;&gt;&lt;mxPoint x=&quot;680&quot; y=&quot;269&quot;/&gt;&lt;mxPoint x=&quot;680&quot; y=&quot;197&quot;/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_invoices__subscriptions&quot; label=&quot;issued for&quot; aiviz_edge=&quot;invoices-&amp;gt;subscriptions&quot; aiviz_auto=&quot;&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;startArrow=ERzeroToMany;endArrow=ERmandOne;startFill=0;endFill=0;startSize=10;endSize=10;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;invoices&quot; target=&quot;subscriptions&quot;&gt;&lt;mxGeometry x=&quot;-0.049&quot; relative=&quot;1&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><rect fill="#FFFFFF" width="100%" height="100%" x="0" y="0" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));"/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="orgs"><g><path d="M 868 152 L 868 126 Q 868 120 862 120 L 714 120 Q 708 120 708 126 L 708 152" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(238, 242, 255), rgb(26, 29, 40)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/><path d="M 708 152 L 708 230 Q 708 236 714 236 L 862 236 Q 868 236 868 230 L 868 152" fill="#ffffff" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/><path d="M 708 152 L 868 152" fill="none" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 136px; margin-left: 709px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">organizations</div></div></div></foreignObject><text x="788" y="140" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">organizations</text></switch></g></g><g data-cell-id="orgs__id"><g><rect x="708" y="152" width="160" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 162px; height: 26px; padding-top: 152px; margin-left: 708px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 160px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px"><b>id</b></td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">uuid PK</td></tr></tbody></table></div></div></div></foreignObject><text x="708" y="169" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">iduuid PK</text></switch></g></g></g><g data-cell-id="orgs__name"><g><rect x="708" y="178" width="160" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 162px; height: 26px; padding-top: 178px; margin-left: 708px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 160px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">name</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">text</td></tr></tbody></table></div></div></div></foreignObject><text x="708" y="195" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">nametext</text></switch></g></g></g><g data-cell-id="orgs__plan"><g><rect x="708" y="204" width="160" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 162px; height: 26px; padding-top: 204px; margin-left: 708px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 160px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">plan</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">text</td></tr></tbody></table></div></div></div></foreignObject><text x="708" y="221" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">plantext</text></switch></g></g></g></g><g data-cell-id="users"><g><path d="M 548 48 L 548 22 Q 548 16 542 16 L 370 16 Q 364 16 364 22 L 364 48" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(238, 242, 255), rgb(26, 29, 40)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/><path d="M 364 48 L 364 152 Q 364 158 370 158 L 542 158 Q 548 158 548 152 L 548 48" fill="#ffffff" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/><path d="M 364 48 L 548 48" fill="none" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 182px; height: 1px; padding-top: 32px; margin-left: 365px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Users</div></div></div></foreignObject><text x="456" y="36" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">Users</text></switch></g></g><g data-cell-id="users__id"><g><rect x="364" y="48" width="184" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 186px; height: 26px; padding-top: 48px; margin-left: 364px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 184px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px"><b>id</b></td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">uuid PK</td></tr></tbody></table></div></div></div></foreignObject><text x="364" y="65" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">iduuid PK</text></switch></g></g></g><g data-cell-id="users__org_id"><g><rect x="364" y="74" width="184" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 186px; height: 26px; padding-top: 74px; margin-left: 364px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 184px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">org_id</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">uuid FK</td></tr></tbody></table></div></div></div></foreignObject><text x="364" y="91" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">org_iduuid FK</text></switch></g></g></g><g data-cell-id="users__email"><g><rect x="364" y="100" width="184" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 186px; height: 26px; padding-top: 100px; margin-left: 364px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 184px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">email</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">text unique</td></tr></tbody></table></div></div></div></foreignObject><text x="364" y="117" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">emailtext unique</text></switch></g></g></g><g data-cell-id="users__created_at"><g><rect x="364" y="126" width="184" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 186px; height: 26px; padding-top: 126px; margin-left: 364px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 184px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">created_at</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">timestamptz</td></tr></tbody></table></div></div></div></foreignObject><text x="364" y="143" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">created_attimestamptz</text></switch></g></g></g></g><g data-cell-id="subscriptions"><g><path d="M 540 230 L 540 204 Q 540 198 534 198 L 378 198 Q 372 198 372 204 L 372 230" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(238, 242, 255), rgb(26, 29, 40)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/><path d="M 372 230 L 372 334 Q 372 340 378 340 L 534 340 Q 540 340 540 334 L 540 230" fill="#ffffff" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/><path d="M 372 230 L 540 230" fill="none" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 166px; height: 1px; padding-top: 214px; margin-left: 373px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Subscriptions</div></div></div></foreignObject><text x="456" y="218" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">Subscriptions</text></switch></g></g><g data-cell-id="subscriptions__id"><g><rect x="372" y="230" width="168" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 170px; height: 26px; padding-top: 230px; margin-left: 372px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 168px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px"><b>id</b></td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">uuid PK</td></tr></tbody></table></div></div></div></foreignObject><text x="372" y="247" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">iduuid PK</text></switch></g></g></g><g data-cell-id="subscriptions__org_id"><g><rect x="372" y="256" width="168" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 170px; height: 26px; padding-top: 256px; margin-left: 372px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 168px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">org_id</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">uuid FK</td></tr></tbody></table></div></div></div></foreignObject><text x="372" y="273" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">org_iduuid FK</text></switch></g></g></g><g data-cell-id="subscriptions__stripe_id"><g><rect x="372" y="282" width="168" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 170px; height: 26px; padding-top: 282px; margin-left: 372px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 168px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">stripe_id</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">text unique</td></tr></tbody></table></div></div></div></foreignObject><text x="372" y="299" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">stripe_idtext unique</text></switch></g></g></g><g data-cell-id="subscriptions__status"><g><rect x="372" y="308" width="168" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 170px; height: 26px; padding-top: 308px; margin-left: 372px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 168px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">status</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">text</td></tr></tbody></table></div></div></div></foreignObject><text x="372" y="325" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">statustext</text></switch></g></g></g></g><g data-cell-id="invoices"><g><path d="M 208 230 L 208 204 Q 208 198 202 198 L 22 198 Q 16 198 16 204 L 16 230" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(238, 242, 255), rgb(26, 29, 40)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/><path d="M 16 230 L 16 334 Q 16 340 22 340 L 202 340 Q 208 340 208 334 L 208 230" fill="#ffffff" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/><path d="M 16 230 L 208 230" fill="none" stroke="#4f46e5" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 190px; height: 1px; padding-top: 214px; margin-left: 17px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Invoices</div></div></div></foreignObject><text x="112" y="218" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">Invoices</text></switch></g></g><g data-cell-id="invoices__id"><g><rect x="16" y="230" width="192" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 194px; height: 26px; padding-top: 230px; margin-left: 16px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 192px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px"><b>id</b></td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">uuid PK</td></tr></tbody></table></div></div></div></foreignObject><text x="16" y="247" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">iduuid PK</text></switch></g></g></g><g data-cell-id="invoices__subscription_id"><g><rect x="16" y="256" width="192" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 194px; height: 26px; padding-top: 256px; margin-left: 16px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 192px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">subscription_id</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">uuid FK</td></tr></tbody></table></div></div></div></foreignObject><text x="16" y="273" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">subscription_iduuid FK</text></switch></g></g></g><g data-cell-id="invoices__amount_cents"><g><rect x="16" y="282" width="192" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 194px; height: 26px; padding-top: 282px; margin-left: 16px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 192px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">amount_cents</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">int</td></tr></tbody></table></div></div></div></foreignObject><text x="16" y="299" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">amount_centsint</text></switch></g></g></g><g data-cell-id="invoices__paid_at"><g><rect x="16" y="308" width="192" height="26" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 194px; height: 26px; padding-top: 308px; margin-left: 16px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; width: 192px; height: 26px; overflow: hidden; color: #0F172A; "><div style="display: inline-block; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; word-wrap: normal; "><table style="width:100%;height:100%;border-collapse:collapse"><tbody><tr><td style="padding:0 6px 0 12px">paid_at</td><td style="text-align: right; padding: 0px 12px 0px 6px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">timestamptz null</td></tr></tbody></table></div></div></div></foreignObject><text x="16" y="325" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="12px" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">paid_attimestamptz null</text></switch></g></g></g></g><g data-cell-id="e_users__orgs"><g><path d="M 572.25 87 L 674 87 Q 680 87 680 93 L 680 152.6 Q 680 158.6 686 158.61 L 708 158.63" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><ellipse cx="566.75" cy="87" rx="5" ry="5" fill="none" stroke="#64748b" stroke-width="1.5" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 548 93.25 L 560.5 87 L 548 80.75 M 560.5 87 L 548 87" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 701.74 164.87 L 701.76 152.37 M 695.49 164.87 L 695.51 152.37" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 87px; margin-left: 628px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">belongs to</div></div></div></foreignObject><text x="628" y="90" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">belongs to</text></switch></g></g></g><g data-cell-id="e_subscriptions__orgs"><g><path d="M 564.25 269 L 674 269 Q 680 269 680 263 L 680 203.4 Q 680 197.4 686 197.39 L 708 197.37" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><ellipse cx="558.75" cy="269" rx="5" ry="5" fill="none" stroke="#64748b" stroke-width="1.5" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 540 275.25 L 552.5 269 L 540 262.75 M 552.5 269 L 540 269" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 701.76 203.63 L 701.74 191.13 M 695.51 203.63 L 695.49 191.13" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 269px; margin-left: 628px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">billed to</div></div></div></foreignObject><text x="628" y="272" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">billed to</text></switch></g></g></g><g data-cell-id="e_invoices__subscriptions"><g><path d="M 232.25 269 L 372 269" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><ellipse cx="226.75" cy="269" rx="5" ry="5" fill="none" stroke="#64748b" stroke-width="1.5" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 208 275.25 L 220.5 269 L 208 262.75 M 220.5 269 L 208 269" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 365.75 275.25 L 365.75 262.75 M 359.5 275.25 L 359.5 262.75" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 269px; margin-left: 286px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">issued for</div></div></div></foreignObject><text x="286" y="272" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">issued for</text></switch></g></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>

package/skills/linework/examples/billing-er.yaml

@@ -0,0 +1,31 @@
+type: er
+title: Billing schema
+nodes:
+  orgs:
+    label: organizations
+    fields:
+      - id: uuid pk
+      - name: text
+      - plan: text
+  users:
+    fields:
+      - id: uuid pk
+      - org_id: uuid fk
+      - email: text unique
+      - created_at: timestamptz
+  subscriptions:
+    fields:
+      - id: uuid pk
+      - org_id: uuid fk
+      - stripe_id: text unique
+      - status: text
+  invoices:
+    fields:
+      - id: uuid pk
+      - subscription_id: uuid fk
+      - amount_cents: int
+      - paid_at: timestamptz null
+edges:
+  - users }o--|| orgs: belongs to
+  - subscriptions }o--|| orgs: billed to
+  - invoices }o--|| subscriptions: issued for

package/skills/linework/examples/checkout.drawio.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than draw.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" style="background: #FFFFFF; background-color: light-dark(#FFFFFF, #121212);" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="656px" height="1187px" viewBox="0 0 656 1187" content="&lt;mxfile host=&quot;aiviz&quot; agent=&quot;aiviz&quot;&gt;&lt;diagram id=&quot;aiviz&quot; name=&quot;Checkout&quot;&gt;&lt;mxGraphModel grid=&quot;1&quot; gridSize=&quot;8&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; page=&quot;0&quot; background=&quot;#FFFFFF&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&lt;root&gt;&lt;object id=&quot;0&quot; label=&quot;&quot; aiviz_version=&quot;1&quot; aiviz_type=&quot;architecture&quot; aiviz_direction=&quot;auto&quot; aiviz_title=&quot;Checkout&quot;&gt;&lt;mxCell/&gt;&lt;/object&gt;&lt;mxCell id=&quot;1&quot; parent=&quot;0&quot;/&gt;&lt;object id=&quot;vpc&quot; label=&quot;Production VPC&quot; aiviz_type=&quot;group&quot; aiviz_label=&quot;Production VPC&quot; aiviz_auto=&quot;16,341,494,655&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=20;html=1;whiteSpace=wrap;container=1;collapsible=0;fillColor=#F8FAFC;strokeColor=#CBD5E1;strokeWidth=1;dashed=1;dashPattern=4 4;verticalAlign=top;align=left;spacingLeft=14;spacingTop=6;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#64748B;fontStyle=1;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;16&quot; y=&quot;341&quot; width=&quot;494&quot; height=&quot;655&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;data&quot; label=&quot;Data tier&quot; aiviz_type=&quot;group&quot; aiviz_label=&quot;Data tier&quot; aiviz_auto=&quot;20,503,380,132&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=20;html=1;whiteSpace=wrap;container=1;collapsible=0;fillColor=#F8FAFC;strokeColor=#CBD5E1;strokeWidth=1;dashed=1;dashPattern=4 4;verticalAlign=top;align=left;spacingLeft=14;spacingTop=6;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#64748B;fontStyle=1;&quot; vertex=&quot;1&quot; parent=&quot;vpc&quot;&gt;&lt;mxGeometry x=&quot;20&quot; y=&quot;503&quot; width=&quot;380&quot; height=&quot;132&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;user&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;Shopper&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;person&quot; aiviz_label=&quot;Shopper&quot; aiviz_auto=&quot;303,16,160,40&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=16;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#FDF4FF;strokeColor=#C026D3;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;303&quot; y=&quot;16&quot; width=&quot;160&quot; height=&quot;40&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;web&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;Web app&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Next.js&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;client&quot; aiviz_label=&quot;Web app&quot; aiviz_tech=&quot;Next.js&quot; aiviz_auto=&quot;303,168,160,56&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=16;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#F0F9FF;strokeColor=#0284C7;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;303&quot; y=&quot;168&quot; width=&quot;160&quot; height=&quot;56&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;gw&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;API gateway&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Envoy&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;service&quot; aiviz_label=&quot;API gateway&quot; aiviz_tech=&quot;Envoy&quot; aiviz_auto=&quot;287,40,160,56&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=16;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#EEF2FF;strokeColor=#4F46E5;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;vpc&quot;&gt;&lt;mxGeometry x=&quot;287&quot; y=&quot;40&quot; width=&quot;160&quot; height=&quot;56&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;api&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;Checkout API&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Go&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;service&quot; aiviz_label=&quot;Checkout API&quot; aiviz_tech=&quot;Go&quot; aiviz_auto=&quot;287,152,160,56&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=16;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#EEF2FF;strokeColor=#4F46E5;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;vpc&quot;&gt;&lt;mxGeometry x=&quot;287&quot; y=&quot;152&quot; width=&quot;160&quot; height=&quot;56&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;worker&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;Fulfillment worker&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Go&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;service&quot; aiviz_label=&quot;Fulfillment worker&quot; aiviz_tech=&quot;Go&quot; aiviz_auto=&quot;303,386,160,56&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=16;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#EEF2FF;strokeColor=#4F46E5;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;vpc&quot;&gt;&lt;mxGeometry x=&quot;303&quot; y=&quot;386&quot; width=&quot;160&quot; height=&quot;56&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;queue&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;order-events&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Kafka&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;queue&quot; aiviz_label=&quot;order-events&quot; aiviz_tech=&quot;Kafka&quot; aiviz_auto=&quot;303,274,160,56&quot;&gt;&lt;mxCell style=&quot;rounded=1;arcSize=50;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#FFF7ED;strokeColor=#D97706;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;vpc&quot;&gt;&lt;mxGeometry x=&quot;303&quot; y=&quot;274&quot; width=&quot;160&quot; height=&quot;56&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;db&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;Orders&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Postgres&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;database&quot; aiviz_label=&quot;Orders&quot; aiviz_tech=&quot;Postgres&quot; aiviz_auto=&quot;200,40,160,72&quot;&gt;&lt;mxCell style=&quot;shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=8;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#ECFDF5;strokeColor=#059669;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;data&quot;&gt;&lt;mxGeometry x=&quot;200&quot; y=&quot;40&quot; width=&quot;160&quot; height=&quot;72&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;cache&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;Session cache&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Redis&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;cache&quot; aiviz_label=&quot;Session cache&quot; aiviz_tech=&quot;Redis&quot; aiviz_auto=&quot;20,40,160,56&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=16;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#ECFDF5;strokeColor=#059669;strokeWidth=1.5;&quot; vertex=&quot;1&quot; parent=&quot;data&quot;&gt;&lt;mxGeometry x=&quot;20&quot; y=&quot;40&quot; width=&quot;160&quot; height=&quot;56&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;stripe&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;Stripe&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Payments API&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;external&quot; aiviz_label=&quot;Stripe&quot; aiviz_tech=&quot;Payments API&quot; aiviz_auto=&quot;478,1113,160,56&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=16;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#F8FAFC;strokeColor=#94A3B8;strokeWidth=1.5;dashed=1;dashPattern=6 4;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;478&quot; y=&quot;1113&quot; width=&quot;160&quot; height=&quot;56&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;email&quot; label=&quot;&amp;lt;span style=&amp;quot;font-weight:600&amp;quot;&amp;gt;SendGrid&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span style=&amp;quot;font-size:11px;color:#64748B&amp;quot;&amp;gt;Email&amp;lt;/span&amp;gt;&quot; aiviz_kind=&quot;external&quot; aiviz_label=&quot;SendGrid&quot; aiviz_tech=&quot;Email&quot; aiviz_auto=&quot;278,1113,160,56&quot;&gt;&lt;mxCell style=&quot;rounded=1;absoluteArcSize=1;arcSize=16;html=1;whiteSpace=wrap;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=13;fontColor=#0F172A;fillColor=#F8FAFC;strokeColor=#94A3B8;strokeWidth=1.5;dashed=1;dashPattern=6 4;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&lt;mxGeometry x=&quot;278&quot; y=&quot;1113&quot; width=&quot;160&quot; height=&quot;56&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_user__web&quot; label=&quot;browses&quot; aiviz_edge=&quot;user-&amp;gt;web&quot; aiviz_auto=&quot;&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;user&quot; target=&quot;web&quot;&gt;&lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_web__gw&quot; label=&quot;HTTPS&quot; aiviz_edge=&quot;web-&amp;gt;gw&quot; aiviz_auto=&quot;&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;web&quot; target=&quot;gw&quot;&gt;&lt;mxGeometry x=&quot;-0.287&quot; relative=&quot;1&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_gw__api&quot; label=&quot;gRPC&quot; aiviz_edge=&quot;gw-&amp;gt;api&quot; aiviz_auto=&quot;&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;gw&quot; target=&quot;api&quot;&gt;&lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_api__cache&quot; label=&quot;read session&quot; aiviz_edge=&quot;api-&amp;gt;cache&quot; aiviz_auto=&quot;335,559 136,559&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.2;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;api&quot; target=&quot;cache&quot;&gt;&lt;mxGeometry x=&quot;0.308&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&lt;Array as=&quot;points&quot;&gt;&lt;mxPoint x=&quot;335&quot; y=&quot;559&quot;/&gt;&lt;mxPoint x=&quot;136&quot; y=&quot;559&quot;/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_api__db&quot; label=&quot;SQL&quot; aiviz_edge=&quot;api-&amp;gt;db&quot; aiviz_auto=&quot;367,569 249,569 249,829 289,829&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.4;exitY=1;exitDx=0;exitDy=0;entryX=0.333;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;api&quot; target=&quot;db&quot;&gt;&lt;mxGeometry x=&quot;0.087&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&lt;Array as=&quot;points&quot;&gt;&lt;mxPoint x=&quot;367&quot; y=&quot;569&quot;/&gt;&lt;mxPoint x=&quot;249&quot; y=&quot;569&quot;/&gt;&lt;mxPoint x=&quot;249&quot; y=&quot;829&quot;/&gt;&lt;mxPoint x=&quot;289&quot; y=&quot;829&quot;/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_api__stripe&quot; label=&quot;charge&quot; aiviz_edge=&quot;api-&amp;gt;stripe&quot; aiviz_auto=&quot;431,559 489,559 489,1021 558,1021&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.8;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;api&quot; target=&quot;stripe&quot;&gt;&lt;mxGeometry x=&quot;0.838&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&lt;Array as=&quot;points&quot;&gt;&lt;mxPoint x=&quot;431&quot; y=&quot;559&quot;/&gt;&lt;mxPoint x=&quot;489&quot; y=&quot;559&quot;/&gt;&lt;mxPoint x=&quot;489&quot; y=&quot;1021&quot;/&gt;&lt;mxPoint x=&quot;558&quot; y=&quot;1021&quot;/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_api__queue&quot; label=&quot;OrderPlaced&quot; aiviz_edge=&quot;api-&amp;gt;queue&quot; aiviz_auto=&quot;&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;dashed=1;dashPattern=6 4;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.6;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;api&quot; target=&quot;queue&quot;&gt;&lt;mxGeometry x=&quot;0.152&quot; relative=&quot;1&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_queue__worker&quot; label=&quot;consume&quot; aiviz_edge=&quot;queue-&amp;gt;worker&quot; aiviz_auto=&quot;&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;dashed=1;dashPattern=6 4;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;queue&quot; target=&quot;worker&quot;&gt;&lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;/&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_worker__db&quot; label=&quot;update status&quot; aiviz_edge=&quot;worker-&amp;gt;db&quot; aiviz_auto=&quot;373,793 343,793&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.333;exitY=1;exitDx=0;exitDy=0;entryX=0.667;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;worker&quot; target=&quot;db&quot;&gt;&lt;mxGeometry x=&quot;-0.115&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&lt;Array as=&quot;points&quot;&gt;&lt;mxPoint x=&quot;373&quot; y=&quot;793&quot;/&gt;&lt;mxPoint x=&quot;343&quot; y=&quot;793&quot;/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;object id=&quot;e_worker__email&quot; label=&quot;receipt&quot; aiviz_edge=&quot;worker-&amp;gt;email&quot; aiviz_auto=&quot;426,1021 358,1021&quot;&gt;&lt;mxCell style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;arcSize=12;html=1;strokeColor=#64748B;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=7;startArrow=none;fontFamily=-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;fontSize=11;fontColor=#475569;labelBackgroundColor=#FFFFFF;exitX=0.667;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;worker&quot; target=&quot;email&quot;&gt;&lt;mxGeometry x=&quot;0.719&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&lt;Array as=&quot;points&quot;&gt;&lt;mxPoint x=&quot;426&quot; y=&quot;1021&quot;/&gt;&lt;mxPoint x=&quot;358&quot; y=&quot;1021&quot;/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/object&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><rect fill="#FFFFFF" width="100%" height="100%" x="0" y="0" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));"/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="vpc"><g transform="translate(0.5,0.5)"><rect x="16" y="341" width="494" height="655" rx="10" ry="10" fill="#f8fafc" stroke="#cbd5e1" stroke-dasharray="4 4" pointer-events="all" style="fill: light-dark(rgb(248, 250, 252), rgb(21, 23, 25)); stroke: light-dark(rgb(203, 213, 225), rgb(47, 56, 66));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 478px; height: 1px; padding-top: 354px; margin-left: 32px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #64748B; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#64748B, #7e8c9f); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Production VPC</div></div></div></foreignObject><text x="32" y="365" fill="#64748B" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" font-weight="bold" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Production VPC</text></switch></g></g><g data-cell-id="data"><g transform="translate(0.5,0.5)"><rect x="36" y="844" width="380" height="132" rx="10" ry="10" fill="#f8fafc" stroke="#cbd5e1" stroke-dasharray="4 4" pointer-events="all" style="fill: light-dark(rgb(248, 250, 252), rgb(21, 23, 25)); stroke: light-dark(rgb(203, 213, 225), rgb(47, 56, 66));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 364px; height: 1px; padding-top: 857px; margin-left: 52px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #64748B; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#64748B, #7e8c9f); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Data tier</div></div></div></foreignObject><text x="52" y="868" fill="#64748B" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" font-weight="bold" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Data tier</text></switch></g></g><g data-cell-id="db"><g><path d="M 236 892 C 236 887.58 271.82 884 316 884 C 337.22 884 357.57 884.84 372.57 886.34 C 387.57 887.84 396 889.88 396 892 L 396 948 C 396 952.42 360.18 956 316 956 C 271.82 956 236 952.42 236 948 Z" fill="#ecfdf5" stroke="#059669" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(236, 253, 245), rgb(13, 27, 21)); stroke: light-dark(rgb(5, 150, 105), rgb(42, 167, 128));"/><path d="M 396 892 C 396 896.42 360.18 900 316 900 C 271.82 900 236 896.42 236 892" fill="none" stroke="#059669" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(5, 150, 105), rgb(42, 167, 128));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 927px; margin-left: 237px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">Orders</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Postgres</span></div></div></div></foreignObject><text x="316" y="923" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="316" y="923">Orders</tspan><tspan x="316" y="939">Postgres</tspan></text></switch></g></g></g><g data-cell-id="cache"><g><rect x="56" y="884" width="160" height="56" rx="8" ry="8" fill="#ecfdf5" stroke="#059669" stroke-width="1.5" pointer-events="all" style="fill: light-dark(rgb(236, 253, 245), rgb(13, 27, 21)); stroke: light-dark(rgb(5, 150, 105), rgb(42, 167, 128));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 912px; margin-left: 57px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">Session cache</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Redis</span></div></div></div></foreignObject><text x="136" y="908" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="136" y="908">Session cache</tspan><tspan x="136" y="924">Redis</tspan></text></switch></g></g></g></g><g data-cell-id="gw"><g><rect x="303" y="381" width="160" height="56" rx="8" ry="8" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5" pointer-events="all" style="fill: light-dark(rgb(238, 242, 255), rgb(26, 29, 40)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 409px; margin-left: 304px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">API gateway</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Envoy</span></div></div></div></foreignObject><text x="383" y="405" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="383" y="405">API gateway</tspan><tspan x="383" y="421">Envoy</tspan></text></switch></g></g></g><g data-cell-id="api"><g><rect x="303" y="493" width="160" height="56" rx="8" ry="8" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5" pointer-events="all" style="fill: light-dark(rgb(238, 242, 255), rgb(26, 29, 40)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 521px; margin-left: 304px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">Checkout API</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Go</span></div></div></div></foreignObject><text x="383" y="517" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="383" y="517">Checkout API</tspan><tspan x="383" y="533">Go</tspan></text></switch></g></g></g><g data-cell-id="worker"><g><rect x="319" y="727" width="160" height="56" rx="8" ry="8" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5" pointer-events="all" style="fill: light-dark(rgb(238, 242, 255), rgb(26, 29, 40)); stroke: light-dark(rgb(79, 70, 229), rgb(162, 154, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 755px; margin-left: 320px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">Fulfillment worker</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Go</span></div></div></div></foreignObject><text x="399" y="751" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="399" y="751">Fulfillment worker</tspan><tspan x="399" y="767">Go</tspan></text></switch></g></g></g><g data-cell-id="queue"><g><rect x="319" y="615" width="160" height="56" rx="28" ry="28" fill="#fff7ed" stroke="#d97706" stroke-width="1.5" pointer-events="all" style="fill: light-dark(rgb(255, 247, 237), rgb(30, 23, 15)); stroke: light-dark(rgb(217, 119, 6), rgb(197, 113, 16));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 643px; margin-left: 320px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">order-events</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Kafka</span></div></div></div></foreignObject><text x="399" y="639" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="399" y="639">order-events</tspan><tspan x="399" y="655">Kafka</tspan></text></switch></g></g></g></g><g data-cell-id="user"><g><rect x="303" y="16" width="160" height="40" rx="8" ry="8" fill="#fdf4ff" stroke="#c026d3" stroke-width="1.5" pointer-events="all" style="fill: light-dark(rgb(253, 244, 255), rgb(30, 23, 32)); stroke: light-dark(rgb(192, 38, 211), rgb(255, 127, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 36px; margin-left: 304px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">Shopper</span></div></div></div></foreignObject><text x="383" y="40" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));">Shopper</text></switch></g></g></g><g data-cell-id="web"><g><rect x="303" y="168" width="160" height="56" rx="8" ry="8" fill="#f0f9ff" stroke="#0284c7" stroke-width="1.5" pointer-events="all" style="fill: light-dark(rgb(240, 249, 255), rgb(18, 26, 31)); stroke: light-dark(rgb(2, 132, 199), rgb(52, 163, 221));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 196px; margin-left: 304px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">Web app</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Next.js</span></div></div></div></foreignObject><text x="383" y="192" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="383" y="192">Web app</tspan><tspan x="383" y="208">Next.js</tspan></text></switch></g></g></g><g data-cell-id="stripe"><g><rect x="478" y="1113" width="160" height="56" rx="8" ry="8" fill="#f8fafc" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="9 6" pointer-events="all" style="fill: light-dark(rgb(248, 250, 252), rgb(21, 23, 25)); stroke: light-dark(rgb(148, 163, 184), rgb(87, 100, 118));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 1141px; margin-left: 479px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">Stripe</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Payments API</span></div></div></div></foreignObject><text x="558" y="1137" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="558" y="1137">Stripe</tspan><tspan x="558" y="1153">Payments API</tspan></text></switch></g></g></g><g data-cell-id="email"><g><rect x="278" y="1113" width="160" height="56" rx="8" ry="8" fill="#f8fafc" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="9 6" pointer-events="all" style="fill: light-dark(rgb(248, 250, 252), rgb(21, 23, 25)); stroke: light-dark(rgb(148, 163, 184), rgb(87, 100, 118));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 1141px; margin-left: 279px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #0F172A; "><div style="display: inline-block; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#0F172A, #d3daea); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><span style="font-weight:600">SendGrid</span><br /><span style="font-size: 11px; color: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));">Email</span></div></div></div></foreignObject><text x="358" y="1137" fill="#0F172A" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="13px" text-anchor="middle" style="fill: light-dark(rgb(15, 23, 42), rgb(211, 218, 234));"><tspan x="358" y="1137">SendGrid</tspan><tspan x="358" y="1153">Email</tspan></text></switch></g></g></g><g data-cell-id="e_user__web"><g><path d="M 383 56 L 383 157.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 383 166.32 L 380.17 157.82 L 385.83 157.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 112px; margin-left: 383px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">browses</div></div></div></foreignObject><text x="383" y="115" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">browses</text></switch></g></g></g><g data-cell-id="e_web__gw"><g><path d="M 383 224 L 383 370.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 383 379.32 L 380.17 370.82 L 385.83 370.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 280px; margin-left: 383px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">HTTPS</div></div></div></foreignObject><text x="383" y="283" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">HTTPS</text></switch></g></g></g><g data-cell-id="e_gw__api"><g><path d="M 383 437 L 383 482.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 383 491.32 L 380.17 482.82 L 385.83 482.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 465px; margin-left: 383px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">gRPC</div></div></div></foreignObject><text x="383" y="468" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">gRPC</text></switch></g></g></g><g data-cell-id="e_api__cache"><g><path d="M 335 549 L 335 554 Q 335 559 329 559 L 142 559 Q 136 559 136 565 L 136 873.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 136 882.32 L 133.17 873.82 L 138.83 873.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 699px; margin-left: 136px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">read session</div></div></div></foreignObject><text x="136" y="702" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">read session</text></switch></g></g></g><g data-cell-id="e_api__db"><g><path d="M 367 549 L 367 563 Q 367 569 361 569 L 255 569 Q 249 569 249 575 L 249 823 Q 249 829 255 829 L 283.3 829 Q 289.3 829 289.3 835 L 289.28 873.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 289.28 882.32 L 286.45 873.82 L 292.12 873.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 699px; margin-left: 249px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">SQL</div></div></div></foreignObject><text x="249" y="702" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">SQL</text></switch></g></g></g><g data-cell-id="e_api__stripe"><g><path d="M 431 549 L 431 554 Q 431 559 437 559 L 483 559 Q 489 559 489 565 L 489 1015 Q 489 1021 495 1021 L 552 1021 Q 558 1021 558 1027 L 558 1102.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 558 1111.32 L 555.17 1102.82 L 560.83 1102.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1057px; margin-left: 558px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">charge</div></div></div></foreignObject><text x="558" y="1060" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">charge</text></switch></g></g></g><g data-cell-id="e_api__queue"><g><path d="M 399 549 L 399 604.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="9 6" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 399 613.32 L 396.17 604.82 L 401.83 604.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 587px; margin-left: 399px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">OrderPlaced</div></div></div></foreignObject><text x="399" y="590" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">OrderPlaced</text></switch></g></g></g><g data-cell-id="e_queue__worker"><g><path d="M 399 671 L 399 716.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="9 6" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 399 725.32 L 396.17 716.82 L 401.83 716.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 699px; margin-left: 399px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">consume</div></div></div></foreignObject><text x="399" y="702" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">consume</text></switch></g></g></g><g data-cell-id="e_worker__db"><g><path d="M 372.28 783 L 372.29 788 Q 372.3 793 366.3 793 L 348.7 793 Q 342.7 793 342.7 799 L 342.72 873.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 342.72 882.32 L 339.88 873.82 L 345.55 873.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 811px; margin-left: 343px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">update status</div></div></div></foreignObject><text x="343" y="815" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">update status</text></switch></g></g></g><g data-cell-id="e_worker__email"><g><path d="M 425.72 783 L 425.7 1015 Q 425.7 1021 419.7 1021 L 364 1021 Q 358 1021 358 1027 L 358 1102.82" fill="none" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/><path d="M 358 1111.32 L 355.17 1102.82 L 360.83 1102.82 Z" fill="#64748b" stroke="#64748b" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(100, 116, 139), rgb(126, 140, 159)); stroke: light-dark(rgb(100, 116, 139), rgb(126, 140, 159));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1057px; margin-left: 358px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #475569; background-color: #FFFFFF; "><div style="display: inline-block; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: light-dark(#475569, #9ba7b8); line-height: 1.2; pointer-events: all; background-color: light-dark(#FFFFFF, #121212); white-space: nowrap; ">receipt</div></div></div></foreignObject><text x="358" y="1061" fill="#475569" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(71, 85, 105), rgb(155, 167, 184));">receipt</text></switch></g></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>