Mermaid Render

mermaid-mcp

Um servidor MCP que renderiza diagramas Mermaid para PNG, SVG ou PDF — ou os converte em arquivos draw.io editáveis. Dê ao seu LLM a capacidade de transformar sintaxe de diagramas em imagens e documentos reais.

Início rápido

Claude Code

claude mcp add mermaid -- npx -y mermaid-render-mcp

Claude Desktop

Adicione ao claude_desktop_config.json:

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

Nota: a primeira execução baixa o Chromium headless (~150 MB), então a inicialização inicial leva alguns minutos. Se você só precisa de fluxogramas e pode trabalhar com arquivos editáveis, o caminho rápido drawio ignora o Chromium completamente.

Docker

Sem necessidade de baixar Node.js ou Chromium — a imagem já vem com tudo (incluindo fontes CJK para rótulos em japonês, chinês e coreano):

claude mcp add mermaid -- docker run -i --rm tcinebula/mermaid-render-mcp

Para usar output_path, monte um diretório do host e grave nele:

{
  "mcpServers": {
    "mermaid": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "-v", "C:\\diagrams:/out", "tcinebula/mermaid-render-mcp"]
    }
  }
}

Em seguida, passe output_path: "/out/figure.pdf" e o arquivo aparecerá em C:\diagrams.

Remoto / auto-hospedado (HTTP)

O mesmo servidor fala Streamable HTTP quando PORT está definido (ou MCP_TRANSPORT=http), então ele pode ser implantado em qualquer host de contêiner — Railway, Fly.io, etc. — direto do Dockerfile:

• Endpoint: POST /mcp (verificação de saúde em /healthz)
• Defina AUTH_TOKEN para exigir Authorization: Bearer <token>
• output_path está desabilitado no modo HTTP; apenas respostas base64/XML

A partir do código-fonte

git clone https://github.com/tci-nebula/mermaid-mcp.git
cd mermaid-mcp
npm install
claude mcp add mermaid -- node /path/to/mermaid-mcp/server.js

Ferramenta: render_diagram

Parâmetro	Tipo	Padrão	Descrição
syntax	string	(obrigatório)	Definição do diagrama Mermaid
format	png | svg | pdf | drawio	png	Formato de saída (drawio = XML draw.io editável, apenas fluxogramas)
theme	default | dark | neutral | forest	default	Tema visual
background	string	white	Cor CSS ou transparent
width	number	1200	Largura do canvas em px (apenas PNG)
pdfFit	boolean	true	Dimensionar a página do PDF para caber no diagrama (apenas PDF)
output_path	string	—	Gravar o resultado neste caminho de arquivo em vez de retornar base64

Retorna a imagem renderizada como dados codificados em base64 para que clientes MCP possam exibi-la inline — ou, com output_path, grava o arquivo em disco (útil para PDFs destinados à impressão ou envio formal de documentos).

Exemplo

Peça ao seu LLM:

"Desenhe um fluxograma do fluxo de login OAuth"

Ele gera a sintaxe Mermaid, chama render_diagram e você recebe um PNG.

O caminho rápido drawio (sem Chromium)

format: "drawio" é a única saída que nunca toca em um navegador. É JavaScript puro — analisa, organiza com dagre, emite XML — então não há download do Chromium, sem instalação de ~150 MB e sem primeira execução de vários minutos. A conversão é praticamente instantânea.

Use-o quando:

• você quer o diagrama editável em vez de plano — cada forma permanece um objeto draw.io real
• você está em uma máquina limitada (CI, contêiner enxuto, laptop restrito) onde baixar o Chromium não é prático
• você só quer o diagrama agora e não precisa de uma imagem rasterizada

{
  "syntax": "flowchart TD\n  A[Start] --> B{OK?}\n  B -->|yes| C[Ship]\n  B -->|no| A",
  "format": "drawio",
  "output_path": "flow.drawio"
}

Abra o resultado no draw.io (ou na extensão do VS Code) e exporte para PNG/SVG/PDF a partir daí se precisar de uma imagem — isso é um ciclo completo sem Chromium.

Limitações

• Apenas fluxogramas. Diagramas flowchart e graph são convertidos; sequência, classe, estado, ER e gantt geram erro. Use PNG/SVG/PDF para esses.
• theme, background e width são ignorados. A estilização é responsabilidade do draw.io quando o arquivo é aberto.
• Os tamanhos dos nós são estimados pelo comprimento do rótulo, não por métricas de fonte medidas. O draw.io re-mede o texto ao abrir o arquivo, então as caixas se ajustam corretamente — mas trate a geometria bruta do XML como aproximada.

Sintaxe suportada: direções TD / TB / BT / LR / RL; formas [rect], (rounded), {rhombus}, ((circle)), ([stadium]), [[subroutine]], [(cylinder)], {{hexagon}}; arestas -->, ---, -.->, ==>, <-->, cada uma opcionalmente com um |label|.

Como funciona

A renderização de PNG, SVG e PDF delega para o @mermaid-js/mermaid-cli (incluído como dependência), que usa um Chromium headless para renderizar diagramas. A primeira npm install baixa o Chromium (~150 MB), então leva alguns minutos.

A exportação para draw.io é JavaScript puro — um analisador de fluxogramas mais o layout dagre (o mesmo mecanismo que o Mermaid usa) emitem XML mxGraphModel nativo, então cada forma permanece individualmente editável no draw.io.

Requisitos

• Node.js 18+

Roadmap

• Exportação PDF (fluxos de trabalho de documentos formais/legais)
• Exportação XML draw.io (diagramas editáveis — fluxogramas)
• Pacote npm (mermaid-render-mcp)
• Opção de servidor hospedado remotamente (transporte Streamable HTTP)

Licença

MIT