MCP Mermaidjs Server

An MCP server based on MermaidJS and mmdc, providing functions to save and visualize charts

Developer tools Education and learning tools #Chart generation #MermaidJS #MCP service

rating : 2 points

downloads : 5

update time : 2025-04-29

What is the MermaidJS MCP Server?

This is a server specifically designed to handle MermaidJS charts. It allows users to create, save, and visualize various types of charts, such as flowcharts and sequence diagrams. The server uses the mmdc command-line tool to render charts.

How to use the MermaidJS MCP Server?

Users can create MermaidJS specification texts and then use the tools provided by the server to save and render these charts.

Use cases

Suitable for scenarios where automatic generation and sharing of charts in technical documents are required, or where chart generation functions need to be integrated into applications.

Main features

Save chartSave the MermaidJS chart specification to the server

Visualize chartRender the saved chart into various formats (such as PNG, SVG, etc.)

Advantages and limitations

Advantages

Provides a simple API interface to save and render charts

Supports all chart types of MermaidJS

Allows custom CSS styles

Limitations

Requires pre - installation of the mmdc command-line tool

Server performance depends on the rendering speed of mmdc

How to use

Install mmdc

Ensure that the mermaid-cli (mmdc) is installed on the system

Build the server

Build the server using the make command

Start the server

Start the MCP server using the Java command

Usage examples

Create a sequence diagramCreate a sequence diagram describing system interactions

Create a flowchartCreate a simple decision flowchart

Frequently Asked Questions

How to install mmdc?

Which output formats are supported?

How to customize the chart style?

Related resources

MermaidJS official documentation

Documentation on MermaidJS syntax and functions

mermaid-cli GitHub repository

Source code of the mmdc command-line tool

🚀 Working with MCP Server for MermaidJS using tech.unravel/mcp-mermaidjs-server

Create an MCP server for MermaidJS using mmdc.

We've developed two simple tools:

save-diagram
visualize-diagram

With these tools, the host can generate beautiful MermaidJS diagrams following these steps:

Create an .mmd specification and save it.
Render the saved specification using the specified output format (optional) and CSS (by accessing mmdc).

🚀 Quick Start

📦 Installation

Build Uberjar

Run make clean && make build

Run MCP Server

Prerequisite: You need to install mmdc CLI.

Here are some example commands you can try in Claude Desktop or Inspector:

Create a MermaidJS flowchart based on the following specification:

sequenceDiagram
%% Refer to https://mermaidjs.github.io/sequenceDiagram.html

loop 每天 D-2 工作日 16:00
    ABCD->>DEE: [14:25] BEE（每个 TC 直到 ACK 成为 OK 的计算）

    ABCD->>FGG: BEE（每个 TC 直到 ACK 成为 OK 的计算）
    Note over ABCD,FGG: D-2 工作日 14:25
    ABCD->>HII: 向 HII 投影授权
    Note over ABCD,HII: D-2 工作日 16:00
end

loop D-1 截止前 7:45
    HII->>DEE: 提交
    Note over HII,DEE: D-1 截止前
    HII->>FGG: 提交
    Note over HII,FGG: D-1 截止前
end

Before Running the MCP Server

Important Note:

Replace /Users/vedang/repo-name with the correct path to the tech.unravel/mcp-mermaidjs-server JAR on your system.
Specify the full path to mmdc on your system.

In Claude Desktop

    "mcp_mermaidjs_server": {
      "command": "java",
      "args": [
        "-Dclojure.tools.logging.factory=clojure.tools.logging.impl/log4j2-factory",
        "-Dorg.eclipse.jetty.util.log.class=org.eclipse.jetty.util.log.Slf4jLog",
        "-Dlog4j2.contextSelector=org.apache.logging.log4j.core.async.AsyncLoggerContextSelector",
        "-Dlog4j2.configurationFile=log4j2-mcp.xml",
        "-Dbabashka.json.provider=metosin/jsonista",
        "-Dlogging.level=INFO",
        "-Dmcp.vegalite.mmdc_executable=/Users/vedang/.local/share/nvm/v23.11.0/bin/mmdc",
        "-cp",
        "/Users/vedang/repo-name/target/tech.unravel/mcp-mermaidjs-server.jar",
        " tech.unravel.mcp.Main"
      ]
    }

In Inspector

java \
  -Dclojure.tools.logging.factory=clojure.tools.logging.impl/log4j2-factory \
  -Dorg.eclipse.jetty.util.log.class=org.eclipse.jetty.util.log.Slf4jLog \
  -Dlog4j2.contextSelector=org.apache.logging.log4j.core.async.AsyncLoggerContextSelector \
  -Dlog4j2.configurationFile=log4j2-mcp.xml \
  -Dbabashka.json.provider=metosin/jsonista \
  -Dlogging.level=INFO \
  -Dmcp.vegalite.mmdc_executable=/Users/vedang/.local/share/nvm/v23.11.0/bin/mmdc \
  -cp /Users/vedang/repo-name/target/tech.unravel/mcp-mermaidjs-server.jar \
  tech.unravel.mcp.Main