mermaid-preview-mcp

MCP server for previewing Mermaid diagrams with syntax error handling. Supports GitHub repository visualization.

Catalog onlyCatalog onlySTDIO

Overview

mermaid-preview-mcp is a server application designed for previewing Mermaid diagrams, providing syntax error handling and supporting visualization of GitHub repositories.

To use mermaid-preview-mcp, set up the server and access it through your web browser. You can input Mermaid syntax to generate and preview diagrams instantly.

Real-time preview of Mermaid diagrams - Syntax error detection and handling - Integration with GitHub for repository visualization

Creating flowcharts and diagrams for documentation.
Visualizing project workflows directly from GitHub repositories.
Debugging Mermaid syntax errors in real-time.

Add to your AI client

Use these steps to connect mermaid-preview-mcp in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mermaid-preview-mcp-jptrainers": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-preview-mcp-jptrainers"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mermaid-preview-mcp-jptrainers": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-preview-mcp-jptrainers"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mermaid-preview-mcp-jptrainers": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-preview-mcp-jptrainers"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mermaid-preview-mcp-jptrainers": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-preview-mcp-jptrainers"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mermaid-preview-mcp-jptrainers": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-preview-mcp-jptrainers"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mermaid-preview-mcp-jptrainers": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-preview-mcp-jptrainers"
      ]
    }
  }
}

FAQ

Can I use mermaid-preview-mcp for any type of diagram?

Yes! It supports various types of diagrams including flowcharts, sequence diagrams, and more.

Is mermaid-preview-mcp open-source?

Yes! The project is open-source and available on GitHub.

How do I report issues or contribute?

You can report issues or contribute by visiting the GitHub repository and following the contribution guidelines.

Developer tools