A diagram engine built for infrastructure networks

Deterministic by construction

The same model lays out identically every time, force-directed included: starting positions are seeded from a hash of the node key rather than a random number generator. A diagram that shifts between runs cannot be regression-tested, and ours is — on every commit.

Cycles do not hang it

Real hydraulic models contain loops: a pond that discharges back upstream through an overflow, a backwash line returning to the head of the plant. Layer assignment is bounded, so a cycle produces a slightly imperfect layer instead of a frozen tab.

Flow direction is a first-class idea

Layouts run left-to-right, top-down, or reversed, because a storm sewer profile reads one way and a notification chain reads another. The orthogonal router keeps pipes on the grid and steps them over each other at crossings.

Editable, not just drawn

Eight resize handles on the selected node, sized in screen pixels so they stay grabbable at any zoom, with the opposite edge pinned and only the dragged edges snapping to the grid. Context menus are real DOM — focusable, keyboard-dismissable, and replaceable wholesale. Labels edit in place through an input element, because text entry needs an IME, selection and clipboard that a canvas caret cannot give you.

Containers that mean something

A group has no coordinates of its own: its box is the union of what it holds, recomputed every frame, so it can never drift away from its contents. Collapse one and the links that crossed its boundary re-attach to the box rather than vanishing — which is what makes a container useful in a review meeting instead of just tidy. Layouts are compound: each container is laid out among its own members first, then stands in as a single box at the level above, so switching to Tree or Force-directed does not turn a grouped model into confetti.

Works with a finger

Pinch to zoom about the midpoint between the fingers, long press for the context menu a tablet has no right button to reach, double tap to edit a label. Resize handles grow to a finger-sized target the moment a touch pointer appears, and the band that starts a link narrows — an accidental link is worse than an accidental move. Embedded diagrams can leave vertical swipes to the page, so a diagram in a long document does not trap the scroll.

Usable without a mouse

Tab walks the nodes in reading order and pans each one into view, releasing focus at the end of the list rather than trapping it. Arrows nudge the selection by one grid cell, or one pixel with Shift, and pan the view when nothing is selected. Copy, cut, paste and duplicate carry the links whose both ends came along, so a pasted sub-network is still a network — and the payload goes to the system clipboard as text, so it survives the trip to another tab.

It leaves the page

PNG at any scale and real vector SVG, both of the whole document rather than whatever is in the viewport — because the deliverable is a report, not a screenshot. Exports render through the same code the screen uses, so there is no second renderer to drift, and selection highlighting is deliberately left out: a node that happened to be selected must not come out highlighted in a submittal.

Nothing to licence

Written in-house, no third-party diagramming code copied, adapted or derived. That removes a per-seat cost from the product and a third-party licence from anyone's diligence checklist.

The whole quickstart

<script src="hydrodiagram.js"></script>
<canvas id="c" width="800" height="400"></canvas>

<script>
  const d = new HydroDiagram.Diagram('c');
  d.model = new HydroDiagram.Model(
    [ { key: 'roof',  text: 'Roof drainage' },
      { key: 'bio',   text: 'Bioretention' },
      { key: 'pond',  text: 'Detention pond' } ],
    [ { from: 'roof', to: 'bio' },
      { from: 'bio',  to: 'pond' } ]
  );
  d.layout('layered');
</script>

That is a working diagram — draggable, routable, exportable. There is no template language and no panel model to learn first.

Already using GoJS? Keep your code

The bundle assigns window.go and implements the surface an integration actually touches: go.GraphObject.make, go.Diagram, go.GraphLinksModel, commandHandler (copy, cut, paste, group, ungroup, collapse), makeImageData and makeSvg. go.Diagram.licenseKey = key works as-is.

That is how HydroComplete moved: the application code was not rewritten. Swap the script tag, keep the diagram code, and the per-developer licence leaves your cost base and your diligence checklist.

It is not the whole of GoJS, and you should find that out in thirty seconds rather than on day two. Run the checker against your source and it reports what is implemented, what is missing, and — the part that actually costs people time — what HydroDiagram accepts and then silently ignores, like routing and table panels.

node gojs-compat-check.cjs ./src

↓ Download the compatibility checker Node, no dependencies, no network. It reads your code, never runs it.

We ran it over all 156 GoJS sample applications and published the result, including the 80% that would not port cleanly: what actually breaks →

One line to install

HydroDiagram.setLicense(key), or go.Diagram.licenseKey = key if you are moving from a library that used that form — same call, so an existing integration does not have to move it. licenseStatus() tells you why a key was refused rather than failing silently.

What enforcement can honestly do

This is client-side, and the library ships as readable JavaScript, so a determined person can remove the check. We are not going to pretend otherwise. What the domain binding does buy is that a key lifted out of one site's bundle is worthless on another, which is the realistic leak.