mermaid-js/mermaid · error

The left-hand id [${lhsId}] is modified to traverse the grou

Error message

The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.

What it means

Thrown by ArchitectureDB.addEdge when lhsGroup is truthy but both endpoints resolve to the same group (lhsGroupId === rhsGroupId). The lhsGroup flag declares that the edge crosses a group boundary on the LHS; if both endpoints are inside the same group there is no boundary to traverse, so the flag is contradictory. Note the lookup uses nodes.get(...).in, so this check only fires when both endpoints are nodes (services/junctions), not groups.

Source

Thrown at packages/mermaid/src/diagrams/architecture/architectureDb.ts:228

        `Invalid direction given for right hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${String(rhsDir)}`
      );
    }

    if (!this.nodes.has(lhsId) && !this.groups.has(lhsId)) {
      throw new Error(
        `The left-hand id [${lhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
      );
    }
    if (!this.nodes.has(rhsId) && !this.groups.has(rhsId)) {
      throw new Error(
        `The right-hand id [${rhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
      );
    }

    const lhsGroupId = this.nodes.get(lhsId)!.in;
    const rhsGroupId = this.nodes.get(rhsId)!.in;
    if (lhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
      throw new Error(
        `The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
      );
    }
    if (rhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
      throw new Error(
        `The right-hand id [${rhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
      );
    }

    const edge = {
      lhsId,
      lhsDir,
      lhsInto,
      lhsGroup,
      rhsId,
      rhsDir,
      rhsInto,
      rhsGroup,

View on GitHub (pinned to d93e9c88c0)

Solutions

1. Remove lhsGroup (set it false/undefined) when both endpoints are in the same group.
2. If boundary traversal is genuinely intended, move one endpoint into a different group.

Example fix

// before
db.addGroup({ id: 'g' });
db.addService({ id: 'a', in: 'g' });
db.addService({ id: 'b', in: 'g' });
db.addEdge({ lhsId: 'a', rhsId: 'b', lhsDir: 'L', rhsDir: 'R', lhsGroup: true });
// after — drop the boundary flag for an intra-group edge
db.addEdge({ lhsId: 'a', rhsId: 'b', lhsDir: 'L', rhsDir: 'R' });

function addEdgeSafe(db, e) {
  const lhsNode = db.getNode(e.lhsId);
  const rhsNode = db.getNode(e.rhsId);
  if (e.lhsGroup && lhsNode && rhsNode && lhsNode.in && lhsNode.in === rhsNode.in) {
    throw new Error('lhsGroup set but both endpoints share a group');
  }
  db.addEdge(e);
}

When it happens

Trigger: Two services declared in the same group, with an edge between them that carries lhsGroup: true. e.g. addService({id:'a', in:'g'}), addService({id:'b', in:'g'}), addEdge({lhsId:'a', rhsId:'b', lhsDir:'L', rhsDir:'R', lhsGroup:true}).

Common situations: Copy-pasting edge flags from a cross-group edge to an intra-group edge; misunderstanding the lhsGroup flag as a styling toggle rather than a boundary-traversal marker.

Related errors

• The right-hand id [${rhsId}] is modified to traverse the gro
• Invalid direction given for left hand side of edge ${lhsId}-
• Invalid direction given for right hand side of edge ${lhsId}
• The service id [${id}] is already in use by another ${this.r
• The service [${id}] cannot be placed within itself

AI-assisted analysis of mermaid-js/mermaid@d93e9c88c0 (2026-08-12). Data as JSON: /api/errors/a8ee20db4d828d11. Report an issue: GitHub.