App
DocsCanvasAuto Layout

Auto Layout

When building complex architectures or importing diagrams from README files and GitHub repositories, nodes can initially overlap or become visually chaotic. Rekhic includes an automated Auto Layout engine based on Directed Acyclic Graph (DAG) algorithms.


1. Running Auto Layout

To automatically arrange your diagram:

  1. Open the Canvas Toolbar or settings menu in the workspace.
  2. Click the Auto Layout button.
  3. Rekhic parses the current topology and repositions all nodes into a structured visual hierarchy in a fraction of a second.

If you don't like the resulting positions, simply press Cmd/Ctrl + Z to undo and restore your previous layout.


2. How the Layout Engine Works

Rekhic uses the Dagre graph layout library:

  • Hierarchical Layering: Upstream components (e.g. Clients, DNS, Load Balancers) are placed in the top tier.
  • Mid-Tier Services: API Gateways and microservices occupy the intermediate tiers.
  • Downstream Sinks: Databases, caches, and queues are placed in the lower tier.
  • Edge Crossing Minimization: Edge routes are calculated to minimize crossing lines between unrelated services.
text
[Client App] │ ▼ [API Gateway] ┌────┴────┐ ▼ ▼ [Service A] [Service B] │ │ ▼ ▼ [(DB A)] [(Queue B)]

3. Directional Layouts

By default, Rekhic organizes graphs Top-to-Bottom (TB), which represents standard tiered software architectures. You can also configure:

  • Left-to-Right (LR): Ideal for sequential data processing pipelines, ETL flows, or event streaming pipelines.

Next: Learn how to import existing architectures in README to Diagram.

Need help? Contact Support