Hidden State
In complex diagrams, users often need to implement advanced interactions such as "filtering" or "collapsing" specific views. Instead of destructive splice operations on your node/edge collections — which would lose spatial coordinates and configurations — Flow provides a non-destructive hidden attribute.
Toggle Visibility Demo
Use the checkbox in the toolbar below to observe how specific elements vanish from the viewport while remaining part of the internal graph state.
Why use hidden?
Using a hidden flag is superior to deleting items from your state array. It preserves the mathematical integrity of the graph (positions, dimensions, relationships) allowing you to restore them instantly without re-calculating layouts.
| Field | Target | Description |
|---|---|---|
Node.hidden | Single Node | When true, the node is skipped during the render cycle. Its coordinates remain preserved. |
Edge.hidden | Single Edge | When true, the standard SVG path is not drawn. |
TIP
Cascading Visibility: When a Node is hidden, every Edge connected to it (either as a source or a target) is automatically hidden by the engine. This prevents "ghost" connections from cluttering the viewport when their anchors are missing.