Dynamic Node Layouts: Native Vertical Orientation & Label Positioning

[GijsHulsebos]

To introduce a “High-Density UI Mode” for the n8n canvas that allows builders to escape the mandatory Left-to-Right (LTR) horizontal constraint. This consists of two primary toggles:
Vertical Port Orientation: Allow Input/Output ports to “snap” to the Top and Bottom faces of a node. This enables clean, waterfall-style logic flows without the “Snake/S-curve” connectors that currently clutter vertical layouts, reducing Canvas Real Estate (CRE).
Modular Label Positioning: Give builders the ability to flip the Node Name and metadata (e.g., “Edit Fields”) from the bottom to the Left or Right side of the node icon (boxed the names for clear visibility of the idea) I made a screenshot of the original and a mockup of proposal.

The idea is:

I am proposing a “High-Density UI Mode” for the n8n canvas to give builders more control over spatial efficiency.

This consists of two primary functions:

1. Vertical Node Orientation: The ability to “flip” a node so that Input/Output ports snap to the Top and Bottom faces. This allows for clean “Waterfall” logic flows.

2. Modular Label Positioning: A toggle to move the Node Name and metadata (e.g., “Edit Fields”) from the bottom of the icon to the Left or Right side.

My use case:

As a builder of complex, enterprise-level AI agents and insurance workflows, I often find horizontal space is at a premium.

• Stakeholder Reviews: Many business analysts and clients are accustomed to vertical flowcharts (like Visio or Lucidchart).
  Native verticality makes n8n workflows instantly more “readable” for them.
• Complex Agent Logic: In massive flows, vertical stacking is necessary to keep logic clusters organized. Currently, this results in “S-curve” connectors that overlap and hide other logic paths.
• Vertical Scrolling: Most modern workspaces (including mobile/web) are optimized for vertical scrolling. Vertical flows make reviewing logic on standard monitors much faster.

I think it would be beneficial to add this because:

It solves the “Canvas Tax”- the time wasted manually spacing out nodes to prevent label overlap or untangling messy connector lines.
Eliminates “Visual Debt”: Vertical ports eliminate the “Snake/Spaghetti” lines that occur when nodes are stacked. This reduces the cognitive load for developers and reviewers.
Triples Information Density: Moving labels to the side allows nodes to be placed much closer together vertically. This allows a builder to fit significantly more logic on a single screen without sacrificing clarity.
Improves Workforce Continuity: By allowing the canvas to behave like a professional design suite, we ensure that workflows are self-documenting and easy for new team members to inherit, reducing “Black Box” risks for enterprises.

Any resources to support this?

• The Evolution of the “Canvas” (Ref: Microsoft Office & * Figma):
  Historically, productivity suites moved from rigid “function-first” grids (early Excel) to “design-first” flexible layouts (modern Canvas-based tools). This shift, as seen in the evolution of WYSIWYG interfaces, recognizes that users solve problems faster when the visual representation matches their mental model of the process.

• BPMN 2.0 (Business Process Model and Notation):
  As defined by the Object Management Group (OMG), professional process mapping frequently utilizes vertical “Pools and Lanes.” Standardizing vertical flow capability allows n8n to align with the * ISO/IEC 19510 standard, making it a viable replacement for legacy enterprise architecture tools.

• Cognitive Load Theory (John Sweller):
  * Research into “Extraneous Cognitive Load” and the “Split-Attention Effect” shows that when visual connectors are ambiguous (such as overlapping S-curves), the brain must
  divert energy from problem-solving to path-finding. By enabling clean vertical ports, we reduce “Visual Noise,” allowing for faster debugging and lower error rates.

• Gestalt Principles (* Law of Good Continuation):
  Human perception naturally follows the smoothest path. Native vertical alignment taps into the Principle of Continuity, which states that elements arranged on a line or curve are perceived as more related than elements not on the line. Current “S-curve” limitations violate this principle, creating a “visual jolt” that disrupts the developer’s flow state.

• The “* Rule of Proximity” in UI Design: By moving labels from the bottom to the side (Modular Labels), we allow for tighter grouping. According to the Laws of UX (Miller’s Law), grouping related information into manageable “chunks” is essential for users to parse complex systems without feeling overwhelmed.

  ( I am limited to 5 links as of this time, but there is a lot of theory on why “make-up” is incredibly important in UI/UX)

Are you willing to work on this?

Absolutely.
I am deeply committed to the evolution of n8n from a technical engine into a professional design standard.

I don’t just view this as a UI tweak; I view it as a foundational requirement for my “Workforce Continuity” methodology; a framework I’ve developed to ensure visual workflows remain maintainable, scalable, and transparent for enterprise-level teams.

**
How I can contribute:**

• UX/UI Specification: I can provide detailed Design Requirement Documents (DRDs) mapping out the “Orientation-Aware Port” logic and “Modular Label” behaviors.
• User Testing & Feedback: I am happy to act as a core tester for alpha/beta implementations, providing feedback from the perspective of a power user building high-complexity AI agents.
• Community Advocacy: I am willing to document the “Best Practices” for these new layouts to help other community members transition their legacy flows into this new high-density format.

Final Thoughts:

As workflows evolve toward orchestration rather than simple sequential automation, the traditional left->right convention starts creating unnecessary horizontal sprawl and connector overlap.

This proposal is not about replacing the existing paradigm, but about introducing an alternative layout model better suited for hierarchical agent workflow architectures.

In other words:
left->right works well for pipelines,
top->bottom can work better for orchestration trees.

[GijsHulsebos]

I am open for any feedback or adjusting some of the ideas to make this feature proposal as effective as possible.

[nguyenthieutoan]

The vertical port orientation idea addresses something I’ve run into often - once a workflow grows past a certain size with multiple branches, the forced horizontal layout with S-curve connectors makes it hard to visually trace individual paths. Being able to snap ports to top/bottom and run a clean waterfall flow would make complex multi-branch workflows much easier to read and present to clients.

[GijsHulsebos]

Appreciate your feedback, there is much more which this could potentially unlock:

@nguyenthieutoan – Spot on. That “S-curve clutter” is exactly what I call the ‘Canvas Tax’
it forces the human brain to spend energy on path-finding instead of logic-processing.

By shifting ports to the top and bottom, we don’t just “clean up” the lines; we fundamentally reclaim Canvas Real Estate (CRE) that was previously wasted.

Why this “NEW CRE” is an Enterprise Necessity:

As demonstrated in the updated mockup, verticality creates a clean horizontal corridor. This allows for Logical Segmentation (Swimlanes), which is critical for the “Workforce Continuity” methodology I advocate for. In a professional or enterprise setting, this enables:

• Logic Categorization: We can now define functional zones (e.g., Triage, AI Processing, Action Layers) without connectors breaking visual boundaries.

• Audit-Ready Handovers: A “Waterfall” layout with clear lanes is significantly easier for a client or compliance officer to verify than a horizontal web of nodes.

• Phase-Based Metadata: The newly available space to the right (or left) of the nodes can be used for versioning, audit logs, or specific compliance stamps (like EU AI Act/GDPR checks) per phase.

This move isn’t just about aesthetics; it’s about transforming n8n into a Professional Design Suite that can handle the sheer scale of modern AI orchestration.