remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Integrations

Validates and renders Mermaid diagrams, returning validation results and rendered SVG/PNG output when valid, enabling LLMs to create and verify diagram syntax.

MCP 服务器：美人鱼验证器

一个用于验证和渲染Mermaid图的模型上下文协议服务器。该服务器使 LLM 能够验证和渲染 Mermaid 图。

用法

快速入门

您可以通过将 Mermaid Validator 添加到您的 mcp 服务器文件中来配置您的 MCP 客户端以使用 Mermaid Validator：

{
  "mcpServers": {
    "mermaid-validator": {
      "command": "npx",
      "args": [
        "-y",
        "@rtuin/mcp-mermaid-validator"
      ]
    }
  }
}

建筑学

高级架构

该项目的结构是一个简单的 TypeScript Node.js 应用程序，它：

主应用程序：验证美人鱼图并返回渲染的 SVG 输出的 Node.js 服务
MCP 集成：使用模型上下文协议 SDK 向 MCP 兼容客户端公开功能
Mermaid CLI 集成：利用 Mermaid CLI 工具执行图表验证和渲染

代码结构

mcp-mermaid-validator/
├── dist/                   # Compiled JavaScript output
│   └── main.js             # Compiled main application
├── src/                    # TypeScript source code
│   └── main.ts             # Main application entry point
├── node_modules/           # Dependencies
├── package.json            # Project dependencies and scripts
├── package-lock.json       # Dependency lock file
├── tsconfig.json           # TypeScript configuration
├── eslint.config.js        # ESLint configuration
├── .prettierrc             # Prettier configuration
└── README.md               # Project documentation

组件功能

MCP 服务器（主要组件）

核心功能在src/main.ts中实现。该组件：

创建 MCP 服务器实例
注册一个接受 Mermaid 图表语法的validateMermaid工具
使用 Mermaid CLI 验证和渲染图表
返回验证结果并渲染 SVG（如果有效）
使用适当的错误消息处理错误情况

数据流

输入：美人鱼图语法作为字符串
加工：
- 该图通过 stdin 传递给 Mermaid CLI
- CLI 验证语法，如果有效则渲染 SVG
- 从 stdout/stderr 捕获输出和错误
输出：
- 成功：文本确认+渲染 SVG 作为 base64 编码图像
- 失败：包含验证失败详细信息的错误消息

依赖项

外部库

@modelcontextprotocol/sdk ：用于实现模型上下文协议的 SDK
@mermaid-js/mermaid-cli ：用于验证和渲染 Mermaid 图表的 CLI 工具
zod ：TypeScript 的模式验证库

开发依赖项

typescript ：TypeScript 编译器
eslint ：Lint 实用程序
Prettier ：代码格式化

API 规范

验证美人鱼工具

目的：验证美人鱼图，如果有效则返回渲染的 SVG

参数：

diagram （字符串）：要验证的美人鱼图语法

返回值：

成功：
{ content: [ { type: "text", text: "Mermaid diagram is valid" }, { type: "image", data: string, // Base64-encoded PNG mimeType: "image/png" } ] }
失败：
{ content: [ { type: "text", text: "Mermaid diagram is invalid" }, { type: "text", text: string // Error message }, { type: "text", text: string // Detailed error output (if available) } ] }

技术决策

MCP 集成：该项目使用模型上下文协议来标准化 AI 工具的接口，从而实现与兼容客户端的无缝集成。
PNG 输出格式：该实现使用 PNG 作为默认输出格式，以确保与大多数 MCP 客户端（尤其是不支持 SVG 的 Cursor）更好地兼容。
子进程方法：该实现使用 Node.js 子进程与 Mermaid CLI 交互，它提供：
- 主应用程序与渲染进程之间的隔离
- 能够捕获详细的错误信息
- 正确处理渲染管道
错误处理策略：实现使用嵌套的try-catch结构来：
- 区分验证错误（无效图表语法）和系统错误
- 提供详细的错误信息以帮助用户修复他们的图表
- 确保即使在处理无效输入时服务仍然保持稳定
简单的项目结构：该项目使用简单的 TypeScript 项目结构来：
- 易于维护和理解
- 直接依赖管理
- 简化的构建过程

构建和执行

可以使用 npm 脚本构建和运行该应用程序：

# Install dependencies
npm install

# Build the application
npm run build

# Run locally (for development)
npx @modelcontextprotocol/inspector node dist/main.js

# Format code
npm run format

# Lint code
npm run lint

# Watch for changes (development)
npm run watch

该应用程序作为 MCP 服务器运行，通过标准输入/输出进行通信，使其适合与 MCP 兼容客户端集成。

发布

要发布新版本，请按以下步骤操作：

npm run build
npm run bump
npm run changelog
npm publish --access public

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

validateMermaid

验证和呈现美人鱼图的模型上下文协议服务器。

Related Resources

Reddit Discussion about this server