Mermaid MCP Server

A Model Context Protocol (MCP) server providing tools for validating and rendering Mermaid diagrams.

This server allows AI assistants (like Roo) to interact with Mermaid diagrams, check their syntax, render them into SVG format, and access documentation links.

Features

• Validate Mermaid Syntax: Check if the provided Mermaid code is syntactically correct.
• Render to SVG: Convert valid Mermaid code into SVG image format.
• Get Documentation Link: Provide a link to the official Mermaid documentation.

Prerequisites

• Node.js (v18 or later recommended)
• npm or yarn
• A compatible MCP client (e.g., Roo Cline VSCode Extension)

This server uses @mermaid-js/mermaid-cli internally, which relies on Puppeteer to render diagrams. Puppeteer will download a compatible version of Chromium if not found. Ensure you have network connectivity during the first run or when dependencies are updated.

Installation

You can install this server globally or locally within your project. However, for use with MCP clients like Roo Cline, it's typically configured via the client's settings file rather than installed directly into your development project.

Using with Roo Cline (Recommended):

1. Install the package globally (or note the path if installed locally):

   npm install -g mermaid-mcp-server
   

   (Alternatively, if you clone this repository and build it, note the absolute path to the build/index.js file.)

2. Configure Roo Cline: Open Roo Cline's MCP settings file. The location depends on your OS and VSCode setup:

   • macOS: ~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/mcp_settings.json
   • Windows: %APPDATA%\Code\User\globalStorage\rooveterinaryinc.roo-cline\settings\mcp_settings.json
   • Linux: ~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/mcp_settings.json

   Add the following configuration to the mcpServers object:

   {
     "mcpServers": {
       // ... other servers
       "mermaid-mcp-server": {
         // If installed globally:
         "command": "mermaid-mcp-server",
         // If built from source, use the absolute path:
         // "command": "node",
         // "args": ["/absolute/path/to/mermaid-mcp-server/build/index.js"],
         "disabled": false,
         "alwaysAllow": [] // Add tool names here if you want to skip confirmation
       }
       // ... other servers
     }
   }
   

   Replace /absolute/path/to/mermaid-mcp-server/build/index.js with the actual path if you built the server from source.

3. Restart VSCode or reload the window to ensure Roo Cline picks up the new server configuration.

Available Tools

Once configured, the following tools will be available to the AI assistant:

• validate_mermaid:

  • Description: Validate Mermaid syntax without rendering.
  • Input: { "mermaid_code": "string" }
  • Output: Text indicating success or failure with error details.

• render_mermaid_svg:

  • Description: Render Mermaid code to SVG format.
  • Input: { "mermaid_code": "string" }
  • Output: SVG content as text (mimeType: 'image/svg+xml') or an error message.

• get_mermaid_docs_link:

  • Description: Get a link to the official Mermaid documentation.
  • Input: {} (No input required)
  • Output: Text containing the URL.

Development

1. Clone the repository:

   git clone https://github.com/TanisukeGoro/mermaid-mcp-server.git
   cd mermaid-mcp-server
   

2. Install dependencies:

   npm install
   

3. Build the server:

   npm run build
   

   (Use npm run watch for automatic rebuilding during development.)

4. Test with the MCP Inspector:

   npm run inspector
   

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT