To keep Mermaid nodes in fixed rows as connections change, use a block diagram with explicit columns where your renderer supports it. In Obsidian on Mac, check the installed renderer first: flowchart subgraphs cannot reliably enforce this layout.

This guide targets one task: arranging six neutral nodes in two horizontal rows while preserving connections between individual nodes. Decide separately whether you need aligned boxes, right-angle connector bends, or both. A satisfactory result for one requirement may still fail the other.

Why do cross-connections disrupt flowchart rows?

Mermaid documents a specific flowchart limitation: when a node inside a subgraph connects outside that subgraph, its local direction is ignored and it inherits the parent graph’s direction. Consequently, a row declared with direction LR inside a flowchart TB can change arrangement after an external connection is added. See the official subgraph direction limitation.

This complete illustrative note contains that condition. Its two internal connections suggest horizontal rows, but A --> D crosses the subgraph boundary:

```mermaid
flowchart TB
  subgraph RowOne[Row One]
    direction LR
    A[Alpha] --> B[Beta]
  end
  subgraph RowTwo[Row Two]
    direction LR
    D[Delta] --> E[Epsilon]
  end
  A --> D
```

Mermaid also supports connections to subgraph IDs. Connecting RowOne to RowTwo instead can avoid targeting their internal nodes, but changes the relationship’s meaning: it connects groups rather than Alpha and Delta. Use that option only when the group relationship is accurate. Invisible links such as A ~~~ B are documented positioning aids, not a documented row-locking mechanism. Flowcharts Syntax

For this task, keep the individual endpoints. Replacing a required node connection with a group connection would make the drawing tidier at the expense of the information it needs to communicate.

Check which renderer your Mac is actually using

Open Obsidian’s Settings, then General, and record the current app version. Current documentation places version information and the Read the changelog control there. Follow the release notes for your installed version before adopting instructions written for another build. Settings — Obsidian Help

There is a consequential version boundary: Obsidian’s 1.15.0 Desktop early-access release, dated October 22, 2026, introduces Pele for diagram rendering and describes compatibility with Mermaid 12.1.0 syntax. That announcement does not establish which renderer an earlier installed release uses. Obsidian 1.15.0 Desktop release notes

Pele documents its own layout engine, with node positions, spacing, and edge paths that differ from Mermaid. Its compatibility list includes both block and block-beta. Therefore, syntax compatibility alone is insufficient evidence that an Obsidian diagram will match an upstream Mermaid rendering. Pele compatibility

Upstream Mermaid has changed too: its layout documentation says ELK became bundled and the default for flowcharts in version 12.0.0; previously, the host needed to install and register the separate ELK package. Advice to select layout: elk must therefore remain conditional on the renderer and version. Mermaid layouts

For a useful comparison, keep three things together: the exact diagram source, the Obsidian app version, and the rendering environment. Change one thing at a time. Comparing different source text in different renderers cannot isolate why the rows moved.

Use a block diagram for explicit row placement

Mermaid’s block diagrams provide author-controlled placement through columns. Blocks fill the declared columns and wrap into subsequent rows; space reserves empty cells. This makes them the supported Mermaid path for arranging boxes independently of flowchart ranking. Block Diagram Syntax

Create a temporary Obsidian note and paste the complete block below, including its opening and closing triple backticks. Obsidian documents diagrams as fenced code blocks with the language identifier mermaid. Advanced formatting syntax — Obsidian Help

```mermaid
block
  columns 5
  A["Alpha"] space B["Beta"] space C["Gamma"]
  space:5
  D["Delta"] space E["Epsilon"] space F["Zeta"]

  A --> B
  B --> C
  D --> E
  E --> F
  A --> D
  B --> E
  C --> F
  A --> F
```

The intended arrangement is Alpha, Beta, Gamma across the upper occupied row, with Delta, Epsilon, Zeta beneath them. Five columns include two horizontal gaps; space:5 reserves a full empty row between the occupied rows. Connections reference the declared block IDs. These constructs follow Mermaid’s documented column, spacing, and edge syntax. Block Diagram Syntax

If the installed renderer rejects block, stop at that compatibility question. Check its documented syntax before trying the older spelling block-beta; Pele explicitly lists both, but that does not prove support in every older Obsidian release. The examples here were inspected against documentation, not executed in an installed Obsidian renderer. Pele compatibility

Evaluate the result in two passes. First, check the six labels and their intended row membership. Then inspect all eight relationships, especially the diagonal Alpha-to-Zeta connection. Accepting the box layout should not hide an ambiguous or overlapping connector.

Do right-angle connectors also require fixed rows?

Treat connector appearance as a separate acceptance test. Mermaid’s flowchart configuration defines curve as an edge-rendering setting and lists step, stepBefore, and stepAfter among its values. It separately defines nodeSpacing for nodes on the same level and rankSpacing for different levels. Those settings address appearance and spacing; their documented purposes do not establish fixed row membership. Flowchart Diagram Config Schema

The block example addresses box placement. It does not promise that every cross-connection will use only horizontal and vertical segments. Do not assume a flowchart curve setting controls block-diagram connectors, or that a setting accepted by upstream Mermaid behaves identically in Pele.

Use this decision aid before spending time adjusting the drawing:

Required outcome Practical choice Acceptance check
Two fixed rows with individual cross-connections Block diagram, when supported Every node remains in its intended row
A readable flowchart with flexible positioning Flowchart layout and spacing adjustments Relationships remain clear after each edit
Connections between whole groups Subgraph endpoints, when semantically accurate The endpoints describe the intended relationship
Manually arranged boxes inside Obsidian Canvas Card placement and connections match the intended diagram
Fixed rows plus prescribed connector bends Evaluate both requirements separately Inspect every bend and crossing in the actual renderer

What if your installed Obsidian cannot render the block diagram?

For an ordinary Mac task where manually placed cards are acceptable, Obsidian Canvas offers a documented alternative. Open the command palette and select Canvas: Create new canvas. Double-click the canvas to create text cards, then enter the six synthetic labels. Canvas — Obsidian Help

Select the three upper cards and use Align, then Arrange in a row. Repeat for the lower three. Adjust spacing as needed. To connect cards, hover over a card edge until a filled circle appears, then drag that circle to another card’s edge. These arrangement and connection controls are documented Canvas features. Canvas — Obsidian Help

Canvas produces a separate .canvas document rather than an inline Mermaid code block. Choose it when arranging cards directly is an acceptable deliverable. Its placement controls address the row task, but the cited documentation does not establish arbitrary connector-waypoint editing. Canvas — Obsidian Help

Verify the result before adding more connections

Use a small comparison sequence to distinguish unsupported syntax from layout behavior. This is a diagnostic procedure derived from the documented boundaries, rather than a claim about a tested Obsidian installation:

  1. Render the six declared blocks without their eight connection lines. Check row membership.
  2. Restore the four within-row connections. Check labels and arrow direction.
  3. Restore the three corresponding-column connections. Inspect the space between rows.
  4. Restore A --> F last. Check whether its route remains readable.
  5. Reopen the final source in the environment where you intend to read it. Judge that rendering.

If the first step fails to parse, investigate diagram support before changing spacing. If placement is satisfactory but a connector is unclear, address that specific route or reconsider the presentation. Keep all required relationships visible while comparing alternatives; deleting the troublesome connection would remove the very condition the diagram must handle.

For stable rows, start with explicit block placement and validate it in your installed renderer. Keep the node relationships intact, inspect connector geometry separately, and use Canvas when direct card arrangement is the more practical way to complete the task.

Sources