Hierarchy Flow Visualiser Interactive graph editor for hierarchical structures and directional flows

The Hierarchy Flow Visualiser (Crow Flow) is a browser-based, interactive tool for building and exploring hierarchical node structures connected by animated directional flows. Define your graph using a simple text-based DSL, then pan, zoom, expand, collapse, and rearrange everything on a live canvas.

Quick Start

Get up and running in under a minute:

1. Open the app in any modern browser — no build step or dependencies required.
2. Click ✏️ Edit Graph in the toolbar to open the DSL editor.
3. Type your graph definition using the syntax described below.
4. Click Save & Apply — your graph renders instantly on the canvas.

Here's a minimal example to get started:

# Define hierarchy: A and B are children of Container
A & B > Container

# Define a flow from A through B to an external node
F1= A --> B --> External

# Add attributes to nodes
A{status=live, label="Service A"}
B{status=inprogress}

DSL Syntax

The graph is defined using a lightweight text-based Domain-Specific Language (DSL). The DSL has three line types: hierarchy lines, flow lines, and attribute lines. Blank lines and full-line # or // comments are ignored. A bare identifier declares an isolated node. Invalid syntax or cyclic hierarchies are rejected without replacing the current graph. Hierarchies are limited to 256 levels; flow cycles are supported. Quoted values use JSON string escaping.

Hierarchy Lines

Hierarchy lines define parent–child relationships between nodes using the > operator. The left side contains one or more child nodes (separated by &), and the right side is the parent node.

# Single child inside a parent
Worker > Service

# Multiple children inside a parent (use & to separate)
API & DB & Cache > Backend

# Chained nesting: A & B inside C, and C inside D
A & B > C
C > D

# Multi-level in one line: X inside Y inside Z
X > Y > Z

Flow Lines

Flow lines define directional connections between nodes using the --> arrow operator. Flows are rendered as thick, animated Sankey-style ribbons on the canvas.

# Simple flow: A connects to B
F1= A --> B

# Chained flow: A to B to C to D
Pipeline= Source --> Transform --> Load --> Sink

# Multi-source: A and B both flow into C
Merge= A & B --> C

# Multi-target: A flows to both B and C
Split= A --> B & C

A --> |blah| B adds a segment label, equivalent to -->{label=blah}. Use JSON quoting for literal pipes, quotes or escapes: A --> |"a | b, = {x}"| B. Malformed labels leave the live graph untouched.

A <--> B is bidirectional and has the same routing and connectivity as B <--> A, including merged/collapsed routes. Both ends attach in the upper half of left/right sides (left half of top/bottom sides). The Arrowheads setting controls both ends. Labels and arrow kinds survive DSL serialization and SVG/PNG export.

Attribute Lines

Attributes are key-value pairs attached to nodes or flows. They are used for labelling, styling (status/color), and storing arbitrary metadata. Attributes are defined using curly braces {} after a node or flow ID.

# Node attributes
api{status=live, label="API Gateway", owner="team-alpha"}

# Flow attributes
F1{mode=batch, label="Daily ETL"}

# Custom color (hex without #)
alerts{color=ff6b6b, label="Alert Service"}

# Values with spaces must be quoted
db{label="Main Database", type=postgres}

Inline Flow Attributes

Flow attributes can be defined inline on the flow definition line, between the ID and the = sign. This is the most common way to define flow attributes.

# Inline attributes on a named flow
ETL{mode=batch, label="Nightly ETL"}= Source --> Transform --> Warehouse

# Inline attributes on an anonymous flow (use _ as ID)
_{name="events", mode=batch}= Producer --> Queue --> Consumer

# Status-colored flow
DataSync{status=live}= Primary --> Replica

Anonymous Flows

Flows don't require an explicit ID. You can use _ as the ID for anonymous flows, or omit the ID= prefix entirely for quick connections.

# Anonymous flow with underscore prefix
_= A --> B

# Fully anonymous — no ID or = needed
X --> Y --> Z

# Anonymous with inline attributes
_{mode=batch}= Upstream --> Downstream

Multi-Path & Branching Flows

A single flow definition can describe multiple paths using & for branching and commas for separate path segments.

# Fan-in: multiple sources merge into one target
Ingest= Kafka & S3 & API --> Processor

# Fan-out: one source splits into multiple targets
Fanout= Router --> ServiceA & ServiceB & ServiceC

# Comma-separated paths (multiple independent segments in one flow)
Mixed= A --> B, C --> D

# Complex: chain + fan-in + fan-out in a single flow
Pipeline= Src1 & Src2 --> Merge --> Out1 & Out2

Canvas Interaction

The canvas is fully interactive. You can pan, zoom, select, and drag elements freely using mouse and keyboard controls.

Expand & Collapse

Nodes that contain children (defined via hierarchy lines) are container nodes. Initially, all containers are collapsed — showing as a regular node with a small ▶ indicator.

• Double-click a container node to expand it. Children are laid out inside the parent boundary.
• Double-click an expanded container to collapse it back down.
• Child positions are preserved when collapsing — re-expanding restores the same layout.
• Expanding a node automatically shifts adjacent nodes to avoid overlapping.
• Use Collapse All in the toolbar to collapse every expanded container at once.

# Create a two-level hierarchy
Worker1 & Worker2 > Pool
Pool & Scheduler > Backend

# Flows between nested nodes
Work= Scheduler --> Worker1 & Worker2

Repeated expand/collapse toggles restore exact prior geometry, including nested expansion states, affected neighbors and X-axis layouts, unless intentional geometry/hierarchy/settings changes intervene. No-op toggles do nothing. Moving an unpinned collapsed container translates its saved child layout.

Pinning Nodes

Select a node and use Pin node / Unpin node in Properties or Pin position / Unpin position in its context menu. A 📌 marks explicit pins; Properties explains inherited anchors and blocked ancestors. Pins are undoable and saved.

A pin fixes world-space top-left, overriding drag, neighbor shifts, re-layout and X-axis moves. A pinned container anchors initialized descendants, including collapsed ones; unpositioned descendants still receive their first layout on expansion. An ancestor containing a pin cannot translate, but may resize around its children; unpinned siblings may move. Expand/collapse can change dimensions, not pinned anchors. Intentional hierarchy edits and deletion remain available. Constraints take priority over avoiding overlap; unpin before rearranging an anchored subtree.

Perspectives

The always-visible Perspective toolbar dropdown selects named per-scenario views; All removes perspective dimming. Use Manage… beside it to create, rename or delete views. With a named view active, right-click a node, selected nodes or a link to Add to perspective or Remove from perspective. Link actions affect the clicked segment (or the segments represented by a merged ribbon), not unrelated hops in the same flow. These actions support undo and save automatically. Separate All nodes and All links / segments lists include collapsed descendants and every hop. Unchecked elements dim, never hide. Nodes, children and connected segments have independent inclusion. Merged ribbons split by inclusion. Explicitly hidden intermediate nodes still bypass normally; a bypass is included when any contributing segment is included.

New elements default included; removed references are pruned. UI node renames, label/attribute edits and serialization preserve membership. DSL flow renames/anonymous renumbering preserve unique endpoint/direction matches. Arbitrary DSL node replacement and ambiguous duplicates count as new items. Perspectives and the active choice survive undo, switching, cloning, reload and local/cloud saves.

Flow Animation

Flows animate with moving dashes to indicate direction of data/control travel. The animation style depends on the flow's mode attribute:

• Stream mode (default) — small dashes move along the center of the ribbon.
• Batch mode (mode=batch) — wide block segments move along the ribbon, visually representing chunks of data.

# Default streaming flow
Realtime= Events --> Processor --> Dashboard

# Batch flow with block animation
ETLFlow{mode=batch}= Database --> ETL --> Warehouse

Animation speed is configurable through the Settings dropdown in the toolbar. Set speed to 0 to pause all animation.

Flow Merging

When multiple flows share the same visual endpoints (e.g. because their actual endpoints are children of the same collapsed container), they are merged into a single thicker ribbon. The ribbon thickness scales with the number of merged flows.

Flows with different colors or modes remain separate ribbons even when sharing the same endpoints. Expanding the container separates the flows to show their actual individual connections.

Attributes Panel

The right-hand Properties panel displays attributes of the currently selected node or flow. From this panel you can:

• View all attributes as key-value pairs.
• Edit any attribute value inline.
• Add new attributes using the + button.
• Remove attributes using the ✕ button.
• Change colors via the color picker.

Changes made in the Properties panel are automatically reflected in the DSL and persisted with your current scenario.

Node Icons

Set a node's icon attribute to an SVG URL to display a small icon on its left side. Add bigicon=1 for a square node with a large icon above its label.

In the Properties panel, click Icon beside the icon attribute to open the icon picker. Search or browse folders, select an icon to preview it, then click Use Icon.

WebServer{icon="/static/Icons/Azure_Public_Icons/compute/10021-icon-service-Virtual-Machine.svg", label="Web Server"}
Database{bigicon=1, icon="/static/Icons/Azure_Public_Icons/databases/10130-icon-service-SQL-Database.svg", label="SQL DB"}

Status Colors

Setting the status attribute on a node or flow applies automatic color coding. The following status values are recognized:

# Color flows by status
_{status=live}= api --> existingfeature
_{status=inprogress}= api --> featureindev
_{status=tostart}= api --> futurefeature

Custom Colors

You can assign any hex color to a node or flow using the color attribute (without the # prefix). Custom colors override status colors.

# Red node
Alerts{color=ff6b6b}

# Purple flow
Events{color=9b59b6}= Producer --> Consumer

# Teal container
Infra{color=00bcd4, label="Infrastructure"}

Filtering

The Filter field in the toolbar lets you search and highlight nodes and flows by their attributes, IDs, or labels. Non-matching items are dimmed, making it easy to focus on specific parts of the graph.

The filter matches against:

• Node and flow IDs
• Attribute keys and values (e.g. status=live)
• Labels/names (label and name attributes)

# Show only live items
status=live

# Filter by a label substring
gateway

# Filter by node ID
api

# Filter by any attribute value
team-alpha

Highlight Connections

Enable Highlight Connections in the Settings dropdown, then click any node. All upstream and downstream connected nodes and flows are highlighted, while unrelated items are dimmed. This provides a quick view of data lineage and dependencies.

• Traverses the full flow graph in both directions (upstream and downstream).
• Works with multi-select — highlight connections for multiple selected nodes simultaneously.
• Parent containers of highlighted nodes are also highlighted.

Scenarios

Scenarios let you maintain multiple independent graph configurations. Each scenario stores its own DSL text and node positions. Scenarios are persisted in browser localStorage and survive page reloads.

Click Scenario in the toolbar to open the Scenario Organization dialog. Use the search field to filter scenarios by name across the Local and Remote sections:

Cloud synchronization and recovery

Google login enables cloud sync. Cloud caches are separated by account; local scenarios are shared within the browser profile. Existing caches whose account owner is unknown are preserved as detached local recovery scenarios, and cloud copies are fetched separately.

Newer cloud revisions are fetched on login, window focus, and reconnect. Unapplied DSL drafts are not overwritten by refresh. If another device changed the diagram, your edits are preserved as a separate conflict copy rather than overwriting remote work.

Deleting a cloud scenario removes its active server listing; unlinking leaves a local copy. Version history and deletion markers remain on the server. Opening a shared link always creates a new scenario and never overwrites an existing Default diagram.

Undo histories are independent for each scenario. Keep exports/backups of important diagrams, especially before clearing browser storage.

Share Link

Choose Export → Share in the toolbar to generate a shareable URL encoding the current DSL. Click Copy to copy it to your clipboard. No login is required to open a shared diagram.

The link is a snapshot: later edits are not reflected in it. Opening a link creates a new scenario without overwriting existing diagrams. Do not share confidential information through these URLs.

Export and JSON backups

Export → Download JSON saves a complete portable graph: DSL, all nodes/links, hierarchy/attributes, positions/sizes, expansion states, nested offsets, pins, perspectives/active view, viewport and graph layout/routing settings. Account/cloud IDs, revisions and organizer metadata are excluded; user-authored graph attributes remain.

Load JSON validates this versioned format (up to 5 MB), including graph/DSL consistency and geometry, then creates a new local scenario. Invalid files leave the live graph untouched. Use JSON for full-fidelity backups; Download DSL and Share are DSL-only, without positions, pins or perspectives. SVG/PNG retain labels, two-ended arrows and perspective dimming. SVG, PNG and PPTX exports remain in the Export menu.

DSL Editor

Open Edit Graph and choose Dock left or Undock to switch between a left panel and floating editor. Drag the dock's right edge or floating editor's bottom-left handle to resize. The canvas resizes and stays interactive; closing a dock releases its space. Docking is a browser preference, independent of scenarios. Apply keeps the editor open; Apply & Close closes it. Cancel discards the draft. Invalid DSL never replaces the live graph.

X-Axis Layout

Position nodes horizontally using a numeric or datetime attribute for a timeline or quantitative view.

1. In Settings, set X-Axis Attribute to the node attribute to use, such as day.
2. Select Int, Float, or Datetime. For Datetime, also set the date format.
3. Click Re-layout. The dialog shows the matching node count and value range.
4. Choose Screen widths for full range and click Apply Layout.

Nodes without that attribute are laid out in a separate column to the right. The layout respects Snap Grid.

Light & Dark Theme

Toggle between light and dark color schemes using the 🌙 Theme / ☀️ Theme button in the toolbar. The theme affects the entire UI including the canvas background, nodes, flows, toolbar, panels, and minimap.

Minimap

A minimap is displayed in the bottom-left corner of the canvas. It shows:

• A bird's-eye overview of all nodes and flows.
• A blue rectangle indicating the current viewport.
• Click anywhere on the minimap to navigate to that area.
• Click and drag on the minimap for continuous navigation.

Snap Grid

Enable Snap Grid in the Settings dropdown to activate a visible grid and snap node positions to a 20px grid. This helps create neatly aligned layouts.

Controls Reference

Full DSL Example

Here's a comprehensive example combining all DSL features:

# ─── Hierarchy ───
API & Auth > Gateway
Users & Orders & Payments > Services
Postgres & Redis > DataLayer
Kafka & S3 > Messaging

# ─── Flows ───
Traffic{status=live, label="HTTP Traffic"}= Client --> API --> Auth

UserFlow= Auth --> Users --> Postgres
OrderFlow= Auth --> Orders --> Postgres
PayFlow= Orders --> Payments

_{mode=batch, label="Events"}= Services --> Kafka --> S3

Cache= Users & Orders --> Redis
Monitoring --> Gateway & Services & DataLayer

# ─── Node Attributes ───
Client{label="Web Client", status=live}
Gateway{label="API Gateway", status=live}
Services{label="Microservices", status=live}
DataLayer{label="Data Layer", status=live}
Messaging{label="Message Bus", status=inprogress}
Monitoring{label="Monitoring", color=9b59b6}

Status Colors Reference

Node Status Colors

Flow Status Colors

Flow Modes

# Streaming (default)
Live= SensorA --> Aggregator

# Batch processing
Nightly{mode=batch, label="Nightly Sync"}= DB --> Warehouse

Toolbar Reference

Hierarchy Flow Visualiser (Crow Flow) — Built with vanilla HTML, CSS & JavaScript. No external dependencies.
© 2025–2026