Mermaid MCP App

美人鱼MCP应用程序

一个可流式传输的MCP应用程序服务器，可渲染具有实时预览、主题切换和全屏编辑功能的交互式美人鱼图。

演示

Mermaid MCP App Demo

*具有实时预览、平移/缩放控件和全屏模式的交互式图表编辑*

特性

• 完整渲染 -在显示之前等待完整的图表生成（无部分/流式输出）
• SVGO优化 -自动SVG优化可将文件大小减少约85%
• 深色模式 -使用中性灰色调色板自动检测系统主题
• 交互式平移/缩放 -使用滚轮缩放和拖动控件浏览大型图表
• 全屏编辑器 -使用实时预览和缩放控件（+/-/1:1）编辑Mermaid语法
• 主题切换 -浅色、深色或自定义（代理提供）主题
• 所有图表类型 -流程图、序列、类、状态、ER、甘特图、饼图、git图等
• 使用Spinner导出 -将SVGO优化的SVG复制到剪贴板（微调器指示进度）
• 客户端渲染 -无服务器依赖关系，完全在浏览器中运行

快速开始

远程（Vercel）

使用托管端点： https://mermaid-mcp-app.vercel.app/mcp

在客户端中添加为远程MCP服务器。例如，在 claude.ai: 设置 → 连接器 → 添加自定义连接器 → 粘贴上面的URL。

安装

npm install

发展

使用热重载启动开发服务器：

npm run dev

服务器将在以下时间启动 http://localhost:3001/mcp

构建

生产建设：

npm run build

这将创建：

• dist/mcp-app.html -单文件捆绑UI
• dist/server.js -MCP服务器
• dist/index.js -CLI入口点

用法

本地（HTTP）

npm run serve
# or
node dist/index.js

本地（stdio）

node dist/index.js --stdio

Vercel部署

部署到Vercel进行远程访问：

npx vercel

MCP端点将在 https://mermaid-mcp-app.vercel.app/mcp

MCP工具

read_me

返回全面的Mermaid语法参考，其中包含所有图表类型的示例。

用法：之前称之为 create_view 学习Mermaid语法。

create_view

渲染美人鱼图。图表在显示之前已完全渲染（无渐进式/流式渲染）。

参数:

• mermaid （字符串，必填）-美人鱼图语法
• theme （字符串，可选）-以下之一： default （自动检测）， forest, dark, neutral, base
• title （字符串，可选）-要在图表上方显示的标题

备注:

• 默认主题自动检测系统暗模式并应用中性灰色调色板
• 代理可以指定内置的Mermaid主题(forest, dark, neutral, base)在UI中显示为“自定义”
• 全屏模式包括缩放控件（+、-、1:1、滚轮缩放）和平移/拖动

示例:

{
  "mermaid": "flowchart TD\n  A[Start] --> B[End]",
  "theme": "forest",
  "title": "Simple Flow"
}

export_svg （仅限应用程序）

使用SVGO将渲染的图表导出为优化的SVG。由UI导出按钮调用（处理过程中的微调器图标）。

优化:

• SVGO将SVG大小减小了约85%（例如，334KB→ 51KB)
• 将坐标四舍五入到小数点后两位
• 保留viewBox和美人鱼ID以进行正确渲染

建筑

• 服务器：使用Express+MCP SDK的Node.js

- 支持流式HTTP和stdio传输 - 无状态的按请求设计（无会话）

• 用户界面：使用Mermaid.js的React 19

- 通过importmap从CDN（jsdelivr用于Mermaid，esm.sh用于React）加载 - 客户端渲染，实现零服务器依赖 - 通过Vite+Vite插件的单文件HTML包（~402KB） - SVGO服务器端导出优化

• 构建：TypeScript+Vite+Bun

- 键入安全服务器和客户端代码 - 优化生产捆绑

文件结构

mermaid-mcp-app/
├── src/
│   ├── server.ts          # MCP server with tool registration + SVGO
│   ├── main.ts            # Transport layer (HTTP + stdio)
│   ├── mcp-app.html       # HTML shell with importmap
│   ├── mcp-app.tsx        # React UI component
│   ├── theme-vars.ts      # Mermaid theme color palettes
│   └── global.css         # Styles (dark mode, animations)
├── api/
│   └── mcp.ts            # Vercel serverless handler
├── dist/                  # Build output
├── scripts/
│   └── setup-bun.mjs     # Auto-install bun
├── package.json
├── tsconfig.json          # Client TS config
├── tsconfig.server.json   # Server TS config
├── vite.config.ts         # Vite bundler config
├── vercel.json           # Vercel deployment config
└── manifest.json         # MCP app manifest

技术

• MCP-SDK -模型上下文协议
• ext应用程序 -MCP应用程序扩展
• Mermaid.js -图表生成
• SVGO -SVG优化（服务器端）
• 反应19 -UI框架
• 维特 -构建工具
• TypeScript -类型安全
• 包子 -构建捆绑器

许可证

麻省理工学院