Bug: `A-->B` (no space before the arrow) parses as a single node `A--` and drops the edge

Author: BougerousCreated Aug 12, 2026Updated Aug 30, 2026

Summary

In flowcharts, an edge written without whitespace before the arrow — A-->B — is not parsed as an edge. The node id lexer consumes the leading dashes, producing a single node with the id A-- and zero edges. No error is raised: the diagram renders, just with the wrong nodes and no arrows.

This is the most common way Mermaid edges are written by hand, and it is valid in mermaid-js.

Environment

  • beautiful-mermaid 1.1.3
  • Node 26, ESM import

Reproduction

javascript
import { parseMermaid, renderMermaidSVG } from 'beautiful-mermaid'

const cases = {
  'A-->B':      'flowchart LR\n  A-->B',
  'A --> B':    'flowchart LR\n  A --> B',
  'A -->B':     'flowchart LR\n  A -->B',
  'A--> B':     'flowchart LR\n  A--> B',
  'A[x]-->B[y]':'flowchart LR\n  A[x]-->B[y]',
}

for (const [label, src] of Object.entries(cases)) {
  const g = parseMermaid(src)
  const nodes = g.nodes instanceof Map ? [...g.nodes.values()] : Object.values(g.nodes ?? {})
  console.log(
    label.padEnd(13),
    'nodes:', JSON.stringify(nodes.map(n => n.id)).padEnd(14),
    'edges:', (g.edges ?? []).length,
  )
}

Output:

A-->B         nodes: ["A--"]        edges: 0
A --> B       nodes: ["A","B"]      edges: 1
A -->B        nodes: ["A","B"]      edges: 1
A--> B        nodes: ["A--"]        edges: 0
A[x]-->B[y]   nodes: ["A","B"]      edges: 1

Expected vs. actual

  • Expected: all five forms produce nodes A, B and one edge A -> B.
  • Actual: the two forms with no whitespace before the arrow produce a single node A-- and no edge.

The deciding factor is whitespace before the arrow, not after — A -->B parses, A--> B does not. A bracketed label also terminates the id, so A[x]-->B[y] parses.

Knock-on effect: styling appears broken

Because the edge statement never parses, styling directives that reference it silently do nothing, which reads as a separate classDef/linkStyle bug:

javascript
const src = 'flowchart LR\n  A-->B\n  classDef hot fill:#f00\n  class A hot\n  linkStyle 0 stroke:#00f'
renderMermaidSVG(src) // contains neither #f00 nor #00f

Both work as soon as the edge is written A --> B.

Suggested fix

Stop the node-id token from absorbing - / = characters, or match the edge connector before tokenising the id, so A-->B splits as A, -->, B.

Source: lukilabs/beautiful-mermaid