mcp-mermaidjs-server MCP Server: A Tool for Integrating MermaidJS Diagrams into AI Applications

Overview: What is mcp-mermaidjs-server?

mcp-mermaidjs-server is an MCP (Model Context Protocol) server designed to facilitate the creation and visualization of MermaidJS diagrams within various AI applications. This server enables seamless integration between these applications and specific tools, enhancing their capabilities in generating, storing, and displaying complex diagram data. By leveraging the Model Context Protocol, this server ensures a standardized method for interaction with other MCP clients.

🔧 Core Features & MCP Capabilities

mcp-mermaidjs-server provides two primary functionalities: saving MermaidJS diagrams and visualizing them based on specific output formats and CSS styles. These features are crucial for developers looking to integrate dynamic, visually-rich diagramming capabilities into their AI applications without the need for complex coding.

Saving Diagrams

The save-diagram tool allows users to create a MermaidJS diagram by first defining it using an mmd (Mermaid Markdown) specification. This tool then saves this definition in a structured format, ready for later processing or sharing.

Visualizing Diagrams

Once a diagram is saved via the save-diagram tool, the visualize-diagram tool can render it in various output formats, such as SVG, PNG, or PDF, using specified CSS styles to ensure the desired presentation. This flexibility makes mcp-mermaidjs-server ideal for generating and manipulating diagrams within AI workflows.

⚙️ MCP Architecture & Protocol Implementation

The mcp-mermaidjs-server operates by adhering to the Model Context Protocol (MCP), ensuring interoperability with various MCP clients such as Claude Desktop, Continue, Cursor, and others. This server uses the mmdc MermaidJS CLI tool under the hood for rendering diagrams.

Implementation Details

The core implementation involves starting the MCP server using specific command-line arguments:

1. Jar Path: Ensure that the path to the server's JAR file is correctly specified.
2. mmdc Executable Path: The server must know where mmdc is located on your system.

Example configuration for running the MCP server in different environments:

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-1.0.0.jar",
      "tech.unravel.mcp-mermaidjs-server"
    ]
  }
}

In MCP Inspector

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

🚀 Getting Started with Installation

Building the Uberjar

To build and run mcp-mermaidjs-server, follow these steps:

1. Clean and Build: Ensure the project is clean before building.

   make clean && make build
   

2. Run the MCP Server: Use either of the provided configuration options to start the server.

💡 Key Use Cases in AI Workflows

Use Case 1: Project Management through MermaidJS Diagrams

MermaidJS diagrams can be used extensively in project management to represent workflows, timelines, and dependencies. For instance, a diagram could depict how tasks are interrelated and their scheduling within a project.

sequenceDiagram
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

Use Case 2: Data Flow Visualization

Using mcp-mermaidjs-server, real-time data flow visualizations can be created and updated within AI applications. This enhances understanding of complex systems by providing clear, interactive diagram representations.

🔌 Integration with MCP Clients

mcp-mermaidjs-server is compatible with multiple MCP clients:

MCP Client	Resources	Tools	Prompts	Status
Claude Desktop	✅	✅	✅	Full Support
Continue	✅	✅	✅	Full Support
Cursor	❌	✅	❌	Tools Only

📊 Performance & Compatibility Matrix

MCP Protocol Flow Diagram

graph TD
    A[AI Application] -->|MCP Client| B[MCP Protocol]
    B --> C[MCP Server]
    C --> D[Data Source/Tool]
    style A fill:#e1f5fe
    style C fill:#f3e5f5
    style D fill:#e8f5e8

Performance Considerations

mcp-mermaidjs-server is optimized for handling diagram-related tasks efficiently, ensuring low latency and high performance. The server handles requests quickly and accurately, making it suitable for real-time updates in dynamic environments.

🛠️ Advanced Configuration & Security

Configuration of the mcp-mermaidjs-server involves setting up environment variables to control various aspects such as logging and server behavior. These configurations can be adjusted via the command-line arguments passed during startup:

{
  "mcpServers": {
    "[server-name]": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-[name]"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

Security

Ensure that environment variables such as mcp.vegalite.mmdc_executable are securely set and not exposed in logs or other public areas.

❓ Frequently Asked Questions (FAQ)

1. Q: Can mcp-mermaidjs-server be integrated with non-MCP clients? A: While primarily designed for MCP, it can be modified to work with non-MCP clients by adjusting the Protocol implementation and environment variables.

2. Q: How do I specify custom output formats for MermaidJS diagrams? A: Use the visualize-diagram tool along with specifying CSS styles to render MermaidJS diagrams in desired formats like SVG, PNG, or PDF.

3. Q: What happens if mmdc is not installed when running the server? A: The MCP server will fail to start due to missing dependencies. Ensure that mmdc is correctly installed and its path is set in the environment variables.

4. Q: How can I optimize performance for large diagrams? A: Optimize by increasing the heap size during JVM startup, enhancing the rendering process, and using caching mechanisms where appropriate.

5. Q: When will API key support be added? A: API key authentication is planned in future releases to enhance security and ensure access control.

👨‍💻 Development & Contribution Guidelines

Contributions are welcome! If you wish to contribute to the development of mcp-mermaidjs-server, please follow these guidelines:

1. Fork the Repository: Start by forking the official repository on GitHub.
2. Create a Pull Request: Make changes and submit pull requests for code reviews.
3. Document Changes: Ensure that your contributions are well-documented and include necessary tests.

🌐 MCP Ecosystem & Resources

For more resources and information about the MCP protocol and its ecosystem, visit:

• MCP Repository on GitHub
• MCP Documentation Site

This documentation provides a comprehensive overview of mcp-mermaidjs-server as an essential tool for developers looking to integrate MermaidJS diagrams into their AI applications using the Model Context Protocol.