mermaid-mcp-server

# Mermaid MCP Server [](https://badge.fury.io/js/mermaid-mcp-server) <!-- バッジは公開後に有効になります --> A [Model Context Protocol (MCP)](https://github.com/modelcontextprotocol/specification) server providing tools for validating and rendering [Mermaid](https://mermaid.js.org/) 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):** ```bash 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: ```json { "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: ```bash git clone https://github.com/TanisukeGoro/mermaid-mcp-server.git cd mermaid-mcp-server ``` 2. Install dependencies: ```bash npm install ``` 3. Build the server: ```bash npm run build ``` *(Use `npm run watch` for automatic rebuilding during development.)* 4. Test with the MCP Inspector: ```bash npm run inspector ``` ## Contributing Contributions are welcome! Please open an issue or submit a pull request. ## License [MIT](./LICENSE)