Diagram Bridge

Bridges LLM workflows to diagram creation, format selection, and rendering via Kroki.
  • typescript

10

GitHub Stars

typescript

Language

5 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs
{
  "mcpServers": {
    "tohachan-diagram-bridge-mcp": {
      "command": "node",
      "args": [
        "/path/to/diagram-bridge-mcp/dist/index.js"
      ],
      "env": {
        "PORT": "YOUR_PORT",
        "KROKI_PORT": "YOUR_KROKI_PORT"
      }
    }
  }
}

You are using a compact MCP server that bridges large language models and diagram rendering. It offers three coordinated tools for selecting a diagram format, generating format-specific instructions, and rendering the final image via Kroki. This setup lets you ask for a diagram, let the system pick the best format, tailor the diagram code, and produce a high-quality PNG or SVG image.

How to use

You connect to the Diagram Bridge MCP Server through an MCP client. The server exposes three built-in tools that you can use in sequence to complete a full diagram workflow.

How to install

Prerequisites you need before running the server are Node.js and Docker with Docker Compose. Ensure you have Node.js version 18.0 or higher and Docker installed on your machine.

# 1) Install dependencies and build the project
npm install && npm run build

# 2) Set up environment (choose one of the options below)
# Option A: Copy default env and edit ports
cp .env.example .env
# Edit .env to set PORT and KROKI_PORT as needed

# Or set ports directly in your shell
export PORT=4000        # MCP Server port (default: 3000)
export KROKI_PORT=9000  # Kroki service port (default: 8000)

# 3) Start services
# Option A: Interactive port configuration script
./scripts/start-with-ports.sh

# Option B: Default ports (3000 for MCP, 8000 for Kroki)
docker-compose up --build

# Option C: Custom ports via environment variables
PORT=4000 KROKI_PORT=9000 docker-compose up --build

# 4) Add the MCP server to your client configuration
# For direct local use (Node runtime)
{
  "mcpServers": {
    "diagram-bridge-mcp": {
      "command": "node",
      "args": ["/path/to/diagram-bridge-mcp/dist/index.js"],
      "enabled": true
    }
  }
}

# For Docker-based setup (recommended)
{
  "mcpServers": {
    "diagram-bridge-mcp": {
      "command": "docker",
      "args": [
        "exec",
        "-i",
        "diagram-bridge-mcp",
        "node",
        "dist/index.js"
      ],
      "enabled": true
    }
  }
}

# Note: The MCP protocol uses STDIO communication. The HTTP endpoints (:3000/health) are intended for monitoring only and are not used by MCP clients.

Additional configuration and notes

By default, generated diagrams are stored under a local directory and Kroki runs in a local Docker container. You can customize these settings and ports via environment variables. The server normally exposes health and info endpoints for monitoring when running in Docker.

Available tools

help_choose_diagram

Intelligent format selection based on your requirements, with confidence scores and structured prompts to guide the LLM in choosing the best diagram format.

get_diagram_instructions

Generates format-specific coding instructions, including syntax guidelines, best practices, and examples for the chosen diagram format.

render_diagram

Transforms diagram code into professional images via Kroki, supporting PNG and SVG outputs with caching and file storage.

Built by
VeilStrat
AI signals for GTM teams
© 2026 VeilStrat. All rights reserved.All systems operational