Processing pipeline

Walk through ordered transformations.

Visual 94/100Edit 96/100Balanced 95/100Editorial baseline · revision 1

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": "Processing pipeline",
  "description": "Explain how input passes through a sequence of processing stages. All values are illustrative example data.",
  "elements": [
    {
      "type": "text",
      "x": 36,
      "y": 39,
      "text": "From source to searchable",
      "size": 17,
      "fill": "ink",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 36,
      "y": 62,
      "text": "A four-stage ingestion pipeline",
      "size": 11,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "line",
      "x": 173,
      "y": 186,
      "x2": 206,
      "y2": 186,
      "arrow": true,
      "dashed": false,
      "stroke": "rule"
    },
    {
      "type": "box",
      "x": 36,
      "y": 153,
      "w": 136,
      "h": 66,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 104,
      "y": 180,
      "text": "Extract",
      "size": 15,
      "fill": "ink",
      "align": "middle",
      "mono": false
    },
    {
      "type": "text",
      "x": 104,
      "y": 202,
      "text": "files + URLs",
      "size": 11,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "text",
      "x": 104,
      "y": 258,
      "text": "01",
      "size": 12,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "line",
      "x": 343,
      "y": 186,
      "x2": 376,
      "y2": 186,
      "arrow": true,
      "dashed": false,
      "stroke": "rule"
    },
    {
      "type": "box",
      "x": 206,
      "y": 153,
      "w": 136,
      "h": 66,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 274,
      "y": 180,
      "text": "Normalize",
      "size": 15,
      "fill": "ink",
      "align": "middle",
      "mono": false
    },
    {
      "type": "text",
      "x": 274,
      "y": 202,
      "text": "clean text",
      "size": 11,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "text",
      "x": 274,
      "y": 258,
      "text": "02",
      "size": 12,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "line",
      "x": 513,
      "y": 186,
      "x2": 546,
      "y2": 186,
      "arrow": true,
      "dashed": false,
      "stroke": "rule"
    },
    {
      "type": "box",
      "x": 376,
      "y": 153,
      "w": 136,
      "h": 66,
      "fill": "soft",
      "stroke": "accent",
      "dashed": false
    },
    {
      "type": "text",
      "x": 444,
      "y": 180,
      "text": "Embed",
      "size": 15,
      "fill": "ink",
      "align": "middle",
      "mono": false
    },
    {
      "type": "text",
      "x": 444,
      "y": 202,
      "text": "vectors",
      "size": 11,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "text",
      "x": 444,
      "y": 258,
      "text": "03",
      "size": 12,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "box",
      "x": 546,
      "y": 153,
      "w": 136,
      "h": 66,
      "fill": "surface",
      "stroke": "rule",
      "dashed": false
    },
    {
      "type": "text",
      "x": 614,
      "y": 180,
      "text": "Index",
      "size": 15,
      "fill": "ink",
      "align": "middle",
      "mono": false
    },
    {
      "type": "text",
      "x": 614,
      "y": 202,
      "text": "search ready",
      "size": 11,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "text",
      "x": 614,
      "y": 258,
      "text": "04",
      "size": 12,
      "fill": "muted",
      "align": "middle",
      "mono": true
    },
    {
      "type": "line",
      "x": 48,
      "y": 302,
      "x2": 672,
      "y2": 302,
      "arrow": false,
      "dashed": false,
      "stroke": "rule"
    },
    {
      "type": "text",
      "x": 48,
      "y": 328,
      "text": "Input: documents",
      "size": 11,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 672,
      "y": 328,
      "text": "Output: search index",
      "size": 11,
      "fill": "muted",
      "align": "end",
      "mono": true
    }
  ]
}

Review this diagram

Your scores and review history stay in this browser. Export reviews to propose a catalog update. Read the rubric.

Use this when

Explain how input passes through a sequence of processing stages.

Choose another form when

Stages run in parallel or loop back.

Built from

Node Connector Label

A single reading direction and reusable steps make this a dependable baseline.

Initial editorial assessment by Codex · 2026-09-07. Scores are judgments about this example, not a benchmark of AI capability.

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 ↗