A flowchart revised

A flow diff. A step is renamed, an audit log is added, the Reject step is removed and one edge turns solid; the unchanged steps keep their rows and their order.

A step is renamed, an audit log is added, the Reject step is removed and one edge turns solid; the unchanged steps keep their rows and their order

                                                    ╭────────╮
                                                    │ Start  │
                                                    ╰────────╯
                                                         │
                                                         │
                                                         ▼
                                                  ┌────────────┐
                                                  │ Read input │
                                                  └────────────┘
                                                         │
                                                         │
                                                         ▼
                                                  ┌────────────┐
                                                  │ ◇ Valid? ◇ │
                                                  └────────────┘
                                                  yes ┃    ┊
                                                      ┃    ┊
                           ┌━━━━━━━━━━━━━━━━━━━━━━━━━━┘    ┊
                           ┃                               ┊
  ┌─ Backend ──────────────┼─────────────────────────┐     ┊
  │                        ▼                         │     ┊
  │                ┌──────────────┐                  │     ┊
  │                │ ~ Transform  │                  │     ┊
  │                └──────────────┘                  │     ┊
  │                 ▲      │   │ log                 │     ┊
  │                 │      │   │                     │     ┊
  │          ┌──────┘  ┌───┘   └───────────┐         │     ┊
  │          │         │ write             ▼         │     ┊
  │  ┌───────┼ Storage ┼─────┐     ╒══════════════╕  │     ┊
  │  │       ▼         │     │     │ + Audit log  │  │     ┊
  │  │  ┌────────┐     │     │     └──────────────┘  │     ┊
  │  │  │ Cache  │     │     │                       │     ┊
  │  │  └────────┘     │     │                       │     ┊
  │  │       ┊         │     │                       │     ┊ no
  │  │       ┊         │     │                       │     ┊
  │  │       └┈┈┈┈┐    │     │                       │     ┊
  │  │            ┊    ▼     │                       │     ┊
  │  │         ╒══════════╕  │                       │     ┊
  │  │         │ Database │  │                       │     ┊
  │  │         └──────────┘  │                       │     ┊
  │  └───────────────┼───────┘                       │     ┊
  └──────────────────┼───────────────────────────────┘     ┊
                     │                                     ┊
                     │                                     ┊
                     ▼                                     ┊
                 ╭──────╮                                  ┊
                 │ Done │                                  ┊
                 ╰──────╯                                  ┊
                     ▲                                     ┊
                     ╎                                     ┊
                     └╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┐    ┊
                                                      ╎    ▼
                                                   ┌──────────┐
                                                   │ - Reject │
                                                   └──────────┘

flow.json → flow-v2.json
added: node Audit log
added: edge Transform -> Audit log
removed: node Reject
removed: edge Valid? -> Reject
removed: edge Done -> Reject
changed: node Transform: label "Process" → "Transform"
changed: edge Read input -> Valid?: style dashed → solid

The version before the change: Start, Read input, Valid?, Process, Cache, Database, Reject and Done. — Before

The version after the change: Start, Read input, Valid?, Transform, Cache, Database, Audit log and Done. — After

Spec

{
  "type": "flow",
  "title": "Showcase",
  "direction": "DOWN",
  "ignore": ["shape-soup"],
  "nodes": [
    {"id": "start", "label": "Start", "shape": "rounded", "color": "blue"},
    {"id": "input", "label": "Read input", "shape": "parallelogram", "color": "purple"},
    {"id": "check", "label": "Valid?", "shape": "diamond", "color": "yellow"},
    {"id": "proc", "label": "Process"},
    {"id": "cache", "label": "Cache", "shape": "hexagon", "color": "orange"},
    {"id": "db", "label": "Database", "shape": "cylinder", "color": "green"},
    {"id": "err", "label": "Reject", "color": "red"},
    {"id": "done", "label": "Done", "shape": "circle", "color": "gray"}
  ],
  "edges": [
    {"id": "e-start-input", "from": "start", "to": "input"},
    {"id": "e-input-check", "from": "input", "to": "check", "style": "dashed"},
    {"id": "e-check-proc", "from": "check", "to": "proc", "label": "yes", "style": "thick"},
    {
      "id": "e-check-err",
      "from": "check",
      "to": "err",
      "label": "no",
      "style": "dotted",
      "color": "red"
    },
    {"id": "e-proc-cache", "from": "proc", "to": "cache", "direction": "both"},
    {"id": "e-proc-db", "from": "proc", "to": "db", "label": "write"},
    {"id": "e-cache-db", "from": "cache", "to": "db", "direction": "none", "style": "dotted"},
    {"id": "e-db-done", "from": "db", "to": "done"},
    {"id": "e-err-done", "from": "done", "to": "err", "direction": "backward", "style": "dashed"}
  ],
  "groups": [
    {"id": "backend", "label": "Backend", "contains": ["proc", "store"]},
    {"id": "store", "label": "Storage", "contains": ["cache", "db"], "color": "green"}
  ]
}

{
  "type": "flow",
  "title": "Showcase v2",
  "direction": "DOWN",
  "ignore": ["shape-soup"],
  "nodes": [
    {"id": "start", "label": "Start", "shape": "rounded", "color": "blue"},
    {"id": "input", "label": "Read input", "shape": "parallelogram", "color": "purple"},
    {"id": "check", "label": "Valid?", "shape": "diamond", "color": "yellow"},
    {"id": "proc", "label": "Transform"},
    {"id": "cache", "label": "Cache", "shape": "hexagon", "color": "orange"},
    {"id": "db", "label": "Database", "shape": "cylinder", "color": "green"},
    {"id": "audit", "label": "Audit log", "shape": "cylinder", "color": "purple"},
    {"id": "done", "label": "Done", "shape": "circle", "color": "gray"}
  ],
  "edges": [
    {"id": "e-start-input", "from": "start", "to": "input"},
    {"id": "e-input-check", "from": "input", "to": "check", "style": "solid"},
    {"id": "e-check-proc", "from": "check", "to": "proc", "label": "yes", "style": "thick"},
    {"id": "e-proc-cache", "from": "proc", "to": "cache", "direction": "both"},
    {"id": "e-proc-db", "from": "proc", "to": "db", "label": "write"},
    {"id": "e-cache-db", "from": "cache", "to": "db", "direction": "none", "style": "dotted"},
    {"id": "e-proc-audit", "from": "proc", "to": "audit", "label": "log"},
    {"id": "e-db-done", "from": "db", "to": "done"}
  ],
  "groups": [
    {"id": "backend", "label": "Backend", "contains": ["proc", "store", "audit"]},
    {"id": "store", "label": "Storage", "contains": ["cache", "db"], "color": "green"}
  ]
}

Draw it yourself

diago diff flowchart-change.v1.json flowchart-change.v2.json > flowchart-change.diff.svg

Open it in the playground to edit it in your browser.