{"record":{"id":"098f85c474f93a38","repo":"danny-avila/LibreChat","slug":"invalid-mermaid-syntax","errorCode":null,"errorMessage":"Invalid mermaid syntax","messagePattern":"Invalid mermaid syntax","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"warning","filePath":"client/src/hooks/Mermaid/useMermaid.ts","lineNumber":131,"sourceCode":"      const mermaidInstance = await loadMermaid();\n\n      if (!mermaidInstance) {\n        throw new Error('Failed to load mermaid library');\n      }\n\n      // Validate syntax first and capture detailed error\n      try {\n        await mermaidInstance.parse(content);\n      } catch (parseError) {\n        // Extract meaningful error message from mermaid's parse error\n        let errorMessage = 'Invalid mermaid syntax';\n        if (parseError instanceof Error) {\n          errorMessage = parseError.message;\n        } else if (typeof parseError === 'string') {\n          errorMessage = parseError;\n        }\n\n        throw new Error(errorMessage);\n      }\n\n      // Initialize with config\n      mermaidInstance.initialize(mermaidConfig);\n\n      // Render to SVG\n      const { svg } = await mermaidInstance.render(diagramId, content);\n\n      const sanitizedSvg = sanitizeMermaidSvg(svg);\n\n      // Store as last valid content\n      setValidContent(sanitizedSvg);\n\n      return sanitizedSvg;\n    } catch (error) {\n      console.error('Mermaid rendering error:', error);\n\n      // Return last valid content if available (graceful degradation)","sourceCodeStart":113,"sourceCodeEnd":149,"githubUrl":"https://github.com/danny-avila/LibreChat/blob/5ff282f9006c436e561de1afd39a481bea1ef0d8/client/src/hooks/Mermaid/useMermaid.ts#L113-L149","documentation":"Thrown when `mermaidInstance.parse(content)` rejects — i.e. the diagram source text is not valid Mermaid syntax. The hook extracts a readable message from the parse error (using `parseError.message` if it's an Error, else the string) and re-throws with that message, so the surfaced text is Mermaid's own diagnostic rather than the generic `'Invalid mermaid syntax'` default (which only appears when the error is neither an Error nor a string).","triggerScenarios":"A user-authored or AI-generated Mermaid code block contains a syntax error: undeclared diagram type, mismatched brackets, invalid node shapes, unsupported directives, or a Mermaid version that doesn't understand newer syntax. The render hook calls `parse` before `render` so the failure is caught before canvas/SVG generation.","commonSituations":"LLM-generated Mermaid that uses non-existent directives or wrong keywords; a Mermaid library upgrade that changed syntax (e.g. v9 → v10 breaking changes); copy-pasted diagrams with smart quotes or invisible characters; user-typed diagrams with typos in keywords like `graph`/`flowchart`/`sequenceDiagram`.","solutions":["Read the exact message Mermaid attached to the parse error — it typically names the offending line/token.","Paste the diagram into the Mermaid Live Editor to get an interactive parse diagnostic and a corrected version.","If the error appeared after a Mermaid version bump, check the upgrade guide for breaking syntax changes and update affected diagrams.","Sanitize user/AI input (strip smart quotes, non-breaking spaces) before parsing."],"exampleFix":"// before — generic fallback masks the real error\nlet errorMessage = 'Invalid mermaid syntax';\nif (parseError instanceof Error) errorMessage = parseError.message;\n// after — surface the line context Mermaid provides when available\nlet errorMessage = 'Invalid mermaid syntax';\nif (parseError instanceof Error) {\n  errorMessage = parseError.message;\n} else if (parseError?.str !== undefined) { // mermaid Diagnostic carries .str\n  errorMessage = parseError.str;\n}","handlingStrategy":"try-catch","validationCode":"// Pre-validate syntax with a lighter check before full parse (optional)\nif (typeof content !== 'string' || content.trim().length === 0) {\n  throw new Error('Empty Mermaid diagram');\n}","typeGuard":"function isNonEmptyMermaidSource(s: unknown): s is string {\n  return typeof s === 'string' && s.trim().length > 0;\n}","tryCatchPattern":"try {\n  await mermaidInstance.parse(content);\n} catch (parseError) {\n  const msg = parseError instanceof Error ? parseError.message : String(parseError);\n  setErrorMessage(msg); // show Mermaid's diagnostic to the user\n}","preventionTips":["Surface Mermaid's own parse error message to the user — it names the offending line/token.","Validate AI-generated diagrams in the Mermaid Live Editor before shipping prompts.","Strip smart quotes/non-breaking spaces from user input before parsing.","Pin the Mermaid version and update diagrams when upgrading across breaking syntax changes."],"tags":["mermaid","parsing","validation","diagrams","user-content"],"backgroundTag":null,"analyzedSha":"5ff282f9006c436e561de1afd39a481bea1ef0d8","analyzedAt":"2026-08-12T21:38:08.145Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}