fix: improve Mermaid diagram error handling with helpful suggestions #6715
Conversation
- Add enhanced error messages with specific suggestions for common syntax errors - Detect unclosed brackets, braces, incomplete arrows, and missing diagram types - Add comprehensive test coverage for error handling scenarios - Improve error display with proper whitespace formatting Fixes #6712
dosubot
bot
added
size:L
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
|
|
||
| if (openBrackets > closeBrackets) { | ||
| enhancedMessage += | ||
| "\n\nSuggestion: You have unclosed square brackets '['. Make sure all node labels are properly closed with ']'." |
There was a problem hiding this comment.
The error suggestion messages are hardcoded in English. Could we consider using the translation system with the t() function to support internationalization? This would make the error messages accessible to users in other languages.
| "\n\nSuggestion: You have unclosed square brackets '['. Make sure all node labels are properly closed with ']'." | |
| enhancedMessage += | |
| "\n\n" + t("common:mermaid.suggestion.unclosed_brackets") |
| !code.trim().startsWith("graph") && | ||
| !code.trim().startsWith("flowchart") && | ||
| !code.trim().startsWith("sequenceDiagram") && | ||
| !code.trim().startsWith("classDiagram") |
There was a problem hiding this comment.
Is this list of diagram types comprehensive? Mermaid supports additional diagram types like stateDiagram, erDiagram, gantt, pie, gitGraph, etc. Could we expand this check to include all supported types, or perhaps use a more flexible approach?
| } | ||
|
|
||
| // Check for incomplete node definitions | ||
| if (code.includes("@") && !code.includes("]") && !code.includes("}")) { |
There was a problem hiding this comment.
Currently only checking for '@' character, but could there be other special characters that might need proper enclosure in node labels? Perhaps we could expand this check to include other common special characters that cause parsing issues?
| const errorDetails = screen.getByText(/Make sure your diagram starts with a valid diagram type/) | ||
| expect(errorDetails).toBeInTheDocument() | ||
| }) | ||
| }) |
There was a problem hiding this comment.
Would it be helpful to add a test case for the special character detection with '@'? I noticed the implementation checks for this scenario but there's no corresponding test to verify it works correctly.
hannesrudolph
added
the
Issue/PR - Triage
|
Closing, this looks like the model made a mistake |
This PR improves the error handling for Mermaid diagrams by providing more helpful error messages with specific suggestions for common syntax errors.
Changes
Enhanced error messages with specific suggestions for:
[in node labels{in decision nodes-->)Improved error display with proper whitespace formatting (
whiteSpace: "pre-wrap")Added comprehensive test coverage for all error handling scenarios
Testing
Example
When a user enters an incomplete Mermaid diagram like:
flowchart TD A[Users Credentials] --> B{AuthController@cheInstead of just showing a generic parse error, the enhanced error message now includes:
Fixes #6712
Important
Improves Mermaid diagram error handling with specific suggestions for common syntax errors and adds comprehensive test coverage.
enhanceErrorMessage()inMermaidBlock.tsxprovides suggestions for unclosed brackets, unclosed braces, incomplete arrow connections, and missing diagram type declarations.whiteSpace: "pre-wrap"for better formatting.MermaidBlock.spec.tsxto cover various error scenarios, ensuring enhanced error messages are displayed correctly.This description was created by
for 0f55ac9. You can customize this summary. It will automatically update as commits are pushed.