MCP Kroki Server

by tkoba1974

8 stars

315 downloads

Not rated

GitHub

Other

About

MCP server to convert a diagram to picture using kroki.io

Details

Author: tkoba1974
GitHub stars: 8
Downloads: 315
Categories: Other

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name MCP Kroki Server

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

Install via git clone and npm, or run with npx. Add the server to your MCP client configuration (e.g., Claude Desktop) and then call the generate_diagram_url or download_diagram tools with the diagram type and content. The server sends the diagram to Kroki.io for rendering.

`generate_diagram_url`

Generate a URL for a diagram using Kroki.io. This tool takes Mermaid diagram code or other supported diagram formats and returns a URL to the rendered diagram. The URL can be used to display the diagram in web browsers or embedded in documents.

`download_diagram`

Download a diagram image to a local file. This tool converts diagram code (such as Mermaid) into an image file and saves it to the specified location. Useful for generating diagrams for presentations, documentation, or other offline use. Includes an option to scale SVG output.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

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

MCP Kroki Server

An MCP (Model Context Protocol) server for converting Mermaid diagrams to SVG images using Kroki.io.

Features

- Generate URLs for diagrams using Kroki.io
- Download diagrams as SVG, PNG, PDF, or JPEG files
- Support for multiple diagram formats:
- Mermaid
- PlantUML
- Graphviz
- And many more (see Kroki.io documentation)

Installation

local install

git clone https://github.com/tkoba1974/mcp-kroki.git
cd mcp-kroki
npm install
npm run build

Usage

The server provides two main tools:

1. Generate Diagram URL

Generates a URL for a diagram using Kroki.io.

Parameters:
- type: The diagram type (e.g., "mermaid", "plantuml")
- content: The diagram content in the specified format
- outputFormat (optional): The output format (svg, png, pdf, jpeg, base64)

2. Download Diagram

Downloads a diagram to a local file.

Parameters:
- type: The diagram type (e.g., "mermaid", "plantuml")
- content: The diagram content in the specified format
- outputPath: The path where the diagram should be saved
- outputFormat (optional): The output format (svg, png, pdf, jpeg)
- scale (optional, number, default: 1.0): Scaling factor for the diagram dimensions. Currently only affects SVG output by attempting to modify width/height attributes. Minimum value is 0.1.

Example

// Generate a URL for a Mermaid diagram
const result = await callTool('generate_diagram_url', {
  type: 'mermaid',
  content: 'graph TD; A-->B; B-->C; C-->D;',
  outputFormat: 'svg'
});
// Download a Mermaid diagram

const result = await callTool('download_diagram', {

  type: 'mermaid',

  content: 'graph TD; A-->B; B-->C; C-->D;',

  outputPath: '/path/to/diagram.svg'

});

How It Works

The server uses the Kroki.io API to convert diagrams. The diagram content is compressed and encoded before being sent to Kroki.io.

Usage with Claude Desktop

Add to your Claude Desktop configuration file (claude_desktop_config.json):

local install:

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

npx：

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

License

MIT

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

generate_diagram_url

download_diagram

Claude Desktop / Cursor

McpServers

MCP Kroki Server

Features

Installation

local install

Usage

1. Generate Diagram URL

2. Download Diagram

Example

How It Works

Usage with Claude Desktop

local install:

npx：

License

Install

More like this

Sequential Thinking

Filesystem

EverArt

Google Drive

Reactive Resume

FastMCP v2 🚀

`generate_diagram_url`

`download_diagram`