什么是MermaidJS MCP Server?

这是一个专门用于处理MermaidJS图表的服务器，它允许用户创建、保存和可视化各种类型的图表，如流程图、序列图等。服务器使用mmdc命令行工具来渲染图表。

如何使用MermaidJS MCP Server?

用户可以通过创建MermaidJS规范文本，然后使用服务器提供的工具保存和渲染这些图表。

适用场景

适用于需要自动生成和分享技术文档中的图表，或在应用程序中集成图表生成功能的场景。

主要功能

保存图表将MermaidJS图表规范保存到服务器

可视化图表将保存的图表渲染为各种格式(如PNG、SVG等)

优势与局限性

优势

提供简单的API接口保存和渲染图表

支持MermaidJS的所有图表类型

可以自定义CSS样式

局限性

需要预先安装mmdc命令行工具

服务器性能取决于mmdc的渲染速度

如何使用

安装mmdc

确保系统已安装mermaid-cli(mmdc)

构建服务器

使用make命令构建服务器

启动服务器

使用Java命令启动MCP服务器

使用案例

创建序列图创建一个描述系统交互的序列图

创建流程图创建一个简单的决策流程图

常见问题

如何安装mmdc?

支持哪些输出格式?

如何自定义图表样式?

🚀 使用 tech.unravel/mcp-mermaidjs-server 的 MCP 服务器与 MermaidJS 工作

本项目可通过 mmdc 创建一个为 MermaidJS 工作的 MCP 服务器。我们开发了两个简单的工具：save-diagram 和 visualize-diagram。借助这些工具，主机能够按照以下步骤生成精美的 MermaidJS 图表：

创建一个 mmd 规格并保存。
使用指定的输出格式（可选）和 CSS（通过访问 mmdc）渲染已保存的规格。

🚀 快速开始

📦 安装指南

构建 Uberjar

运行以下命令：

make clean && make build

运行 MCP 服务器

前提条件：需要安装 mmdc CLI。

💻 使用示例

基础用法

根据以下规格创建一个 MermaidJS 的流程图：

sequenceDiagram
%% 请参阅 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

高级用法

在运行 MCP 服务器之前

注意事项：

替换 /Users/vedang/repo-name 为系统上的 tech.unravel/mcp-mermaidjs-server JAR 的正确路径。
指定系统上 mmdc 的完整路径。

在 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"
      ]
    }
}

在 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