- Home
- MCP servers
- Diagram Bridge
Diagram Bridge
- 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.