mermaid-js/mermaid · error · UnknownDiagramError

No diagram type detected matching given configuration for te

Error message

No diagram type detected matching given configuration for text: ${text}

What it means

Thrown by detectType when no registered detector returns truthy for the input text. Before testing detectors, the text is stripped of YAML front matter, %%{directive}%% blocks, and comments, so the remaining body must still match some diagram's detector (e.g. 'graph', 'sequenceDiagram'). It is an UnknownDiagramError.

Source

Thrown at packages/mermaid/src/diagram-api/detectType.ts:48

 *    g-->h
 * ```
 *
 * @param config - The mermaid config.
 * @returns A graph definition key
 */
export const detectType = function (text: string, config?: MermaidConfig): string {
  text = text
    .replace(frontMatterRegex, '')
    .replace(directiveRegex, '')
    .replace(anyCommentRegex, '\n');
  for (const [key, { detector }] of Object.entries(detectors)) {
    const diagram = detector(text, config);
    if (diagram) {
      return key;
    }
  }

  throw new UnknownDiagramError(
    `No diagram type detected matching given configuration for text: ${text}`
  );
};

/**
 * Registers lazy-loaded diagrams to Mermaid.
 *
 * The diagram function is loaded asynchronously, so that diagrams are only loaded
 * if the diagram is detected.
 *
 * @remarks
 * Please note that the order of diagram detectors is important.
 * The first detector to return `true` is the diagram that will be loaded
 * and used, so put more specific detectors at the beginning!
 *
 * @param diagrams - Diagrams to lazy load, and their detectors, in order of importance.
 */
export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinition[]) => {

View on GitHub (pinned to d93e9c88c0)

Solutions

  1. Verify the text starts with a valid diagram keyword: 'graph', 'flowchart', 'sequenceDiagram', 'classDiagram', etc.
  2. Trim and confirm the text is non-empty after removing comments/directives.
  3. Ensure the relevant diagram module (and its detector) is registered in the build.
  4. Wrap the parse call in try/catch and report an 'unrecognised diagram' error to the user.

Example fix

// before
const type = detectType(userText, config);

// after
const cleaned = userText.trim();
if (!/^graph|^flowchart|^sequenceDiagram|^classDiagram/.test(cleaned)) {
  throw new Error('Unrecognised diagram text');
}
const type = detectType(cleaned, config);
Defensive patterns

Strategy: try-catch

Validate before calling

const known = /^\s*(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie|mindmap|architecture)\b/i;
if (!known.test(text)) {
  throw new Error('Text does not start with a recognised diagram keyword');
}

Type guard

function looksLikeDiagram(text: string): boolean {
  return text.trim().length > 0 && known.some((kw) => text.trim().startsWith(kw));
}

Try / catch

try {
  const type = detectType(text, config);
} catch (e) {
  if (e instanceof UnknownDiagramError) {
    // tell user the diagram syntax was not recognised
  } else throw e;
}

Prevention

When it happens

Trigger: Passing plain prose or unrelated text, an empty string after stripping, a diagram keyword misspelled (e.g. 'garph TD'), or a syntax whose detector is not registered in this build.

Common situations: User submits free-form text to a mermaid renderer, a typo in the diagram declaration, or a stripped/slim build missing the relevant detector.

Related errors


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