Mermaid Diagram Generator MCP server

This server generates diagrams from Mermaid syntax by providing a simple API interface. It uses mermaid-cli under the hood to render diagrams as PNG images, making it easy to integrate diagram generation into your applications.

Prerequisites

• Python 3.7+
• Node.js and npm (for mermaid-cli)
• mermaid-cli installed globally

Installation

To install the Mermaid Diagram Generator Server:

1. Clone the repository to your local machine
2. Install Python dependencies:

pip install -r requirements.txt

3. Ensure mermaid-cli is installed globally:

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

Running the Server

Start the server with the following command:

python server.py

By default, the server runs on http://localhost:5000.

Temporary Files

The server creates a local directory called temp_files in the project folder for storing temporary files. This approach:

• Avoids permission issues with system temp directories
• Works better in virtual environments
• Automatically cleans up files older than 30 minutes

API Usage

Web Interface

The simplest way to use the server is through the web interface:

1. Open your browser
2. Navigate to http://localhost:5000
3. Use the interface to create and generate diagrams

API Endpoint

For programmatic access, send a POST request to /generate with a JSON body containing your Mermaid diagram:

{
  "mermaid": "graph TD\nA[Client] --> B[Load Balancer]\nB --> C[Server1]\nB --> D[Server2]",
  "theme": "default",
  "background": "white"
}

Parameters:

• mermaid: Your Mermaid diagram syntax (required)
• theme: Optional theme (default, dark, forest, neutral)
• background: Optional background color (white, transparent)

The server will return a PNG image of the rendered diagram.

Example using curl:

curl -X POST http://localhost:5000/generate \
  -H "Content-Type: application/json" \
  -d '{"mermaid":"graph TD\nA[Client] --> B[Load Balancer]"}' \
  --output diagram.png

Troubleshooting

If you encounter errors:

• Ensure mermaid-cli (mmdc) is installed and accessible in your PATH
• Check server logs for specific error messages
• Make sure your Mermaid syntax is valid
• Verify the temp_files directory exists and has appropriate permissions

To test if everything is working correctly, run the included test script:

python test.py

This will generate a sample diagram and save it as output_diagram.png.

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.