MCP Server Mermaid
MCP Mermaid

Genera diagramas y gráficos mermaid con IA MCP de forma dinámica. También puedes usar:
mcp-server-chart para generar gráficos, diagramas y mapas.
Infographic para generar infografías, como
Timeline,Comparison,List,Processy más.🖼️ figure.ling.pub/gallery para explorar y compartir diagramas y figuras generadas por IA creadas con mcp-mermaid y otras herramientas.
✨ Características
Soporte completo para todas las funciones y sintaxis de
Mermaid.Soporte para la configuración de
backgroundColorytheme, permitiendo que los modelos de IA grandes generen configuraciones de estilo enriquecidas.Soporte para exportar a formatos
base64,svg,mermaid,file, y formatos amigables para acceso remotosvg_url,png_url, con validación paraMermaidpara facilitar la salida de sintaxis y gráficos correctos por parte del modelo en múltiples rondas. UsaoutputType: "file"para guardar automáticamente diagramas PNG en el disco para agentes de IA, o los modos URL para compartir diagramas a través de enlaces públicos de mermaid.ink.
Related MCP server: Mermaid-MCP
🤖 Uso
Para usar con una Desktop APP, como Claude, VSCode, Cline, Cherry Studio, etc., añade la configuración del servidor MCP a continuación. En sistemas Mac:
{
"mcpServers": {
"mcp-mermaid": {
"command": "npx",
"args": [
"-y",
"mcp-mermaid"
]
}
}
}En sistemas Windows:
{
"mcpServers": {
"mcp-mermaid": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"mcp-mermaid"
]
}
}
}También puedes usarlo en aliyun, modelscope, glama.ai, smithery.ai u otros con protocolo HTTP o SSE.
Puntos de acceso:
SSE:
http://localhost:3033/sseStreamable:
http://localhost:1122/mcp
Etiquetas de Docker disponibles:
susuperli/mcp-mermaid:latest- Última versión estableVer todas las etiquetas disponibles en Docker Hub
🚰 Ejecutar con transporte SSE o Streamable
Opción 1: Instalación global
Instala el paquete globalmente:
npm install -g mcp-mermaidEjecuta el servidor con tu opción de transporte preferida:
# For SSE transport (default endpoint: /sse)
mcp-mermaid -t sse
# For Streamable transport with custom endpoint
mcp-mermaid -t streamableOpción 2: Desarrollo local
Si estás trabajando con el código fuente localmente:
# 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 1122Puntos de acceso
Luego puedes acceder al servidor en:
Transporte SSE:
http://localhost:3033/sseTransporte Streamable:
http://localhost:1122/mcp(local) ohttp://localhost:3033/mcp(global)
🎮 Opciones de CLI
También puedes usar las siguientes opciones de CLI al ejecutar el servidor MCP. Opciones de comando ejecutando la CLI con -h.
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🔨 Desarrollo
Instala las dependencias:
npm installCompila el servidor:
npm run buildIniciar el servidor MCP
Usando MCP Inspector (para depuración):
npm run startUsando diferentes protocolos de transporte:
# SSE transport (Server-Sent Events)
npm run start:sse
# Streamable HTTP transport
npm run start:streamableComandos directos de node:
# 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🐳 Uso de Docker
Ejecuta MCP Mermaid con Docker:
# 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📄 Licencia
MIT@hustcc.
Available Tools
1 toolgenerate_mermaid_diagramBInspect
Generate mermaid diagram and chart with mermaid syntax dynamically. Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
| Name | Required | Description | Default |
|---|---|---|---|
| mermaid | Yes | The mermaid diagram syntax used to be generated, such as, graph TD; A-->B; A-->C; B-->D; C-->D;. | |
| theme | No | Theme for the diagram (optional). Default is 'default'. | default |
| backgroundColor | No | Background color for the diagram (optional). Default is 'white'. | white |
| outputType | No | The output type of the diagram. Can be 'base64', 'svg', 'mermaid', 'file', 'svg_url', or 'png_url'. Default is 'base64'. 'base64' returns PNG image as base64 encoded string. 'file' saves the PNG image to disk. The *_url options return public mermaid.ink links for remote-friendly sharing. | base64 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description fails to disclose behavioral traits such as side effects, performance, or limitations. It only broadly states dynamic generation without specifics.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with two sentences, but the second sentence focuses on Mermaid's general purpose rather than the tool's specific behavior. No filler words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description does not explain the output format or how to use the returned data. With no output schema, relying on the outputType parameter is insufficient for complete understanding.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, so the parameters are already well-documented. The description adds no additional meaning beyond what the schema provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: generating mermaid diagrams and charts dynamically. It explains what Mermaid is, providing context for the tool's functionality.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool or when not to use it. There are no alternatives mentioned, and the description lacks explicit usage context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
1 tool update
v1.0.0- Changed
generate_mermaid_diagram3 fields changed- changed
Input schema / properties / outputType / defaultPrevious value: -"png"New value: +"base64" - changed
Input schema / properties / outputType / descriptionPrevious value: -"The output type of the diagram. Can be 'png', 'svg' or 'mermaid'. Default is 'png'."New value: +"The output type of the diagram. Can be 'base64', 'svg', 'mermaid', 'file', 'svg_url', or 'png_url'. Default is 'base64'. 'base64' returns PNG image as base64 encoded string. 'file' saves the PNG image to disk. The *_url options return public mermaid.ink links for remote-friendly sharing." - changed
Input schema / properties / outputType / enumPrevious value: -[ - "png", - "svg", - "mermaid" -]New value: +[ + "base64", + "svg", + "mermaid", + "file", + "svg_url", + "png_url" +]
1 tool update
- First observed
generate_mermaid_diagram
TDQS
Scored across 1 tool
With only one tool, there is no possibility of confusion between tools. The tool's purpose is clear and stands alone.
Since there is only one tool, naming consistency is not applicable, but the single name follows a clear descriptive pattern.
A single tool for generating Mermaid diagrams is minimal. While it covers the core functionality, the scope feels thin (1 tool) compared to typical MCP servers that handle diagramming workflows.
The tool covers the primary task of generating diagrams, but lacks auxiliary operations such as validation, styling, or export options that would enhance completeness for a diagramming server.
Maintenance
Related MCP Connectors
Create and manage Mermaid.js flowcharts and diagrams with AI agents via MCP.
Generate org charts, MCD/ERD data models, and C4 architecture diagrams — pilot OrgGen AI via MCP.
Render, verify, describe, and safely edit Mermaid diagrams through MCP.
Create workflow, sequence, architecture, and mind map diagrams via AI assistants.
Related MCP Servers
- TypeScriptMIT
- AlicenseNot gradedqualityDmaintenanceAn MCP server that converts text inputs into visualized flowcharts, enabling AI clients to generate high-quality Mermaid diagrams directly from natural language descriptions or structured text.12MIT
- FlicenseNot gradedqualityFmaintenanceNarasimhaponnada/mermaid-mcp - AI-powered Mermaid diagram generation with 22+ diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, architecture diagrams, state machines, and more. Features 50+ pre-built templates, advanced layout engines, SVG/PNG/PDF exports.53-
- AlicenseNot gradedqualityDmaintenanceEnables automatic generation of UML class diagrams and entity-relationship diagrams from natural language descriptions or structured JSON data. It integrates with MCP agents to create visual representations of code structures and system designs without manual Mermaid coding.8 npm1MIT