feat(desktop): improve Mermaid CLI setup screen with one-click install, check-again, and collapsible source - #580
Open
AnayGarodia wants to merge 1 commit into
Conversation
…urce to Mermaid setup screen When Mermaid CLI is not detected, the setup screen now offers: - an Install Mermaid CLI button (shown when npm is available) that runs npm install -g @mermaid-js/mermaid-cli in the background with a progress spinner and a scrollable installer output area; on success the CLI check re-runs automatically and the diagram renders - a Check Again button that resets the cached availability and re-runs the existing availability check without restarting the app - a Download Node.js button with a hint when neither node nor npm is found - a collapsible diagram source section, hidden by default Closes askimo-ai#562 Signed-off-by: anay <agarodia98@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
When Mermaid CLI is not detected, the setup screen previously only showed static instructions and required installing externally plus an app restart. This PR makes that flow self-service:
npm install -g @mermaid-js/mermaid-cliin the background viaProcessBuilderExt, with a progress spinner and a scrollable, auto-following installer output area. On success the CLI availability check re-runs automatically and the diagram proceeds to render. On failure the npm output stays visible so the user can see what went wrong.MermaidSvgService.resetAvailabilityCache()), setsisMermaidCliAvailableback tonull, and re-triggers the existingLaunchedEffect, so users who installed the CLI externally no longer need to restart the app.npmavailability up front (MermaidSvgService.isNpmAvailable()). If npm is missing, the install button is replaced by a "Download Node.js" button plus a hint, so the primary CTA is always actionable.Service changes live in
MermaidSvgService(isNpmAvailable(),installMermaidCli()with a 10-minute timeout and threaded output reader matching the existingisMermaidCliAvailable()pattern, andresetAvailabilityCache()). New UI strings were added tomessages.propertiesand all nine locale files; the now-unusedmermaid.diagram.source.labelkey was removed.How to test
mmdcis not installed (npm uninstall -g @mermaid-js/mermaid-cli) and ask Askimo for a Mermaid diagram — the setup screen appears with the install and Check Again buttons.Verification
Using Temurin JDK 25, as required by the Gradle toolchain:
./gradlew :desktop-shared:build(includes tests)./gradlew :desktop-shared:spotlessCheck./gradlew detekt(aggregate gate: 0 errors)All tasks completed successfully.
Closes #562