AI导哈

图表创建工具

基于Mermaid.js的实时图表创建工具，支持多种图表类型，包括流程图、序列图、类图、甘特图和饼图。

  • by jsphdnl
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 jsphdnl/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

入门指南

先决条件

安装

  1. 克隆存储库：

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

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

    # Frontend dependencies
cd mermaid-app
bun install

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

# Return to root
cd ..

  3. 启动应用程序：

    bun start.js

  4. 打开浏览器并导航到 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许可证获得许可-有关详细信息，请参阅许可证文件。

相关 MCP