MCP 101 Mermaid

美人鱼图创建者

一个由Mermaid.js支持的实时图表创建工具，具有React前端和WebSocket通信。

概述

此应用程序使用户能够使用Mermaid语法创建和可视化各种类型的图表。该系统由两个主要部分组成：

• 前端：一个使用Mermaid.js渲染图表的React应用程序
• 后端：处理请求并通过WebSockets将图表数据发送到前端的服务器

特性

• 实时图表渲染
• 支持多种图表类型：

- 流程图 - 顺序图 - 类图 - 甘特图 - 饼图

• 强大的错误处理和有用的语法建议
• 暗/亮主题支持
• 用于查看图表的缩放控件
• 导出为SVG格式

项目结构

mermaid/
├── mermaid-app/         # React frontend application
│   ├── src/             # Source code
│   │   ├── App.jsx      # Main application component
│   │   └── App.css      # Application styling
│   ├── package.json     # Frontend dependencies
│   └── vite.config.js   # Vite configuration
│
├── mcp-server/          # Backend server
│   ├── server.js        # Main server file
│   ├── socket-server.js # WebSocket server implementation
│   ├── diagram-generators.js # Diagram generation logic
│   └── package.json     # Backend dependencies
│
└── start.js             # Script to start both frontend and backend

入门指南

先决条件

• v16或更高版本
• 包子 或

安装

1. 克隆存储库：

   git clone https://github.com/yourusername/mermaid.git
   cd mermaid

1. 安装前端和后端的依赖关系：

   # Frontend dependencies
   cd mermaid-app
   bun install

   # Backend dependencies
   cd ../mcp-server
   bun install

   # Return to root
   cd ..

1. 启动应用程序：

   bun start.js

1. 打开浏览器并导航到 http://localhost:5173

用法

1. 应用程序自动连接到WebSocket服务器
2. 从服务器发送的图表将实时呈现
3. 使用缩放控件调整视图
4. 使用主题按钮在深色和浅色主题之间切换
5. 使用导出按钮导出图表

图表语法

该应用程序使用Mermaid.js语法创建图表。以下是一些示例：

流程图

graph TD
    A[Start] -->|Process| B(Process Data)
    B --> C{Decision}
    C -->|Yes| D[Result 1]
    C -->|No| E[Result 2]
    D --> F[End]
    E --> F

序列图

sequenceDiagram
    participant User
    participant API
    participant Database
    
    User->>API: Request data
    activate API
    API->>Database: Query
    activate Database
    Database-->>API: Results
    deactivate Database
    API-->>User: Response
    deactivate API

有关更多语法示例，请访问 美人鱼文档.

错误处理

当图表代码包含错误时，应用程序会提供有用的错误消息和语法建议。

贡献

欢迎投稿！请随时提交拉取请求。

许可证

此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。