# Agentic Mermaid

Renders Mermaid diagrams into SVG, PNG, or terminal ASCII while giving coding agents structured tools to mutate nodes safely.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 69
- Author: adewale
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/adewale/agentic-mermaid
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/agentic-mermaid

## What it does

This server gives coding assistants a dedicated pipeline to parse, inspect, and update Mermaid charts. Instead of asking the model to rewrite complete diagram strings, it applies typed mutations like adding single nodes. The internal SVG generator runs synchronously without launching Puppeteer or keeping a headless browser active.

Outputs include vector SVG, raster PNG, JSON layout data, plus plain ASCII or Unicode text for fast terminal reviews. Built-in styles include `hand-drawn`, `blueprint`, and `watercolor`. Running the package locally requires Node 22 or higher, because the codebase ships strictly as ECMAScript modules without CommonJS builds.

## Requirements
- Needs: Node.js (commands run via npx)
- Remote server: `https://agentic-mermaid.dev/mcp`

## Install

### Claude Code (native platform)

1. **Platform CLI: remote server**
```bash
claude mcp add --transport http agentic-mermaid https://agentic-mermaid.dev/mcp
```

2. **Platform CLI**
```bash
claude mcp add agentic-mermaid -- npx -y agentic-mermaid
```

### Codex

1. **Platform CLI: remote server**
```bash
codex mcp add agentic-mermaid --url https://agentic-mermaid.dev/mcp
```

2. **Platform CLI**
```bash
codex mcp add agentic-mermaid -- npx -y agentic-mermaid
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "agentic-mermaid": {
            "url": "https://agentic-mermaid.dev/mcp"
        }
    }
}
```
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "agentic-mermaid": {
            "command": "npx",
            "args": [
                "-y",
                "agentic-mermaid"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "agentic-mermaid": {
            "type": "http",
            "url": "https://agentic-mermaid.dev/mcp"
        }
    }
}
```
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "agentic-mermaid": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "agentic-mermaid"
            ]
        }
    }
}
```

### Gemini CLI

1. **Platform CLI: remote server**
```bash
gemini mcp add -t http agentic-mermaid https://agentic-mermaid.dev/mcp
```

2. **Platform CLI**
```bash
gemini mcp add agentic-mermaid npx -y agentic-mermaid
```

## When to use it
- Render Mermaid graphs to SVG or PNG without running Puppeteer
- Apply structured node mutations instead of rewriting complete diagram files
- Output terminal-friendly ASCII representations to inspect graph layouts
- Style diagrams using built-in themes like `blueprint` or `hand-drawn`

## Example prompts
- Generate an authentication flow diagram in SVG using the `blueprint` visual preset.
- Add a Redis cache node to `architecture.mmd` without altering existing connection syntax.
- Render the service topology as pure ASCII text directly in this chat.

## Similar
- [REA](https://affpapa.org/en/nevibecode/mcp/rea.md) — MCP server · ★ 386989
- [GitHub](https://affpapa.org/en/nevibecode/mcp/github.md) — MCP server · ★ 33918
- [Netdata](https://affpapa.org/en/nevibecode/mcp/netdata.md) — MCP server · ★ 81115
- [browser-use](https://affpapa.org/en/nevibecode/mcp/browser-use.md) — MCP server · ★ 119160
- [Codebase Memory](https://affpapa.org/en/nevibecode/mcp/codebase-memory.md) — MCP server · ★ 47392
- [mcp-server](https://affpapa.org/en/nevibecode/mcp/mcp-server.md) — MCP server · ★ 43872

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md