Service architecture

Show the boundaries and connections in a small system.

Live SVG · all content is illustrative

Edit labels & content

Change the text directly. Use the scene editor to move or add elements.

Edit individual elements

Choose a shape or text element, then change its properties. Related labels and connectors have separate coordinates.

Element

New element type

Edit scene JSON

Change positions, dimensions, paths, and labels. Apply validates the scene before changing the preview. Primitive reference ↗

Scene source

{
  "version": 1,
  "width": 720,
  "height": 400,
  "title": "Service architecture",
  "description": "Explain a request moving from a client through services to storage. All values are illustrative example data.",
  "elements": [
    {
      "type": "text",
      "x": 36,
      "y": 39,
      "text": "A request, end to end",
      "size": 17,
      "fill": "ink",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 36,
      "y": 62,
      "text": "HTTPS → application → persistence",
      "size": 11,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "box",
      "x": 240,
      "y": 92,
      "w": 240,
      "h": 264,
      "fill": "soft",
      "stroke": "rule",
      "dashed": true
    },
    {
      "type": "text",
      "x": 262,
      "y": 118,
      "text": "Application boundary",
      "size": 11,
      "fill": "muted",
      "align": "start",
      "mono": false
    },
    {
      "type": "line",
      "x": 190,
      "y": 212,
      "x2": 276,
      "y2": 212,
      "arrow": true,
      "dashed": false,
      "stroke": "rule"
    },
    {
      "type": "line",
      "x": 420,
      "y": 212,
      "x2": 506,
      "y2": 147,
      "arrow": true,
      "dashed": false,
      "stroke": "rule"
    },
    {
      "type": "line",
      "x": 420,
      "y": 212,
      "x2": 506,
      "y2": 279,
      "arrow": true,
      "dashed": false,
      "stroke": "rule"
    },
    {
      "type": "box",
      "x": 46,
      "y": 180,
      "w": 144,
      "h": 66,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 118,
      "y": 207,
      "text": "Web client",
      "size": 15,
      "fill": "ink",
      "align": "middle",
      "mono": false
    },
    {
      "type": "text",
      "x": 118,
      "y": 229,
      "text": "browser",
      "size": 11,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "box",
      "x": 276,
      "y": 180,
      "w": 144,
      "h": 66,
      "fill": "soft",
      "stroke": "accent",
      "dashed": false
    },
    {
      "type": "text",
      "x": 348,
      "y": 207,
      "text": "API gateway",
      "size": 15,
      "fill": "ink",
      "align": "middle",
      "mono": false
    },
    {
      "type": "text",
      "x": 348,
      "y": 229,
      "text": "/v1/events",
      "size": 11,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "box",
      "x": 510,
      "y": 114,
      "w": 144,
      "h": 66,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 582,
      "y": 141,
      "text": "Postgres",
      "size": 15,
      "fill": "ink",
      "align": "middle",
      "mono": false
    },
    {
      "type": "text",
      "x": 582,
      "y": 163,
      "text": "primary store",
      "size": 11,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "box",
      "x": 510,
      "y": 246,
      "w": 144,
      "h": 66,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 582,
      "y": 273,
      "text": "Queue",
      "size": 15,
      "fill": "ink",
      "align": "middle",
      "mono": false
    },
    {
      "type": "text",
      "x": 582,
      "y": 295,
      "text": "async jobs",
      "size": 11,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "text",
      "x": 202,
      "y": 193,
      "text": "request",
      "size": 10,
      "fill": "muted",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 447,
      "y": 145,
      "text": "write",
      "size": 10,
      "fill": "muted",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 447,
      "y": 292,
      "text": "publish",
      "size": 10,
      "fill": "muted",
      "align": "start",
      "mono": false
    }
  ]
}

Review this diagram

These ratings help you compare how an example looks and how much work it takes to change. They are initial assessments of the example, not guarantees of correctness.

Appearance 92/100Ease of changes 94/100Overall 93/100Initial assessment

Your scores and review history stay in this browser. Export reviews to keep a copy. Read the rubric.

Use this when

Explain a request moving from a client through services to storage.

Choose another form when

You need to show timing, retries, or more than twelve services.

Built from

Boundary Node Connector Label

Few aligned nodes; labels and boundaries can change without rerouting most edges.

This example uses explicit positions. Check labels and connections after changing its content.

Give your agent this reference

Use the example to show your agent the form you want. Describe your system or provide your source material, then ask it to generate an adapted diagram and inspect the result.

Includes the reference URL, current scene, and settings. Paste it into your own agent.

Read the agent workflow ↗

Take the source

The SVG is self-contained. The JSON preserves editable primitives and your presentation settings. Labels remain text; shapes remain vectors.

Original scene JSON ↗
Controls, limits, and embedding ↗