mermaid-js/mermaid · error

Line ${origLineNo}: Unexpected indentation without box-drawi

Error message

Line ${origLineNo}: Unexpected indentation without box-drawing characters. In box-drawing format, use ├── or └── prefixes for indented nodes.

What it means

In box-drawing mode, indentation is conveyed by branch connectors (├──/└──), not by leading whitespace. If a line has leading whitespace but contains no box-drawing characters at all, the preprocessor treats it as a mixed-format input and throws, reporting the original line number, because the intended nesting cannot be determined.

Source

Thrown at packages/mermaid/src/diagrams/treeView/boxDrawingPreprocessor.ts:196

        );
      }

      const indent = INDENT_UNIT.repeat(depth);
      outputLines.push(indent + content);
      outLineNo++;
      lineMap.set(outLineNo, origLineNo);
    } else if (/^[\s─━│┃└┗├┣]+$/.test(normalized)) {
      // Entire line is box-drawing decoration and whitespace — skip
      continue;
    } else if (ALL_BOX_CHARS.test(normalized)) {
      // Has box chars but no branch char — likely content containing a box char (e.g. "Section ─ A.txt")
      // Treat as root-level item
      outputLines.push(line);
      outLineNo++;
      lineMap.set(outLineNo, origLineNo);
    } else if (/^\s+/.test(normalized)) {
      // Leading whitespace without box chars in box mode → likely mixed format
      throw new Error(
        `Line ${origLineNo}: Unexpected indentation without box-drawing characters. ` +
          `In box-drawing format, use ├── or └── prefixes for indented nodes.`
      );
    } else {
      // No box chars, no leading whitespace → root-level item (depth 0)
      outputLines.push(line);
      outLineNo++;
      lineMap.set(outLineNo, origLineNo);
    }
  }

  return { text: outputLines.join('\n'), lineMap };
}

View on GitHub (pinned to d93e9c88c0)

Solutions

  1. Make every indented line use ├── or └── connectors so it is unambiguously box-drawing.
  2. Switch the whole diagram to indentation format so no box chars are present and auto-detection picks indentation mode.
  3. Remove the offending whitespace-indented lines or de-indent them to depth 0.
  4. Normalise the editor to preserve box-drawing characters and avoid space-indenting children.

Example fix

// before — mixed formats (box mode + space indent)
├── root
    childA
    childB

// after — consistent box-drawing
├── root
├── childA
├── childB
Defensive patterns

Strategy: validation

Validate before calling

// In box mode, reject whitespace-indented lines that have no box glyphs
const BOX = /[├└┗│┃─━]/;
for (let i = 0; i < lines.length; i++) {
  if (/^\s+/.test(lines[i]) && !BOX.test(lines[i])) {
    throw new Error(`Line ${i + 1}: indentation without box characters`);
  }
}

Type guard

const isMixedFormatError = (e): boolean =>
  e instanceof Error && /Unexpected indentation without box-drawing/.test(e.message);

Try / catch

try {
  await mermaid.run({ nodes: [el] });
} catch (e) {
  if (e instanceof Error && /Unexpected indentation without box-drawing/.test(e.message)) {
    // normalise the whole tree to one format (box-drawing or indentation)
  } else { throw e; }
}

Prevention

When it happens

Trigger: A treeView diagram auto-detected as (or set to) box-drawing mode that contains lines indented with plain spaces/tabs and no ├/└/─/│ glyphs.

Common situations: Mixing an indentation-based tree with a box-drawing tree in one diagram; pasting source code snippets with leading spaces inside a box-drawing tree; editors that convert tabs to spaces breaking connectors; partial format migration.

Related errors


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