Mermaid To Jpeg

A local Model Context Protocol (MCP) server for Cursor that enables converting Markdown files to JPEG images. This server supports both regular markdown content and Mermaid diagrams.

Features

• Convert regular Markdown files to JPEG images
• Convert Mermaid diagrams to JPEG images
• Configurable image dimensions and quality
• Automatic detection of Mermaid diagram syntax
• Clean, styled output for regular markdown content

Prerequisites

Make sure you have the following installed:

• Node.js (v14 or later)
• npm or yarn
• ImageMagick (brew install imagemagick)
• Mermaid CLI (npm install -g @mermaid-js/mermaid-cli)

Installation

1. Clone or copy the project files to your desired location
2. Install dependencies:

   npm install
   

Usage

Standalone Script

You can use the standalone script to convert markdown files:

# Convert markdown to JPEG
node md-to-jpeg.js input.md [output.jpeg]

# Convert using the original mermaid-only script
node generate-diagram.js input.md [output.png]

MCP Server

The MCP server provides two tools:

1. convert_md_to_jpeg: Convert any markdown file to JPEG
2. convert_mermaid_to_jpeg: Convert Mermaid diagrams to JPEG

MCP Server Configuration

To use with Cursor, add the following to your MCP configuration:

{
  "mcpServers": {
    "markdown-to-jpeg": {
      "command": "node",
      "args": ["/path/to/your/cursor-mcp/server.js"],
      "env": {}
    }
  }
}

Running the Server

Start the MCP server:

npm start

Or run directly:

node server.js

Tools Available

convert_md_to_jpeg

Convert a markdown file to JPEG image with customizable options.

Parameters:

• input_file (required): Path to the input markdown file
• output_file (optional): Path for the output JPEG file
• width (optional): Width of the output image (default: 1200)
• height (optional): Height of the output image (default: 800)
• quality (optional): JPEG quality 1-100 (default: 90)

convert_mermaid_to_jpeg

Convert a Mermaid diagram file to JPEG image.

Parameters:

• input_file (required): Path to the input mermaid file
• output_file (optional): Path for the output JPEG file

Example Usage

Regular Markdown

# My Document

This is a sample markdown document with:

- **Bold text**
- *Italic text*
- `Code snippets`

## Code Block

```javascript
function hello() {
  console.log("Hello, world!");
}

This is a blockquote

### Mermaid Diagram

```markdown
```mermaid
graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

## Supported Formats

- **Input**: Markdown (.md), Mermaid diagrams
- **Output**: JPEG (.jpeg, .jpg)

## Dependencies

- `@modelcontextprotocol/sdk`: MCP SDK for server implementation
- `puppeteer`: For rendering HTML to images
- `marked`: Markdown parsing
- `@mermaid-js/mermaid-cli`: Mermaid diagram generation
- `imagemagick`: Image format conversion

## Troubleshooting

### Common Issues

1. **"mmdc command not found"**: Install Mermaid CLI globally
   ```bash
   npm install -g @mermaid-js/mermaid-cli

2. "convert command not found": Install ImageMagick

   brew install imagemagick
   

3. Puppeteer issues: Make sure Chrome/Chromium is installed and accessible

Testing

Test the conversion with a sample file:

npm test

Or create a test markdown file and run:

echo "# Test Document\n\nThis is a test." > test.md
node md-to-jpeg.js test.md

License

MIT License