mermaid-live-mcp 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +98 -0
- package/dist/index.js +1164 -0
- package/dist/index.js.map +1 -0
- package/package.json +52 -0
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# mermaid-live-mcp
|
|
2
|
+
|
|
3
|
+
MCP server for generating [Mermaid](https://mermaid.js.org/) diagrams with live browser preview. Renders diagrams in real-time and supports SVG/PNG export.
|
|
4
|
+
|
|
5
|
+
<a href="https://npmjs.com/package/mermaid-live-mcp"><img src="https://img.shields.io/npm/v/mermaid-live-mcp" alt="npm version"></a>
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
### Claude Desktop
|
|
10
|
+
|
|
11
|
+
Add to your [Claude Desktop config](https://modelcontextprotocol.io/quickstart/user) (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
|
|
12
|
+
|
|
13
|
+
```json
|
|
14
|
+
{
|
|
15
|
+
"mcpServers": {
|
|
16
|
+
"mermaid": {
|
|
17
|
+
"command": "npx",
|
|
18
|
+
"args": ["-y", "mermaid-live-mcp"]
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Cursor
|
|
25
|
+
|
|
26
|
+
Add to `.cursor/mcp.json` in your project root:
|
|
27
|
+
|
|
28
|
+
```json
|
|
29
|
+
{
|
|
30
|
+
"mcpServers": {
|
|
31
|
+
"mermaid": {
|
|
32
|
+
"command": "npx",
|
|
33
|
+
"args": ["-y", "mermaid-live-mcp"]
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Claude Code
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
claude mcp add mermaid -- npx -y mermaid-live-mcp
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Windsurf
|
|
46
|
+
|
|
47
|
+
Add to `~/.codeium/windsurf/mcp_config.json`:
|
|
48
|
+
|
|
49
|
+
```json
|
|
50
|
+
{
|
|
51
|
+
"mcpServers": {
|
|
52
|
+
"mermaid": {
|
|
53
|
+
"command": "npx",
|
|
54
|
+
"args": ["-y", "mermaid-live-mcp"]
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Tools
|
|
61
|
+
|
|
62
|
+
| Tool | Description |
|
|
63
|
+
|------|-------------|
|
|
64
|
+
| `generate_mermaid` | Generate a diagram from Mermaid syntax and open a live preview in the browser |
|
|
65
|
+
| `update_diagram` | Replace a diagram's Mermaid syntax and re-render the live preview |
|
|
66
|
+
| `list_diagrams` | List all diagrams generated in the current session |
|
|
67
|
+
| `export_diagram` | Write a diagram's SVG to disk |
|
|
68
|
+
|
|
69
|
+
## How it works
|
|
70
|
+
|
|
71
|
+
When you ask your AI assistant to create a diagram, `mermaid-live-mcp` will:
|
|
72
|
+
|
|
73
|
+
1. Parse the Mermaid syntax
|
|
74
|
+
2. Open a browser tab with a live preview
|
|
75
|
+
3. Render the diagram as SVG in real-time via WebSocket
|
|
76
|
+
4. Provide download buttons for SVG and PNG export
|
|
77
|
+
|
|
78
|
+
Updates to a diagram are pushed instantly to the browser — no page refresh needed.
|
|
79
|
+
|
|
80
|
+
## Supported diagram types
|
|
81
|
+
|
|
82
|
+
All [Mermaid diagram types](https://mermaid.js.org/intro/) are supported, including:
|
|
83
|
+
|
|
84
|
+
- Flowcharts
|
|
85
|
+
- Sequence diagrams
|
|
86
|
+
- Class diagrams
|
|
87
|
+
- State diagrams
|
|
88
|
+
- Entity-relationship diagrams
|
|
89
|
+
- Gantt charts
|
|
90
|
+
- Pie charts
|
|
91
|
+
- Git graphs
|
|
92
|
+
- Mindmaps
|
|
93
|
+
- Timeline
|
|
94
|
+
- and more
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
MIT
|