使用说明
美人鱼图渲染器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 工具接受：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
diagram |
string | 是 | 美人鱼图定义 |
title |
string | 否 | 图表上方显示的可选标题 |
示例图
流程图：
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 <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +String gender
Animal: +isMammal()
状态图：
stateDiagram-v2
[*] --> 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
脚本
| 脚本 | 描述 |
|---|---|
npm run build |
构建客户端和服务器 |
npm run serve |
运行服务器（需要先构建） |
npm run start |
构建并运行服务器 |
npm run dev |
带手表和自动重新加载的开发模式 |
npm run watch |
根据更改监视和重建客户端 |
许可证
麻省理工学院
