> ## Documentation Index
> Fetch the complete documentation index at: https://docs.justflow.it/llms.txt
> Use this file to discover all available pages before exploring further.

# One-click auto-layout for clean, non-crossing BPMN diagrams

> Instantly rearrange your BPMN diagram into a clean, non-crossing layout with evenly spaced elements and right-angle connectors — one click.

As you build and refine a diagram — whether through AI generation, chat instructions, or manual editing — elements can end up overlapping or connected by crossing flow lines. Auto-layout fixes this in one click. It analyzes the entire diagram and repositions every element into a clean, readable layout with evenly spaced shapes, right-angle connectors, and properly aligned pools and lanes — all without touching your labels, connections, or any other BPMN properties.

## How to trigger auto-layout

<Steps>
  <Step title="Open your diagram">
    Navigate to the diagram you want to tidy and make sure it's open in the editor.
  </Step>

  <Step title="Click the Auto-layout button">
    Locate the **Auto-layout** button in the editor toolbar — it looks like a grid or "tidy" icon. Click it once to apply the layout immediately.

    You can also trigger auto-layout with the keyboard shortcut <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>L</kbd> on Windows/Linux, or <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>L</kbd> on macOS.
  </Step>

  <Step title="Review the result">
    The diagram redraws with the new layout applied. Scroll and zoom to inspect the result. If you prefer the previous arrangement, press <kbd>Ctrl</kbd>+<kbd>Z</kbd> (<kbd>Cmd</kbd>+<kbd>Z</kbd> on macOS) to undo.
  </Step>
</Steps>

## What auto-layout does

<CardGroup cols={2}>
  <Card title="Removes crossing flows" icon="shuffle">
    Re-routes sequence flows and message flows so that connections no longer cross each other, making the process logic much easier to follow.
  </Card>

  <Card title="Spaces elements evenly" icon="distribute-spacing-horizontal">
    Applies consistent horizontal and vertical spacing between all tasks, events, and gateways so the diagram doesn't feel crowded or uneven.
  </Card>

  <Card title="Aligns pools and lanes" icon="table-columns">
    Adjusts the width and height of pools and lanes to fit their contents, and aligns pool boundaries with the overall diagram grid.
  </Card>

  <Card title="Uses right-angle connectors" icon="right-to-bracket">
    Converts diagonal or curved flow lines to clean orthogonal (right-angle) connectors that follow the grid, matching standard BPMN presentation conventions.
  </Card>

  <Card title="Preserves element labels" icon="tag">
    All task names, gateway conditions, event labels, and annotation text remain exactly as they were — only positions change.
  </Card>

  <Card title="Preserves all connections" icon="link">
    No connections are added or removed. Auto-layout only changes how existing flows are routed, not what they connect.
  </Card>
</CardGroup>

<Note>
  Auto-layout **never deletes or modifies any elements**. It only changes the position and routing of shapes and connectors. Your BPMN structure, labels, and properties are completely untouched.
</Note>

## When to use auto-layout

<Tip>
  Run auto-layout after any of the following situations to keep your diagram presentable:

  * **After the initial AI generation** — especially for complex processes with many elements, the first draft can benefit from a layout pass.
  * **After a round of chat refinements** — new elements added by the AI are placed logically but may not be optimally spaced relative to existing ones.
  * **After adding several elements manually** — when you've been dragging in new shapes and connections by hand, auto-layout tidies everything up in one step.
  * **Before sharing or exporting** — ensure the diagram looks polished before sending it to stakeholders or downloading it.
</Tip>

## Frequently asked questions

<Accordion title="Can I choose a different layout direction (e.g., top-to-bottom vs. left-to-right)?">
  By default, auto-layout arranges diagrams in a **left-to-right** flow, which matches the most common BPMN reading direction. If your process is naturally vertical, you can change the layout direction in **Settings → Editor → Auto-layout direction** before triggering it.
</Accordion>

<Accordion title="Will auto-layout move elements I've carefully positioned by hand?">
  Yes — auto-layout repositions all elements on the canvas. If you have specific elements you've placed precisely, apply auto-layout first as a base and then manually reposition those elements afterward. Use <kbd>Ctrl</kbd>+<kbd>Z</kbd> (<kbd>Cmd</kbd>+<kbd>Z</kbd>) immediately if the result isn't what you expected.
</Accordion>

<Accordion title="Does auto-layout work on very large diagrams?">
  Yes, there is no element-count limit for auto-layout. On very large diagrams (hundreds of elements), the layout calculation may take a second or two — a progress indicator will appear in the toolbar while it runs.
</Accordion>