使用说明

项目简介

本项目 'mcp-kroki' 是一个实现了 Model Context Protocol (MCP) 的服务器，它作为一个桥梁，连接了 LLM 客户端和 Kroki.io 图表生成服务。通过此服务器，LLM 可以调用工具，将 Mermaid, PlantUML, Graphviz 等多种图表代码转换为图片，并获取图片的 URL 或直接下载图片文件到本地。这使得 LLM 应用能够方便地生成和处理各种图表，增强了内容创作和数据可视化的能力。

主要功能点

生成图表 URL: 根据图表类型和代码，生成一个可以直接在浏览器中访问的图表 URL。
下载图表: 将图表代码转换为图片文件（支持 SVG, PNG, PDF, JPEG 格式），并保存到服务器本地指定路径。
支持多种图表格式: 支持 Kroki.io 支持的所有图表类型，包括 Mermaid, PlantUML, Graphviz, C4plantuml 等。
可配置输出格式: 用户可以指定输出图片的格式，例如 SVG, PNG, PDF, JPEG，以及 Base64 编码的 SVG。
SVG缩放: 下载SVG图表时，支持缩放比例调整。
错误处理: 能够检测并报告 Kroki.io 服务返回的错误信息，以及图表代码本身的错误。

安装步骤

克隆仓库到本地:

git clone https://github.com/tkoba1974/mcp-kroki.git
cd mcp-kroki

安装依赖:
```
npm install
```
构建项目:
```
npm run build
```

服务器配置

要将 'mcp-kroki' 服务器与 MCP 客户端（例如 Claude Desktop）连接，您需要在客户端的配置文件中添加服务器配置信息。以下是两种配置方式：

方式一：本地安装方式配置

如果您选择本地安装 'mcp-kroki' 服务器，请使用以下 JSON 配置。您需要将 '/path/to/mcp-kroki/build/index.js' 替换为实际的 'mcp-kroki' 项目 'build/index.js' 文件的绝对路径。

{
  "mcpServers": {
    "mcp-kroki": {
      "command": "node",
      "args": ["/path/to/mcp-kroki/build/index.js"]
    }
  }
}

'mcpServers': 配置 MCP 服务器的根节点。
'mcp-kroki': 为该服务器自定义的名称，在客户端中用于标识和调用此服务器，可以修改为其他名称。
'command': 启动服务器的命令，这里使用 'node' 命令来执行 JavaScript 文件。
'args': 启动命令的参数，这里指定了 'mcp-kroki' 服务器程序入口文件 'build/index.js' 的路径。

方式二：npx 方式配置

如果您希望使用 'npx' 直接运行，而无需本地构建，可以使用以下 JSON 配置。

{
  "mcpServers": {
    "mcp-kroki": {
      "command": "npx",
      "args": [
        "-y",
        "@tkoba1974/mcp-kroki"
      ]
    }
  }
}

'mcpServers': 配置 MCP 服务器的根节点。
'mcp-kroki': 为该服务器自定义的名称，在客户端中用于标识和调用此服务器，可以修改为其他名称。
'command': 启动服务器的命令，这里使用 'npx' 命令来运行 npm 包。
'args': 启动命令的参数：
- '-y': 'npx' 的参数，表示自动确认安装包。
- '@tkoba1974/mcp-kroki': 要运行的 npm 包名称。

基本使用方法

配置完成后，在 MCP 客户端中，您可以使用 'callTool' 函数来调用 'mcp-kroki' 服务器提供的工具。

1. 生成图表 URL

调用 'generate_diagram_url' 工具，并提供图表类型 ('type') 和图表内容 ('content')。'outputFormat' 参数可选，用于指定输出格式（默认为 SVG）。

// 生成 Mermaid 图表的 URL (SVG 格式)
const result = await callTool('generate_diagram_url', {
  type: 'mermaid',
  content: 'graph TD; A-->B; B-->C; C-->D;'
});
console.log(result.content[0].text); // 输出包含 URL 的文本信息

// 生成 PlantUML 图表的 URL (PNG 格式)
const result = await callTool('generate_diagram_url', {
  type: 'plantuml',
  content: '@startuml\nAlice -> Bob: Authentication Request\nBob --> Alice: Authentication Response\n@enduml',
  outputFormat: 'png'
});
console.log(result.content[0].text); // 输出包含 URL 的文本信息

2. 下载图表

调用 'download_diagram' 工具，需要提供图表类型 ('type')、图表内容 ('content') 和保存路径 ('outputPath')。'outputFormat' 参数可选，用于指定输出格式（默认为从 'outputPath' 扩展名推断，或默认为 SVG）。'scale' 参数可选，用于设置 SVG 图表的缩放比例。

// 下载 Mermaid 图表为 SVG 文件
const result = await callTool('download_diagram', {
  type: 'mermaid',
  content: 'graph TD; A-->B; B-->C; C-->D;',
  outputPath: '/path/to/save/diagram.svg' // 替换为实际的保存路径
});
console.log(result.content[0].text); // 输出成功保存的信息

// 下载 PlantUML 图表为 PNG 文件，并设置缩放比例为 2.0 (仅对 SVG 有效，此处仅为示例)
const result = await callTool('download_diagram', {
  type: 'plantuml',
  content: '@startuml\nAlice -> Bob: Authentication Request\nBob --> Alice: Authentication Response\n@enduml',
  outputPath: '/path/to/save/diagram.png', // 替换为实际的保存路径
  outputFormat: 'png',
  scale: 2.0
});
console.log(result.content[0].text); // 输出成功保存的信息

请根据您的实际需求选择合适的工具和参数，并参考 Kroki.io 的文档了解更多支持的图表类型和格式。

关键词