Mermaid to Image

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

Features

• Instant Conversion: Copy Mermaid code and run the extension to immediately generate an image
• AI Integration: Use in Raycast AI chat to generate diagrams that automatically appear inline in the conversation
• Multiple Formats: Generate diagrams in PNG or SVG format (AI Tool always uses PNG)
• Theme Options: Choose from Default, Forest, Dark, or Neutral themes
• Easy Sharing: Copy the generated image directly to your clipboard
• Custom Save Location: Save images to your preferred directory

Installation

1. Make sure you have Node.js installed on your system
2. Install the required Mermaid CLI tool globally by running:
3. Install the extension from Raycast Store

npm install -g @mermaid-js/mermaid-cli

Requirements

• Node.js (v14 or higher)
• @mermaid-js/mermaid-cli (must be installed globally using ⁠npm install -g @mermaid-js/mermaid-cli)

Usage

Manual Mode

1. Prepare Mermaid Code:

   • Option 1: Select text containing Mermaid diagram code in any application
   • Option 2: Copy Mermaid diagram code to your clipboard

   Example:

   graph TD
       A[Start] --> B{Is it working?}
       B -->|Yes| C[Great!]
       B -->|No| D[Debug]
       D --> B
   

2. Run the Extension: Open Raycast and run "Mermaid to Image"

3. View and Share: The extension will automatically generate an image from your selected text or clipboard content (selected text takes priority)

4. Available Actions:

   • Copy Image (⌘⇧C): Copy the generated image to your clipboard
   • Save Image (⌘S): Save the image to your specified location
   • Open in Default App (⌘O): Open the image in your default image viewer

AI Chat Mode

Use the extension directly in Raycast AI conversations:

1. Start a conversation: Open Raycast AI chat
2. Request a diagram: Ask the AI to create any type of Mermaid diagram
   • Example: "@mermaid-to-image Draw a flowchart showing the user login process"
   • Example: "@mermaid-to-image Create a sequence diagram for API authentication"
3. Automatic display: The generated diagram will automatically appear inline in the conversation and be copied to your clipboard

Where are AI-generated diagrams stored?

• Location: ~/Downloads/MermaidDiagrams/
• Format: PNG (optimized for AI chat display)
• Retention: Diagrams are kept permanently for future reference
• Easy access: Open in Finder to view all generated diagrams

Manual Mode File Management:

• Storage: Temporary files are stored in a hidden system directory (environment.supportPath)
• Automatic Cleanup: Files are automatically deleted when you close the preview
• Old File Cleanup: Files older than 1 hour are automatically cleaned up on each launch to prevent disk space accumulation
• No Manual Intervention: You don't need to worry about temporary files - they're managed automatically
• Saving: Use the "Save Image" action (⌘S) to explicitly save diagrams to your preferred location

Preferences

Configure the extension in Raycast preferences:

• Output Format: Choose between PNG or SVG format
• Theme: Select from Default, Forest, Dark, or Neutral themes
• Save Path: Specify a custom directory for saving images (defaults to Downloads folder)

Examples

Here are some example Mermaid diagrams you can try:

Flowchart

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B

Sequence Diagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Class Diagram

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

Troubleshooting

• Empty Clipboard: Make sure you've copied valid Mermaid code before running the extension
• Node.js Not Found: Ensure Node.js is installed and in your PATH
• Memory Issues: For complex diagrams, the extension automatically allocates more memory

Credits

This extension uses:

• @mermaid-js/mermaid-cli for command-line generation

License

MIT

---

Made with ❤️ for Raycast