mcpField
T
tech.unravel/mcp-mermaidjs-server

tech.unravel/mcp-mermaidjs-server

ローカル
github.com/unravel-teamメディア・デザイン079 週間前に更新

tech.unravel/mcp-mermaidjs-server について

tech.unravel/mcp-mermaidjs-server は、`mmdc` を使って MermaidJS の図を保存・レンダリングする MCP サーバーです。図の仕様を保存するツールと、形式を指定して表示するツールを提供します。

主な機能

  1. 01MermaidJS 仕様の保存
  2. 02保存した図のレンダリング
  3. 03出力形式の指定
  4. 04任意の CSS の適用

活用シーン

  1. 01後でレンダリングする図の仕様を保存
  2. 02保存済み仕様を指定形式でレンダリング

MCP 対応

図の仕様を保存し、レンダリングするツールを MCP ホストに公開します。実行には `mmdc` コマンドラインツールが必要です。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"mermaidjs-server": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/inspector"
]
}
}
}
起動コマンドnpx -y @modelcontextprotocol/inspector

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@modelcontextprotocol/inspector

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

tech.unravel/mcp-mermaidjs-server

mmdc を使用して MermaidJS を操作する MCP サーバーです。

次の 2 つのシンプルなツールを作成します。

  • save-diagram
  • visualize-diagram

これらのツールを使うことで、ホストは次の手順で美しい mermaid-js の図を作成できます。

  • mmd の仕様を作成して保存する
  • 保存した仕様を、特定の出力形式と(任意で)CSS を指定してレンダリングする(mmdc にアクセスして実行)

使用方法

Uberjar のビルド
  1. make clean && make build
MCP サーバーの実行

前提条件:mmdc CLI がインストールされている必要があります。

Claude Desktop または Inspector で試せるコマンドの例:

  1. 次の仕様から MermaidJS のシーケンス図を作成します。
sequenceDiagram
%% See https://mermaidjs.github.io/sequenceDiagram.html

loop everyday D-2 working days 16:00
    ABCD->>DEE: [14:25] BEE (Calculation per TC until ACK becomes OK)

    ABCD->>FGG: BEE (Calculation per TC until ACK becomes OK)
    Note over ABCD,FGG: D-2 weekdays at 14:25
    ABCD->>HII: Projected Authorisations to HII
    Note over ABCD,HII: D-2 weekdays at 16:00
end

loop D-1 before deadline at 7:45
    HII->>DEE: Submission
    Note over HII,DEE: D-1 before deadline
    HII->>FGG: Submission
    Note over HII,FGG: D-1 before deadline
end
MCP サーバーを実行する前に

次の点に注意してください。

  1. tech.unravel/mcp-mermaidjs-server Jar のフルパスを、お使いのシステムに合ったパスに置き換えてください(つまり、以下の /Users/vedang/repo-name を正しいパスに置き換えてください)
  2. お使いのシステム上の 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-1.0.0.jar",
        "tech.unravel.mcp-mermaidjs-server"
      ]
    }
MCP Inspector の場合

お使いのシステム上の tech.unravel/mcp-mermaidjs-server JAR のフルパスを指定してください。

npx @modelcontextprotocol/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-1.0.0.jar tech.unravel.mcp-mermaidjs-server

ライセンス

Copyright © 2025 Unravel.tech Engineering

MIT License の下で配布されています

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。