Use a collapsible container for a detailed draw.io section, and attach overview connections to that container. This gives the collapsed view a meaningful endpoint without relying on folding to invent a direct connection between outside shapes.

This guide is for someone editing a diagram in draw.io Desktop on a Mac who wants to switch between a readable overview and the details inside one section. draw.io’s official documentation confirms that its standalone desktop application supports macOS. Run draw.io offline

Decide what the collapsed section should mean

Start with a small, synthetic example: an outside shape labeled Input A, a section labeled Section B, and an outside shape labeled Output C. Inside Section B, place three detail shapes labeled B1, B2, and B3, connected in sequence.

The intended overview is simple: Input A connects to Section B, and Section B connects to Output C. Expanding the section reveals how its three internal steps relate. The section remains a meaningful part of the overview even when its details are hidden.

This structure follows two documented capabilities: containers hold other shapes and can be folded, and connectors can cross container boundaries. However, the container documentation does not establish that folding an arbitrary chain creates a new direct connection between its outside neighbors. Treat folding as a way to reveal or conceal detail; define the overview relationships explicitly. Enable or disable the collapse/expand feature on container shapes

Choose the structure according to what readers need to understand:

Reader’s question Recommended structure Meaning retained in the overview
Which sections connect? Connect outside shapes to the section container. The section participates in the overall flow.
Which exact internal step connects outside? Retain the connection to that internal shape and label the relationship clearly. The detailed endpoint remains part of the model; inspect both folding states.
Can the entire section disappear, leaving one direct outside-to-outside arrow? Draw an explicit overview representation if that relationship is valid. The direct relationship is an authored summary, rather than an assumed folding result.

This decision aid is a diagram-design recommendation derived from the documented features. It avoids assigning a new meaning to a connector merely because some shapes are no longer visible.

Build a collapsible section on the Mac

Work on a copy of an existing diagram while changing its structure. For a new diagram, build the small example first, then apply the same arrangement to larger sections.

Create the container before adding details

Add a rectangle and make it large enough to hold the three internal shapes. Select that rectangle alone and press Cmd+G. The official container guide documents this Mac shortcut for turning a shape into a container. Enable Extras > Collapse/Expand; a check mark indicates that the feature is enabled. In the Minimal theme, the documented route is a right-click followed by Options > Collapse/Expand. Container setup and folding controls

Give the container the label Section B. Keep that name short enough to identify the section at overview size. Reserve space near its title for the folding control, rather than placing a detail shape directly over that area.

Add B1, B2, and B3 inside the container, then connect them in sequence. Keep Input A and Output C outside. These names and this arrangement are illustrative: their purpose is to make the parent section and its contents easy to distinguish.

For an existing collection of shapes and internal connectors, draw.io also supports selecting them together and choosing Arrange > Group, or pressing Cmd+G. Include the internal connectors in that selection. Keep the outside shapes out of the group. Group and ungroup shapes and connectors

Make sure the section is foldable

Click the section’s folding control to collapse it, then click again to expand it. Current group documentation describes a −/+ control for foldable cells and identifies collapsible=1 as the style setting that opts a cell into folding. If an ordinary group has no control after enabling the global option, check its selected-cell settings rather than repeatedly regrouping the diagram. The documented style settings are available through Edit Style… or the Properties section of the Arrange tab. Collapse and expand groups

Before adding the overview connectors, confirm that collapsing the section conceals the intended details and leaves its name readable. If something remains outside the folded section, inspect its membership instead of assuming that visual overlap made it part of the container.

Attach overview connections to the section itself

For the example, draw one connector from Input A to the border of Section B, and another from Section B to Output C. These two connections describe the section’s place in the overall diagram. The internal B1–B2–B3 sequence describes its detail.

Use a floating connection when the precise attachment position is unimportant. Drag a connector from a directional arrow on the source shape, then release over the target when its outline is blue. Floating endpoints can move around a shape’s perimeter as the diagram changes. For a fixed connection, start and finish at connection points highlighted in green. Fixed endpoints remain attached to those points. See the difference between fixed and floating connectors

For this overview, floating endpoints are a reasonable starting choice because the important fact is which section connects. Choose fixed endpoints when a particular side or connection position carries meaning. Neither choice removes the need to inspect the collapsed and expanded views.

Add labels such as Input to B and Output from B if the arrows alone leave their meaning unclear. Double-click a connector where its label should appear. To reposition the label, select it and drag its diamond handle. Label connectors

If the relationship actually belongs to B2, retain that detailed connection. Do not replace it with a container connection unless the broader statement is also accurate. A useful label might be Input to B2, accompanied by a section name that remains understandable in the overview. The official documentation permits connections across container boundaries, but that permission alone does not establish how clearly every detailed endpoint will be represented after folding. Inspect that specific diagram in both states. Connections across container boundaries

Avoid the transparent layout-container trap

A container created through Arrange > Insert > Layout is a different choice from a section with a connectable visible boundary. The official layout guide says these inserted layout containers have transparent borders that cannot accept connections; connectors must attach to shapes inside them. It also distinguishes Advanced layout shapes surrounded by a swimlane that can accept connections. Advanced layout shapes and layout containers

If your overview requires arrows attached to the section boundary, use a connectable container or swimlane. Choose a transparent layout container when automatic arrangement of its internal shapes is the priority and connections to those internal shapes suit the diagram.

Check both views before adjusting connector routes

Use the following sequence after building the example. It checks whether the overview communicates the intended relationships before you spend time polishing bends and spacing.

  1. Expand Section B and verify the internal sequence.
  2. Confirm that the two overview connectors attach to the section, rather than merely ending near its outline.
  3. Collapse the section and read the diagram using only the visible names and connector labels.
  4. Check whether every visible arrow still makes a true statement.
  5. Expand again and inspect the internal connectors and labels.
  6. Repeat with each neighboring section collapsed separately, then together.

If folding leaves excessive space, adjust placement deliberately. The group documentation describes Shift-clicking the folding control to shift sibling cells to the right or below as the size changes. This is a specific folding behavior; it should not be treated as a promise to redesign an arbitrary diagram automatically. Folding and neighboring cells

If a connector has an awkward detour, select it and adjust its path. You can drag its blue points or right-click the connector and choose Add Waypoint. Manual waypoint changes disable the auto-routing orthogonal style for that connector, so add bends only when they improve both views. To remove an obsolete route, right-click and choose Clear Waypoints, then inspect the resulting path. Work with waypoints on connectors to change their path

After rerouting, inspect labels separately. A label that was manually positioned may need another adjustment. To return it to its connector, select the connector or label, then choose Reset in the Arrange tab and select Label Positions. Reset connector label positions

Troubleshoot the structure before polishing it

Symptom What to check Supported next step
No folding control appears Global folding option and the selected cell’s foldability Enable Extras > Collapse/Expand; inspect collapsible=1 where needed.
A detail stays visible after folding Whether it belongs to the section Check container or group membership rather than its apparent position.
A section border will not accept a connector Whether it is an inserted transparent layout container Use a connectable container or swimlane for boundary-level relationships.
A collapsed arrow is ambiguous Whether its meaning depends on an internal endpoint Label the relationship or author an explicit section-level connection.
A line retains an unnecessary bend Existing waypoints Adjust or clear the waypoints, then recheck labels.

These checks combine the documented container controls, group settings, layout-container boundary, and waypoint tools. The choice of which relationship to show remains an editorial decision about the diagram.

A useful collapsed diagram lets someone identify each section and understand its visible connections without opening every detail. Build that overview explicitly, then use folding to reveal the supporting structure. If the reader needs a direct connection that skips a section entirely, draw that summary deliberately and preserve the detailed view wherever those internal relationships still matter.

Sources