MCP App Mermaid Renderer

美人鱼图渲染器MCP应用程序

一个MCP应用程序，在启用MCP的主机（如Claude Desktop）中将Mermaid图渲染为交互式SVG。

特性

• 呈现任何Mermaid图语法（流程图、序列图、类图等）
• 基于主机上下文的自动明暗主题切换
• 主机样式集成（CSS变量、字体、安全区域插图）
• 可选图表标题

先决条件

• Node.js 18+
• npm

安装

npm install

运行服务器

开发模式（热重载）

npm run dev

生产模式

npm run start

服务器监听 http://localhost:3001/mcp 默认情况下。

要使用其他端口，请执行以下操作：

PORT=4000 npm run serve

标准运输

用于Claude Desktop或其他基于stdio的主机：

npx tsx main.ts --stdio

测试

1.使用基本主机（推荐）

克隆并运行MCP Apps SDK基本主机示例：

# Clone the SDK repository
git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 \
  https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps

# Start this server (in one terminal)
npm run start

# Run basic-host (in another terminal)
cd /tmp/mcp-ext-apps/examples/basic-host
npm install
SERVERS='["http://localhost:3001/mcp"]' npm run start

打开http://localhost:8080在您的浏览器中。然后，您可以致电 render-mermaid 带有图表语法的工具。

2.使用curl

测试服务器是否正在运行以及工具是否已注册：

curl -X POST http://localhost:3001/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}'

3.使用克劳德桌面

将此添加到您的Claude Desktop MCP配置中(~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）：

{
  "mcpServers": {
    "mermaid-renderer": {
      "command": "npx",
      "args": ["tsx", "/path/to/mcp-app-lab/main.ts", "--stdio"],
      "cwd": "/path/to/mcp-app-lab"
    }
  }
}

替换 /path/to/mcp-app-lab 与这个项目的实际路径。

工具使用

这 render-mermaid 工具接受：

示例图

流程图：

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E

序列图：

sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!

类图：

classDiagram
    Animal  Idle
    Idle --> Processing: start
    Processing --> Done: complete
    Done --> [*]

项目结构

mcp-app-lab/
├── server.ts           # MCP server with render-mermaid tool registration
├── main.ts             # Entry point (HTTP and stdio transport)
├── mcp-app.html        # HTML entry point for the UI
├── src/
│   ├── mcp-app.ts      # Client-side app (Mermaid rendering)
│   ├── mcp-app.css     # Component styles
│   └── global.css      # Base styles
├── dist/               # Built output (generated)
├── package.json
├── vite.config.ts      # Vite config with single-file bundling
├── tsconfig.json       # TypeScript config for client
└── tsconfig.server.json # TypeScript config for server

脚本

许可证

麻省理工学院