🚀 MCP 服务器：Mermaid 验证器

一个模型上下文协议（Model Context Protocol）服务器，用于验证和渲染 Mermaid 图表。此服务器让大型语言模型能够对 Mermaid 图表进行验证和渲染。

🚀 快速开始

你可以通过将 MCP 客户端配置为使用 Mermaid 验证器，将其添加到你的 mcp 服务器文件中：

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

✨ 主要特性

• 可让大型语言模型验证和渲染 Mermaid 图表。
• 采用简单的 TypeScript Node.js 应用程序架构，便于集成和扩展。

📚 详细文档

高阶架构

总体架构

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

1. 主要应用程序：一个 Node.js 服务，用于验证 Mermaid 图表并返回渲染的 SVG 输出。
2. MCP 集成：使用模型上下文协议 SDK 来暴露与 MCP 兼容客户端的功能。
3. Mermaid CLI 集成：利用 Mermaid CLI 工具来执行图表验证和渲染。

代码结构

mcp-mermaid-validator/
├── dist/                   # 编译后的 JavaScript 输出
│   └── main.js             # 主应用程序入口文件
├── src/                    # TypeScript 源代码
│   └── main.ts             # 主应用程序入口点
├── node_modules/           # 依赖项
├── package.json            # 项目依赖和脚本
├── package-lock.json       # 依赖项锁定文件
├── tsconfig.json           # TypeScript 配置
├── eslint.config.js        # ESLint 配置
├── .prettierrc             # Prettier 配置
└── README.md               # 项目文档

组件功能

MCP 服务器（核心组件）

主要功能在 src/main.ts 中实现。此组件：

1. 创建一个 MCP 服务器实例。
2. 注册一个 validateMermaid 工具，接受 Mermaid 图表语法。
3. 使用 Mermaid CLI 执行图表验证和渲染。
4. 返回验证结果以及渲染的 SVG（如果有效）。
5. 处理错误情况。

数据流程

1. 接收输入：通过标准输入接收 Mermaid 图表代码。
2. 解析和验证：使用 Mermaid 解释器解析代码，检查语法是否正确。
3. 渲染输出：将有效的 Mermaid 代码转换为 SVG 格式的图形。
4. 返回结果：将生成的 SVG 输出到标准输出。

依赖项

构建工具

• TypeScript：用于编写和编译 TypeScript 源代码。
• Babel：用于 JavaScript 转译，确保兼容性。
• Webpack：用于打包模块化代码。
• TSC：TypeScript 编译器，用于类型检查。

开发工具

• npm scripts：管理构建、格式化和测试任务。
• Prettier：代码格式化工具，保持编码风格一致。
• ESLint：静态代码分析工具，确保代码质量。
• Git：版本控制系统，用于项目管理和协作。

运行时依赖

• Mermaid CLI：执行 Mermaid 图表渲染。
• Node.js：运行环境。

API 规范

输入格式

{
  "code": "```mermaid\ngraph LR\n    A[开始] --> B{判断}\n    B -->|是| C[处理]\n    C --> D[结束]\n    B -->|否| E[结束]\n```\n"
}

输出格式

{
  "result": "<svg>...</svg>",
  "error": null
}

📦 安装指南

应用程序可以通过 npm 脚本进行构建和运行：

# 安装依赖项
npm install

# 构建应用程序
npm run build

# 本地运行（开发）
npx @modelcontextprotocol/inspector node dist/main.js

# 格式化代码
npm run format

# 检查代码
npm run lint

# 监控更改（开发）
npm run watch

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

📄 发布说明

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

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