Mermaid MCP Server

🚀 Octopus Monster MCP Server

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

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

🚀 Quick Start

The Octopus Monster MCP Server is a powerful tool for handling Mermaid diagrams. It offers features like syntax validation, SVG rendering, and access to official documentation.

✨ Features

• Validate Mermaid Syntax: Check if the provided Mermaid code has correct syntax.
• Render to SVG: Convert valid Mermaid code into SVG image format.
• Get Documentation Links: Provide links to the official Mermaid documentation.

📦 Installation

Prerequisites

• Node.js (Recommended v18 or higher)
• npm or yarn
• A compatible MCP client (e.g., Roo Cline VSCode extension)

This server uses @mermaid-js/mermaid-cli internally and relies on Puppeteer to render diagrams. Puppeteer will download Chromium if it cannot find a suitable version. Ensure you have an internet connection when running for the first time or updating dependencies.

You can install this server globally or locally in your project. However, when using it with an MCP client (such as Roo Cline), it is usually configured through the client's settings file rather than being directly installed in the development project.

Using with Roo Cline (Recommended):

1. Install the package globally (or note if installing locally in the project):

   npm install -g mermaid-mcp-server
   

   (Alternatively, if you clone and build from the source code, note the actual path of the build/index.js file.)

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

   • 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": ["build/index.js"]
       }
     }
   }
   

3. Start VSCode and reload the window: After completion, open VSCode and reload the window to apply the settings.

💻 Usage Examples

Basic Usage

Validate Syntax

1. After installing the server, run the following command in the terminal:

   mermaid-mcp-server validate --source <source_file_path> [--options]
   

2. Supported options include:
   • --ignore-unknownDirectives: Ignore unknown directives (optional)
   • --strict: Enable strict mode (optional)

Render SVG

1. Run the following command in the terminal:

   mermaid-mcp-server render --source <source_file_path> [--options]
   

2. Supported options include:
   • --theme <theme>: Specify the theme (default is light)
   • --outputDir <output_directory>: Specify the output directory

Get Documentation Links

Run the following command in the terminal:

mermaid-mcp-server getDocument --source <source_file_path>

🤝 Contributing

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

📄 License

MIT