什麼是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