mermaid-live-mcp

mermaid-live-mcp

Servidor MCP para gerar diagramas Mermaid com pré-visualização ao vivo no navegador. Renderiza diagramas em tempo real e suporta exportação em SVG/PNG.

Instalação

Claude Desktop

Adicione à sua configuração do Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json no macOS):

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

Cursor

Adicione ao .cursor/mcp.json na raiz do seu projeto:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

Claude Code

claude mcp add mermaid -- npx -y mermaid-live-mcp

Windsurf

Adicione ao ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

Ferramentas

Ferramenta	Descrição
generate_mermaid	Gera um diagrama a partir da sintaxe Mermaid e abre uma pré-visualização ao vivo no navegador
update_diagram	Substitui a sintaxe Mermaid de um diagrama e re-renderiza a pré-visualização ao vivo
list_diagrams	Lista todos os diagramas gerados na sessão atual
export_diagram	Grava o SVG de um diagrama em disco

Como funciona

Quando você pede ao seu assistente de IA para criar um diagrama, o mermaid-live-mcp irá:

1. Analisar a sintaxe Mermaid
2. Abrir uma aba no navegador com uma pré-visualização ao vivo
3. Renderizar o diagrama como SVG em tempo real via WebSocket
4. Fornecer botões de download para exportação em SVG e PNG

Atualizações em um diagrama são enviadas instantaneamente ao navegador — sem necessidade de recarregar a página.

Tipos de diagrama suportados

Todos os tipos de diagrama Mermaid são suportados, incluindo fluxogramas, diagramas de sequência, diagramas de classe, diagramas de estado, diagramas ER, gráficos de Gantt, gráficos de pizza, gráficos git, mapas mentais, linhas do tempo e muito mais.

Desenvolvimento

pnpm install
pnpm build

Estrutura do projeto

Pacote	Descrição
packages/mcp-server	Servidor MCP (publicado como mermaid-live-mcp)
packages/preview	Pré-visualização ao vivo no navegador via WebSocket
packages/core	Análise de diagramas, layout e renderização SVG
packages/cli	Interface de linha de comando

Licença

MIT