Diagram View Revamp

Customer problem

The single most-cited complaint was not a preference. It was a hard block. Flows containing stages would not render in diagram view at all:

Tried to show this to a client and none of their flows will diagram because of the error: “Diagram view is unavailable… Flow stages present”… So ServiceNow says to add stages to Catalog Item flows as a best practice, but then prevents their diagrammer from working under those conditions?

ServiceNow Community

Four more complaints sat behind it.

• Complex flows become unreadable spaghetti.
• Debugging is a nightmare, because execution detail hides behind an undiscoverable system property.
• Moving over from Classic Workflow is hard work. It is great for basic, easy stuff, but… tough trying to do anything beyond the basics.
• Decision Tables are so hidden that experts have to point people to them in forum replies. I didn’t know that was an option!

A note on method. The three research documents are not the same kind of evidence. The pain-point synthesis is secondary research: a curated compilation of public Community posts, support threads and documentation from 2023–2025, verbatim or lightly edited. It is a strong signal of what users complain about in public. It is not a substitute for interviews or telemetry. Validating it against internal BT1 data is a named next step in the doc itself.

The brief

Personas

Solution

1. Stages become a native node type inside the canvas. Not a compatibility toggle, not a separate mode. The path is Add a node, then Add to flow, where Stage now joins Action, Flow Logic and Subflow. Pick an existing stage or create one with a name, value and duration. It then sits inline in the diagram as a distinct flagged node with its own properties panel. This is the clearest research-to-design line in the project: the most-cited blocker, answered verbatim.
2. Search on the canvas. Typeable the moment you land. Matches highlight, non-matches dim, up and down step through results, and Cmd-F re-triggers it. Michel wanted it a pervasive element, it never goes away. The team declined to auto-focus it by default, unless we find that people are screaming for it.
3. Snap-to-connector reordering. The first pass drew self-critique: there’s too many steps when it comes to reordering a node. Now you drag near a connector, the original position fades, and releasing snaps the node in. It stays consistent with the natural-language view, which already shows valid drop targets rather than allowing a drop anywhere.
4. Expand and collapse of branch nodes, the most contested item. It answers the top competitive gap and the spaghetti complaint directly. The execution did not survive review. Michel: It wasn’t clear to me that it was branches that we were collapsing and expanding. It felt like any node could collapse and expand anything downstream. Sravya raised a dark-theme accessibility concern on top of that: in the dark theme, it’s even, like, more hidden. Left explicitly open rather than shipped weak.
5. Node detail as tabs in a side panel. Not a bottom panel, which makes for a long drag when a data pill has to cross a wide screen. And deliberately not a copy of n8n’s input/output bookending. That pattern serves step-level unit testing, which this architecture cannot do yet: our testing is not with mock data. We actually insert records onto the instance. The capability is targeted for V3. Piyush named the principle: N8n could be our inspiration, but we don’t need to be a copycat… it’s okay to take inspiration, but not really copy them.
6. Toolbox drag-and-drop, deferred past V1. I argued for it on near-universal industry convention. The product owner cut it on Lit.js migration timelines: keep the designs up, Neomi, but first phase… we might want to remove the top left kind of that standalone thing. Deferred, not rejected.
7. A lighter alternative to “convert to subflow”. A temporary, annotated visual grouping. Window-select several nodes, describe the group, then collapse and expand it for readability, without creating a real subflow record. Same comprehension benefit, none of the data-model weight. Proposed, undecided.

The live V1 prototype

The V1 prototype, running here rather than described. Search the canvas, collapse and expand the branches, switch between canvas and list view, turn the Global Error Handler on, and try it in both themes.

This is the real prototype file, embedded unchanged. It is self-contained — no network calls — so it behaves the same offline as it does here.

Captured from the prototype

Five states pulled from the live V1 prototype below — the ones that answer the questions the design sync left open. Step through them, or drive the prototype yourself.

01/5

User flows

KPIs

Presented honestly as in-progress. These are targets set against the competitive benchmark, not outcomes. The V1 prototype was still being built at the last sync.

Still open

Two of the items the July sync left open have moved, and the prototype above is the evidence rather than a claim about it.

• Collapse and expand discoverability: addressed. Michel’s objection was that it was not clear branches were the thing collapsing. The badge now says so on hover: 2 branches, click to collapse. It names the unit and the action, and carries the count.
• Error-handling visualisation: explored. It was listed as untouched: I haven’t explored yet… this is the next thing I will be tackling. The prototype now puts the Global Error Handler on its own canvas beside the main workflow, behind a toggle, with its own ERROR group in the data rail. The path reads “Any Step Fails” then “Capture Context”.
• Dark theme: still open. Whether the collapse affordance holds up there was Sravya’s separate concern. Both themes are now buildable side by side, so it is testable rather than theoretical.
• Live execution overlay. Blocked on separate engineering work: the execution page’s own Lit.js migration, currently deprioritised.
• The visual palette. Not yet tied to an approved design-system library. A follow-up with the design-systems team is planned before it locks in.
• Convert to subflow. Whether it ships at all, against the lighter temporary grouping above.