ai.smithery/hustcc-mcp-mermaid
Generate dynamic Mermaid diagrams and charts with AI assistance. Customize styles and export diagr…
Open source Repository Open in the app JSON README (API)
About
Generate dynamic Mermaid diagrams and charts with AI assistance. Customize styles and export diagr…
Details
- Kind
- MCP servers
- Topic
- Media, design & games
- Publisher
- ai.smithery
- Origin
- official
- Category
- ferramentas
- Transport
- http
- Version
- 0.1.3
- Stars
- 631
- Forks
- 57
- Open pull requests
- 3
- Last push
- 2026-05-15T12:16:57Z
- Repository state
- ativo
- Language
- TypeScript
- License
- MIT
- Added
- 2026-08-29 03:00:39
- Updated
- 2026-08-29 03:00:39
- Origin id
ai.smithery/hustcc-mcp-mermaid
README
# <img src="https://mermaid.js.org/favicon.svg" height="24"/> MCP Mermaid  [](https://github.com/hustcc/mcp-mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mcp-mermaid) [](https://smithery.ai/server/@hustcc/mcp-mermaid) [](https://www.npmjs.com/package/mcp-mermaid) [](https://archestra.ai/mcp-catalog/hustcc__mcp-mermaid)
Generate <img src="https://mermaid.js.org/favicon.svg" height="14"/> [mermaid](https://mermaid.js.org/) diagram and chart with AI MCP dynamically. Also you can use:
- <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZFK8SrovcqgAAAAAAAAAAAAAemJ7AQ/original" height="14"/> [mcp-server-chart](https://github.com/antvis/mcp-server-chart) to generate chart, graph, map.
- <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EdkXSojOxqsAAAAAQHAAAAgAemJ7AQ/original" height="14"/> [Infographic](https://github.com/antvis/Infographic) to generate infographic, such as `Timeline`, `Comparison`, `List`, `Process` and so on.
- 🖼️ [figure.ling.pub/gallery](https://figure.ling.pub/gallery) to browse and share AI-generated diagrams and figures created with mcp-mermaid and other tools.
## ✨ Features
- Fully support all features and syntax of `Mermaid`.
- Support configuration of `backgroundColor` and `theme`, enabling large AI models to output rich style configurations.
- Support exporting to `base64`, `svg`, `mermaid`, `file`, and remote-friendly `svg_url`, `png_url` formats, with validation for `Mermaid` to facilitate the model's multi-round output of correct syntax and graphics. Use `outputType: "file"` to automatically save PNG diagrams to disk for AI agents, or the URL modes to share diagrams through public mermaid.ink links.
<img width="720" alt="mcp-mermaid" src="https://mermaid.js.org/header.png" />
## 🤖 Usage
To use with `Desktop APP`, such as Claude, VSCode, Cline, Cherry Studio, and so on, add the MCP server config below. On Mac system:
```json
{
"mcpServers": {
"mcp-mermaid": {
"command": "npx",
"args": [
"-y",
"mcp-mermaid"
]
}
}
}
```
On Window system:
```json
{
"mcpServers": {
"mcp-mermaid": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"mcp-mermaid"
]
}
}
}
```
Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.
**Access Points:**
- SSE: `http://localhost:3033/sse`
- Streamable: `http://localhost:1122/mcp`
**Available Docker Tags:**
- `susuperli/mcp-mermaid:latest` - Latest stable version
- View all available tags at [Docker Hub](https://hub.docker.com/repository/docker/susuperli/mcp-mermaid/tags)
## 🚰 Run with SSE or Streamable transport
### Option 1: Global Installation
Install the package globally:
```bash
npm install -g mcp-mermaid
```
Run the server with your preferred transport option:
```bash
# For SSE transport (default endpoint: /sse)
mcp-mermaid -t sse
# For Streamable transport with custom endpoint
mcp-mermaid -t streamable
```
### Option 2: Local Development
If you're working with the source code locally:
```bash
# Clone and setup
git clone https://github.com/hustcc/mcp-mermaid.git
cd mcp-mermaid
npm install
npm run build
# Run with npm scripts
npm run start:sse # SSE transport on port 3033
npm run start:streamable # Streamable transport on port 1122
```
### Access Points
Then you can access the server at:
- SSE transport: `http://localhost:3033/sse`
- Streamable transport: `http://localhost:1122/mcp` (local) or `http://localhost:3033/mcp` (global)
## 🎮 CLI Options
You can also use the following CLI options when running the MCP server. Command options by run cli with `-h`.
```plain
MCP Mermaid CLI
Options:
--transport, -t Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
--port, -p Specify the port for SSE or streamable transport (default: 3033)
--endpoint, -e Specify the endpoint for the transport:
- For SSE: default is "/sse"
- For streamable: default is "/mcp"
--help, -h Show this help message
```
## 🔨 Development
Install dependencies:
```bash
npm install
```
Build the server:
```bash
npm run build
```
### Start the MCP server
**Using MCP Inspector (for debugging):**
```bash
npm run start
```
**Using different transport protocols:**
```bash
# SSE transport (Server-Sent Events)
npm run start:sse
# Streamable HTTP transport
npm run start:streamable
```
**Direct node commands:**
```bash
# SSE transport on port 3033
node build/index.js --transport sse --port 3033
# Streamable HTTP transport on port 1122
node build/index.js --transport streamable --port 1122
# STDIO transport (for MCP client integration)
node build/index.js --transport stdio
```
## 🐳 Docker Usage
Run MCP Mermaid with Docker:
```bash
# Pull the image
docker pull susuperli/mcp-mermaid:latest
# Run with SSE transport (default)
docker run -p 3033:3033 susuperli/mcp-mermaid:latest --transport sse
# Run with streamable transport
docker run -p 1122:1122 susuperli/mcp-mermaid:latest --transport streamable --port 1122
```
## 📄 License
MIT@[hustcc](https://github.com/hustcc).