
Mermaid Chart MCP
A powerful Model Context Protocol server that automatically generates Mermaid diagrams from code and provides SVG beautification features.
README
Mermaid Chart MCP
一个功能强大的Model Context Protocol (MCP)服务器,提供从代码自动生成Mermaid图表及SVG美化功能。
✨ 特性
- 🔍 智能代码分析 - 支持TypeScript/JavaScript代码结构分析
- 📊 多种图表类型 - 类图、流程图、序列图等
- 🎨 SVG美化 - 手绘风格、彩色主题、极简设计、专业风格
- 🚀 MCP集成 - 完全兼容Model Context Protocol
- ⚡ 高性能 - 基于Tree-sitter的快速代码解析
- 🛡️ 类型安全 - 完整的TypeScript类型定义
🚀 快速开始
安装
# 克隆项目
git clone <repository-url>
cd mermaid-chart-mcp
# 安装依赖
npm install
# 构建项目
npm run build
基本使用
作为MCP服务器运行
# 启动MCP服务器
npm start
作为库使用
import {
TypeScriptAnalyzer,
ClassDiagramGenerator,
SVGRenderer,
SVGBeautifier,
SupportedLanguage,
DiagramType,
BeautificationStyle
} from 'mermaid-chart-mcp';
// 分析TypeScript代码
const analyzer = new TypeScriptAnalyzer();
const analysisResult = await analyzer.analyze(code, {
language: SupportedLanguage.TypeScript,
includePrivate: true
});
// 生成类图
const generator = new ClassDiagramGenerator();
const mermaidResult = await generator.generate(analysisResult, {
diagramType: DiagramType.ClassDiagram,
direction: 'TB',
includeTitle: true,
title: '类结构图'
});
// 渲染SVG
const renderer = new SVGRenderer();
const svgResult = await renderer.render(mermaidResult.mermaidCode);
// 美化SVG
const beautifier = new SVGBeautifier();
const beautifiedResult = await beautifier.beautify(svgResult.svg, {
style: BeautificationStyle.Professional,
optimizeLayout: true
});
🛠️ MCP工具
generate_mermaid_diagram
从代码或文档生成Mermaid图表并可选择性地渲染为美化的SVG。
参数:
code
- 要分析的代码(与document二选一)language
- 代码语言(typescript/javascript)diagramType
- 图表类型(classDiagram/flowchart等)beautificationStyle
- 美化风格(可选)renderSVG
- 是否渲染为SVG(默认true)options
- 高级选项
示例:
{
"code": "class Animal { private name: string; }",
"language": "typescript",
"diagramType": "classDiagram",
"beautificationStyle": "professional",
"options": {
"generation": {
"direction": "TB",
"includeTitle": true,
"title": "动物类图"
}
}
}
analyze_code
分析代码结构并提取实体和关系。
render_svg
将Mermaid代码渲染为SVG。
beautify_svg
对SVG图表应用美化风格。
📊 支持的图表类型
- 类图 (
classDiagram
) - 显示类、接口、属性和方法 - 流程图 (
flowchart
) - 业务流程和决策流程 - 序列图 (
sequenceDiagram
) - 对象间的交互序列 - 状态图 (
stateDiagram
) - 状态转换图 - 实体关系图 (
erDiagram
) - 数据库关系图
🎨 美化风格
手绘风格 (Sketchy)
- 使用rough.js创建手绘效果
- 适合原型设计和非正式文档
彩色风格 (Colorful)
- 丰富的色彩搭配
- 渐变效果和阴影
- 适合演示和报告
极简风格 (Minimalist)
- 简洁的线条和布局
- 黑白配色
- 适合技术文档
专业风格 (Professional)
- 企业级配色方案
- 统一的字体和样式
- 适合商业文档
🧪 测试
# 运行所有测试
npm test
# 运行测试并观察变化
npm run test:watch
# 生成测试覆盖率报告
npm test -- --coverage
🔧 开发
# 开发模式(自动重新编译)
npm run dev
# 代码检查
npm run lint
# 自动修复代码风格
npm run lint:fix
# 格式化代码
npm run format
# 清理构建文件
npm run clean
📦 项目结构
mermaid-chart-mcp/
├── src/
│ ├── analyzers/ # 代码分析器
│ ├── generators/ # 图表生成器
│ ├── renderers/ # SVG渲染器
│ ├── beautifiers/ # SVG美化器
│ ├── mcp/ # MCP服务器实现
│ ├── types.ts # 类型定义
│ └── index.ts # 入口文件
├── __tests__/ # 测试文件
├── examples/ # 使用示例
├── package.json
├── tsconfig.json
├── jest.config.js
└── README.md
📝 API文档
类型定义
// 支持的编程语言
enum SupportedLanguage {
JavaScript = 'javascript',
TypeScript = 'typescript',
Python = 'python',
Java = 'java'
}
// 图表类型
enum DiagramType {
ClassDiagram = 'classDiagram',
FlowChart = 'flowchart',
SequenceDiagram = 'sequenceDiagram',
StateDiagram = 'stateDiagram',
EntityRelationship = 'erDiagram'
}
// 美化风格
enum BeautificationStyle {
Sketchy = 'sketchy',
Colorful = 'colorful',
Minimalist = 'minimalist',
Professional = 'professional'
}
核心接口
详细的API文档请参考源代码中的类型定义和JSDoc注释。
🤝 贡献
欢迎贡献代码!请遵循以下步骤:
- Fork 这个项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature
) - 提交更改 (
git commit -m 'Add some AmazingFeature'
) - 推送到分支 (
git push origin feature/AmazingFeature
) - 开启 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
🔗 相关链接
📞 支持
如果您遇到问题或有建议,请:
让代码可视化变得简单! 🚀
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.