Open
Description
Description
When creating a Gantt chart with specific dependencies, such as cyclic references or invalid task references, the Mermaid renderer fails to display the chart, leaving the screen white. This behavior occurs without any meaningful error message, making it difficult for users to understand the cause of the issue or how to resolve it.
Steps to reproduce
- Paste the code into the Mermaid Live Editor.
- Click "Render."
- Observe the screen remaining white with no diagram or error.
Screenshots
- The renderer fails silently, leaving the screen blank.
- No error messages are displayed in the chart area to indicate what went wrong.
- The browser console logs contain technical errors that are not user-friendly.
Code Sample
gantt
title Project Timeline with Dependencies
dateFormat YYYY-MM-DD
section Development Phase
Planning :plan1, 2025-01-10, 10d
Implementation :impl1, after plan1, 15d
Testing :test1, after review1, 20d %% Cyclic dependency (Testing depends on Review, which depends on Testing)
section QA Phase
Review :review1, after test1, 10d
Final Approval :approve1, after deploy1, 25d %% Invalid reference to "deploy1"
Deployment :deploy1, 2025-01-25, 30d %% Overlapping date with Implementation
Setup
Mermaid Version: v11.4.0
Browser: Chrome Version 132.0.6834.160
Suggested Solutions
- Add error handling in the renderer to detect cyclic dependencies and invalid references during the parsing stage.
- Provide meaningful error messages directly in the rendered output (e.g., "Task C has a cyclic dependency with Task D").
- Allow partial rendering of the diagram by excluding problematic tasks, where possible.
- Improve the console error messages to be more user-friendly.
Additional Context
This issue affects the usability of Gantt charts for users who may unintentionally introduce such dependencies. By improving error handling and feedback, Mermaid can provide a smoother user experience and minimize frustration.