When Mermaid CLI is not detected, the current setup screen shows instructions and a link to the guide, but requires the user to leave the app, install manually, and restart. We should make this experience much smoother.
Current Behavior
App detects mmdc is missing
Shows a static setup screen with a link to the guide. See MermaidChartRenderer
User must install CLI externally, then restart the app to retry
Proposed Improvements
- One-click install button
Add an "Install Mermaid CLI" button that runs npm install -g @mermaid-js/mermaid-cli in the background via ProcessBuilderExt and MermaidSvgService
Show a progress spinner with a log output area while installing
On success: automatically re-check CLI availability and proceed to render
On failure: show the error output so the user knows what went wrong (e.g. npm not found)
- "I've installed it - check again" button
Add a "Check Again" / "I've Installed It" button that re-triggers the isMermaidCliAvailable check without restarting the app.
Mechanically: reset isMermaidCliAvailable to null to re-run the existing LaunchedEffect
This is the minimum viable improvement for users who install CLI externally
- Collapsible diagram source
Make the raw diagram code section collapsible (show/hide toggle) so the setup screen is less noisy by default. The diagram source is useful but secondary information.
- (Optional) Detect Node.js / npm separately
Before showing the install button, check if node/npm is present:
If neither is found: show "Install Node.js first" as the primary CTA
If npm is found but mmdc is not: show the one-click install button
When Mermaid CLI is not detected, the current setup screen shows instructions and a link to the guide, but requires the user to leave the app, install manually, and restart. We should make this experience much smoother.
Current Behavior
App detects mmdc is missing
Shows a static setup screen with a link to the guide. See MermaidChartRenderer
User must install CLI externally, then restart the app to retry
Proposed Improvements
Add an "Install Mermaid CLI" button that runs npm install -g @mermaid-js/mermaid-cli in the background via ProcessBuilderExt and MermaidSvgService
Show a progress spinner with a log output area while installing
On success: automatically re-check CLI availability and proceed to render
On failure: show the error output so the user knows what went wrong (e.g. npm not found)
Add a "Check Again" / "I've Installed It" button that re-triggers the isMermaidCliAvailable check without restarting the app.
Mechanically: reset isMermaidCliAvailable to null to re-run the existing LaunchedEffect
This is the minimum viable improvement for users who install CLI externally
Make the raw diagram code section collapsible (show/hide toggle) so the setup screen is less noisy by default. The diagram source is useful but secondary information.
Before showing the install button, check if node/npm is present:
If neither is found: show "Install Node.js first" as the primary CTA
If npm is found but mmdc is not: show the one-click install button