How to Solve Subgraph Nesting in Mind‑Map Layouts: From Black‑Room Analogy to Quadrant Reduction

In January 2021 the team decided to implement subgraph nesting in the Yuque mind‑map product, despite initial hesitation because the product was not intended to become an XMind clone.

"Fortunately, our little stream has no big shark, so we can try more possibilities." – Source: "What It’s Like Working at XMind"

The metaphor of a "small stream without sharks" illustrates how the mind‑map market is niche, allowing a small company to thrive for years, but also hints at the hidden barriers that make advanced features like subgraph nesting difficult.

Black‑Room Analogy

Solving a hard problem is likened to searching for a door in a dark room; the author compares it to proving mathematical theorems, emphasizing that while the difficulty is far lower, the feeling of entering the right "room" is real.

Why XMind’s Solution Is Not Sufficient

After testing XMind, several issues were identified: overlapping graphics, obvious bugs, and overall unsatisfactory behavior. A design principle was derived: limit combinations that may cause conflicts .

Defining Layout Conflicts

To understand conflicts, the article breaks down layout concepts:

Type

The layout type determines the growth pattern of the whole tree. Three types are illustrated with diagrams.

Direction

Direction defines the growth direction of the algorithm; four directions exist for a single layout type.

Quadrant

Quadrants, borrowed from Cartesian coordinates, partition space for child nodes. The number of quadrants a layout occupies is called the "full‑quadrant count".

Key definitions:

A layout whose usable quadrant count equals its full‑quadrant count is a full layout .

Constraining a node to a specific quadrant is a quadrant constraint .

A full layout with quadrant constraints becomes a partial layout .

Subgraph Definition

A node that contains a layout is a core node . If core node A is a child of core node B, the subgraph of A (including its descendants) is considered a subgraph of B.

Basic Nesting Rules

The core rule is to treat a subgraph as a rectangular black box, aiming for a minimal solution that avoids turning nesting into a cost center.

Conflict Definition and Classification

Two layouts can be nested if their direction vectors share the same basis vectors. The article reduces the problem to linear algebra, showing how to test for "same‑direction basis vectors" with vector examples.

Three conflict categories are identified:

Same layout type, same full layout.

Same layout type, different full layout.

Different layout types.

Conflict Resolution Strategy

Four practical steps are proposed:

For layouts with the same direction, adjust quadrant constraints to obtain a conflict‑free partial layout.

If directions differ, force both layouts into the same full layout, then apply step 1.

Conflicts depend only on direction, not on layout type.

An algorithm is needed to guarantee rational and stable quadrant reduction.

Quadrant‑Reduction Algorithm

/**
 * Quadrant reduction
 * @param {Array} domain - current quadrant domain
 * @param {Array} range  - target quadrant range
 * @param {Number} l     - total length of target domain
 */
export function quadrantReduce(domain, range, l) {
  const rst = {};
  let source, target, c;
  for (let i = 0; i < domain.length; i++) {
    source = domain[i];
    target = source;
    c = 1;
    while (!range.includes(target)) {
      if (c % 2 === 1) {
        target += c;
        if (target > l) target %= l;
      } else {
        target -= c;
        if (target < 1) target = l + target % l;
      }
      c++;
    }
    rst[source] = target;
  }
  return rst;
}

The algorithm iteratively moves the current quadrant clockwise and counter‑clockwise until it lands in the target set, ensuring nearest‑neighbor mapping, generality for many‑to‑many cases, and periodicity.

Conclusion

From a technical perspective, subgraph nesting pushes the product into uncharted territory, opening possibilities for future features such as fish‑bone diagrams and timeline layouts. From a product viewpoint, it provides users with greater creative freedom. The author ends with a reflection on the joy of pursuing technical truth.