Add mermaid-to-image extension by chihkang · Pull Request #17621 · raycast/extensions

chihkang · 2025-03-07T01:25:15Z

Description

A Raycast extension that instantly converts Mermaid diagram code from your clipboard into beautiful images.

Screencast

Checklist

I read the extension guidelines
I read the documentation about publishing
I ran npm run build and tested this distribution build in Raycast
I checked that files in the assets folder are used by the extension itself
I checked that assets used by the README are placed outside of the metadata folder

- Update images in metadata - Refactor error handling in mermaid-to-image.tsx - Update package.json and improve temporary file cleanup - Update dependencies and fix license year - Refactor diagram generation logic by simplifying possiblePaths declaration and removing unused stdout and stderr handling - Add metadata images - Update README and package files to clarify Mermaid CLI installation and update type definitions - Refactor image handling and cleanup in Mermaid diagram generation - Update dependencies and clean up package-lock.json - Refactor Mermaid diagram generation by removing redundant Node.js path checks and updating command execution logic - Update dependencies and modify extension icon - Update documentation and remove unused files - init

raycastbot · 2025-03-07T01:25:37Z

Congratulations on your new Raycast extension! 🚀

Due to our current reduced availability, the initial review may take up to 10-15 business days

Once the PR is approved and merged, the extension will be available on our Store.

greptile-apps

PR Summary

This PR adds a new Mermaid to Image extension that converts Mermaid diagram code from clipboard into PNG/SVG images with multiple theme options and file handling capabilities.

Since this is a new extension with view commands in package.json, a metadata folder with screenshots should be added as per extension store guidelines
The launchCommand in mermaid-to-image.tsx should be wrapped in try-catch blocks for better error handling
Consider adding subtitle with "Mermaid" to the command in package.json to better identify the service
The showToast error handling in mermaid-to-image.tsx could be simplified using showFailureToast from @raycast/utils in several places
Chinese comments in mermaid-to-image.tsx should be translated to English as Raycast doesn't support localization

_{💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!}

_{9 file(s) reviewed, 6 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

extensions/mermaid-to-image/CHANGELOG.md

extensions/mermaid-to-image/README.md

extensions/mermaid-to-image/package.json

extensions/mermaid-to-image/src/mermaid-to-image.tsx

chihkang · 2025-03-07T02:22:14Z

@greptileai check it out now

greptile-apps

PR Summary

This PR adds a new Mermaid to Image extension with several updates since the last review.

The List component in mermaid-to-image.tsx should use isLoading prop to avoid empty state flicker as per store guidelines
The getSelectedText() function should include error handling for cases where text selection fails
The title in CHANGELOG.md ("Mermaid-to-image") should match package.json's title ("Mermaid to Image") for consistency
Consider adding isLoading state to the Detail component to improve the loading experience

Note: This review focuses on new points not covered in previous reviews, particularly around loading states and error handling improvements.

_{9 file(s) reviewed, 2 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

extensions/mermaid-to-image/.gitignore

extensions/mermaid-to-image/src/mermaid-to-image.tsx

chihkang · 2025-03-07T02:49:27Z

@greptileai check it out now

greptile-apps

PR Summary

(updates since last review)

This PR updates the Mermaid to Image extension with improved error handling and loading states.

The getSelectedText() function in mermaid-to-image.tsx now includes proper error handling with try-catch blocks and showFailureToast
Loading states have been added to both List and Detail components to prevent empty state flicker
The CHANGELOG.md title has been updated to match package.json's "Mermaid to Image" for consistency
The Detail component now properly handles loading states for better user experience

Note: This summary focuses on recent changes not mentioned in previous reviews, particularly around error handling and loading state improvements.

_{3 file(s) reviewed, 2 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

extensions/mermaid-to-image/src/mermaid-to-image.tsx

chihkang · 2025-03-07T03:02:35Z

@greptileai check it out now~

greptile-apps

PR Summary

(updates since last review)

Based on the latest changes to the Mermaid to Image extension, here's my review focusing on new points not previously covered:

The PR adds improvements to the Mermaid diagram code conversion extension with enhanced error handling and cleanup.

The launchCommand function in mermaid-to-image.tsx should handle cleanup of temporary files in both success and error cases to prevent file system clutter
Consider adding a check for mmdc command availability before attempting diagram generation to provide better user feedback
The execPromise timeout of 10000ms in launchCommand might be insufficient for complex diagrams, consider making this configurable via preferences
The clipboard restoration logic in getSelectedText() could be improved to handle edge cases where previousClipboard.text is undefined

Note: This review focuses on new aspects not mentioned in previous reviews, particularly around resource management and edge case handling.

_{1 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

extensions/mermaid-to-image/src/mermaid-to-image.tsx

chihkang · 2025-03-07T03:36:06Z

@greptileai check it out now~

greptile-apps

PR Summary

(updates since last review)

Based on the latest changes to the Mermaid to Image extension, here's my review focusing on new points not previously covered:

This PR adds a configurable timeout and improved file handling to the Mermaid diagram conversion extension.

The Preferences and Arguments interfaces in mermaid-to-image.tsx are unnecessary since they are auto-generated in raycast-env.d.ts
The findMmdcPath() function should use showFailureToast instead of showToast with Style.Failure for consistency
The ImagePreview component could benefit from a loading state while reading image files
The savePath preference in package.json should include validation to ensure it's a valid directory path

Note: This review focuses on recent changes and aspects not mentioned in previous reviews, particularly around type definitions and preference validation.

_{2 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

extensions/mermaid-to-image/src/mermaid-to-image.tsx

chihkang · 2025-03-07T03:48:36Z

@greptileai check it out

greptile-apps

PR Summary

(updates since last review)

Based on the latest changes to the Mermaid to Image extension, here's my review focusing on new points not previously covered:

The PR adds improved error handling and loading states to the Mermaid diagram conversion extension.

The ImagePreview component in mermaid-to-image.tsx now properly implements loading states with isLoading={true} to prevent UI flicker
The showFailureToast from @raycast/utils is now consistently used throughout the codebase for error handling
The Preferences interface has been removed as it's auto-generated in raycast-env.d.ts
The subtitle has been added to the command in package.json with "Generate Diagram Images from Mermaid Markup" for better service identification

Note: This review focuses on recent changes and aspects not mentioned in previous reviews, particularly around UI improvements and code cleanup.

_{2 file(s) reviewed, 3 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

extensions/mermaid-to-image/package.json

extensions/mermaid-to-image/src/mermaid-to-image.tsx

chihkang · 2025-03-07T05:01:10Z

@greptileai check it out

greptile-apps

PR Summary

(updates since last review)

Based on the latest changes to the Mermaid to Image extension, here's my review focusing on new points not previously covered:

The PR adds improved error handling and cleanup functionality to the Mermaid diagram conversion extension.

The cleanupTempFile function in mermaid-to-image.tsx should be called in the component's cleanup effect to ensure temporary files are removed when unmounting
The generationTimeout preference in package.json has proper validation with ^[1-9]\\d*$ to ensure positive integers
The savePath preference validation pattern ^$|^/?(/[^/]+)+/?$ correctly ensures valid directory paths
The findMmdcPath function now properly checks multiple possible installation locations for better compatibility

Note: This review focuses on recent changes and aspects not mentioned in previous reviews, particularly around cleanup and validation improvements.

_{2 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings | Greptile}

pernielsentikaer

I gave it a spin and got to this view

I installed with the npm command and it ended here: /Users/pernielsentikaer/.nvm/versions/node/v22.12.0/bin/mmdc which is not found, should we consider adding a custom path too in preferences?

- Introduced a new preference for specifying a custom mmdc path in package.json, allowing users to define their own executable location for better flexibility. - Enhanced the findMmdcPath function in mermaid-to-image.tsx to first check for the custom path before falling back to default locations. This includes handling of glob patterns for NVM installations and improved error messaging for better user guidance. - Updated error handling to provide clearer instructions if the mmdc command is not found, encouraging users to either install the mermaid-cli or set a custom path in preferences.

chihkang · 2025-03-12T15:21:42Z

@pernielsentikaer Done🎉

pernielsentikaer

I'm getting a new error now, but at least it found the mmdc 😊

Could you try to use enviroment.supportPath

…ility This commit completely reorganizes the extension's codebase to improve maintainability, readability, and separation of concerns: - Split monolithic index.tsx into modular components and utilities - Create dedicated directories for components, utils, and types - Extract ImagePreview into a separate component - Organize utility functions by domain (clipboard, files, executables, diagram) - Improve type safety with dedicated types file - Maintain all existing functionality while improving code organization - Ensure consistent error handling patterns throughout the codebase - Reduce code duplication by extracting common functionality

pernielsentikaer

I was able to get it to work this time, but when an error occurs, should we maybe skip the part of showing so much about it, like here? It feels overwhelming. What do you think?

greptile-apps

PR Summary

(updates since last review)

Based on the latest changes to the Mermaid to Image extension, here's my review focusing on new points not previously covered:

The PR improves error handling and resource management in the diagram generation functionality.

The generateDiagramWithExplicitNode in diagram.ts should consolidate error message parsing into a separate helper function for better maintainability
The cleanupResources helper function in diagram.ts should be moved outside to be reusable across different functions
The findMmdcPath in executables.ts should consolidate success toasts to avoid multiple notifications when checking different paths
The error handling in diagram.ts should use more specific error types for better error differentiation

Note: This review focuses on code organization and error handling improvements not mentioned in previous reviews.

_{2 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

extensions/mermaid-to-image/src/utils/executables.ts

pernielsentikaer · 2025-03-14T07:41:33Z

extensions/mermaid-to-image/src/mermaid-to-image.tsx

+      await showFailureToast({
+        title: "Diagram Generation Failed",
+        message: userMessage,
+      });


If you're inside a catch you can do like this

Suggested change

await showFailureToast({

title: "Diagram Generation Failed",

message: userMessage,

});

await showFailureToast(error, {

title: "Diagram Generation Failed",

message: userMessage,

});

if not inside a catch it's better to use the regular toast (since this uses error)

@pernielsentikaer
Thank you for your valuable suggestions 😊

ImagePreview and diagram generation by including error details in showFailureToast calls for improved debugging 🛠️✨

github-actions · 2025-03-14T12:03:28Z

Published to the Raycast Store:
https://raycast.com/chihkang/mermaid-to-image

raycastbot · 2025-03-14T12:03:30Z

🎉 🎉 🎉

We've rewarded your Raycast account with some credits. You will soon be able to exchange them for some swag.

raycastbot added the new extension Label for PRs with new extensions label Mar 7, 2025

greptile-apps bot reviewed Mar 7, 2025

View reviewed changes

Update documentation and improve error handling

6c7b869

greptile-apps bot reviewed Mar 7, 2025

View reviewed changes

extensions/mermaid-to-image/.gitignore Outdated Show resolved Hide resolved

extensions/mermaid-to-image/src/mermaid-to-image.tsx Outdated Show resolved Hide resolved

Update .gitignore and improve clipboard handling

4b963cb

greptile-apps bot reviewed Mar 7, 2025

View reviewed changes

extensions/mermaid-to-image/src/mermaid-to-image.tsx Outdated Show resolved Hide resolved

extensions/mermaid-to-image/src/mermaid-to-image.tsx Show resolved Hide resolved

Update mermaid-to-image.tsx for improved clipboard handling

3cf1ee0

greptile-apps bot reviewed Mar 7, 2025

View reviewed changes

extensions/mermaid-to-image/src/mermaid-to-image.tsx Show resolved Hide resolved

Add generation timeout preference and improve mmdc path handling

8471f49

greptile-apps bot reviewed Mar 7, 2025

View reviewed changes

extensions/mermaid-to-image/src/mermaid-to-image.tsx Show resolved Hide resolved

Update image handling and preferences validation

3b7ea6a

greptile-apps bot reviewed Mar 7, 2025

View reviewed changes

extensions/mermaid-to-image/package.json Outdated Show resolved Hide resolved

extensions/mermaid-to-image/package.json Outdated Show resolved Hide resolved

extensions/mermaid-to-image/src/mermaid-to-image.tsx Outdated Show resolved Hide resolved

Update validation rules and simplify toast handling

86b8749

greptile-apps bot reviewed Mar 7, 2025

View reviewed changes

pernielsentikaer self-assigned this Mar 12, 2025

pernielsentikaer requested changes Mar 12, 2025

View reviewed changes

chihkang requested a review from pernielsentikaer March 12, 2025 15:21

pernielsentikaer requested changes Mar 13, 2025

View reviewed changes

pernielsentikaer reviewed Mar 13, 2025

View reviewed changes

greptile-apps bot reviewed Mar 14, 2025

View reviewed changes

extensions/mermaid-to-image/src/utils/executables.ts Show resolved Hide resolved

Improve error logging

625db63

chihkang requested a review from pernielsentikaer March 14, 2025 03:13

pernielsentikaer reviewed Mar 14, 2025

View reviewed changes

chihkang and others added 2 commits March 14, 2025 19:03

Merge branch 'raycast:main' into ext/mermaid-to-image

147b23a

Enhance error handling

f1efc12

ImagePreview and diagram generation by including error details in showFailureToast calls for improved debugging 🛠️✨

chihkang requested a review from pernielsentikaer March 14, 2025 11:37

pernielsentikaer approved these changes Mar 14, 2025

View reviewed changes

Update CHANGELOG.md and optimise images

4996e87

raycastbot merged commit 92ff351 into raycast:main Mar 14, 2025
2 checks passed

chihkang deleted the ext/mermaid-to-image branch March 17, 2025 09:50

Conversation

chihkang commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screencast

Checklist

Uh oh!

raycastbot commented Mar 7, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chihkang commented Mar 7, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

Uh oh!

chihkang commented Mar 7, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

Uh oh!

chihkang commented Mar 7, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

chihkang commented Mar 7, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

chihkang commented Mar 7, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chihkang commented Mar 7, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

pernielsentikaer left a comment

Choose a reason for hiding this comment

Uh oh!

chihkang commented Mar 12, 2025

Uh oh!

pernielsentikaer left a comment

Choose a reason for hiding this comment

Uh oh!

pernielsentikaer left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

chihkang commented Mar 7, 2025 •

edited

Loading