excalidash-mcp

excalidash-mcp

MCP server for live collaborative drawing on ExcaliDash, enabling diagram creation and editing with instant browser updates via Socket.IO.

Category
Visit Server

README

excalidash-mcp

MCP server for live collaborative drawing on ExcaliDash. Draw diagrams, brainstorm, and visualize ideas — changes appear instantly in the browser via Socket.IO.

https://github.com/user-attachments/assets/placeholder-demo.mp4

Features

  • Live updates — Elements appear instantly in open browsers, no refresh needed
  • High-level tools — add_text, add_shape, add_arrow with minimal tokens
  • Scene DSL — Draw complex diagrams with a compact one-line-per-element syntax
  • Named Elements — Give elements descriptive IDs (rect frontend 100,100 ...) for easy reference
  • Edit & Delete — Modify or remove elements by name, live
  • Rename — Rename cryptic auto-generated IDs to descriptive names
  • Version History — Browse snapshots, restore previous versions (requires ExcaliDash with PR #138)
  • Library — Search and place icons/templates from your ExcaliDash library
  • Token-efficient — ~85% fewer tokens compared to raw Excalidraw JSON

Prerequisites

You need a running ExcaliDash instance. ExcaliDash is a self-hosted Excalidraw dashboard with user management, REST API, and real-time collaboration.

1. Set up ExcaliDash

Follow the ExcaliDash installation guide to get your instance running. Typically:

git clone https://github.com/ZimengXiong/ExcaliDash.git
cd ExcaliDash
cp .env.example .env  # configure JWT_SECRET, CSRF_SECRET, etc.
docker compose up -d

2. Configure Nginx (important!)

The default ExcaliDash frontend Nginx config does not proxy /api/ and /socket.io/ to the backend. You need to add these proxy rules for the MCP adapter (and live collaboration) to work.

Create a custom nginx.conf and mount it into the frontend container:

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # API proxy
    location /api/ {
        proxy_pass http://backend:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Backend routes (auth, drawings, etc.)
    location ~ ^/(auth|csrf-token|drawings|health|collections|admin) {
        proxy_pass http://backend:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Socket.IO (live collaboration)
    location /socket.io/ {
        proxy_pass http://backend:8000/socket.io/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 86400;
    }
}

Mount it in your docker-compose.yml:

frontend:
  image: zimengxiong/excalidash-frontend:latest
  volumes:
    - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

3. Create an agent user

Create a dedicated user for the MCP adapter in ExcaliDash. This keeps agent actions separate from your personal account and shows up as a distinct collaborator on the board.

You can create a user via the ExcaliDash UI or API.

4. (Optional) Expose backend port

If the MCP adapter runs on the same machine as ExcaliDash, expose the backend port for direct access (faster than going through Nginx):

backend:
  ports:
    - "127.0.0.1:6768:8000"

Installation

git clone https://github.com/davifernan/excalidash-mcp.git
cd excalidash-mcp
npm install

Configuration

Add to your MCP client config (e.g. ~/.mcp.json for Claude Code):

{
  "mcpServers": {
    "excalidash": {
      "command": "node",
      "args": ["/path/to/excalidash-mcp/src/index.js"],
      "env": {
        "EXCALIDASH_BACKEND_URL": "http://127.0.0.1:6768",
        "EXCALIDASH_URL": "https://your-excalidash.example.com",
        "EXCALIDASH_EMAIL": "agent@example.com",
        "EXCALIDASH_PASSWORD": "your-agent-password"
      }
    }
  }
}

Behind a reverse proxy?

If your ExcaliDash backend has TRUST_PROXY=true (common when behind Nginx/Cloudflare), add these to prevent redirect loops:

{
  "env": {
    "EXCALIDASH_PROXY_PROTO": "https",
    "EXCALIDASH_PROXY_HOST": "your-excalidash.example.com"
  }
}

Tools

Drawing (token-efficient)

Tool Description
add_text Add text with position, color, size, font
add_shape Add rectangle/ellipse/diamond with optional label
add_arrow Arrow with head styles (arrow/bar/dot/triangle/none), line styles (solid/dashed/dotted)
draw_scene Compact DSL — one element per line

Scene DSL

Draw multiple elements in a single call with minimal tokens. Always give elements descriptive IDs — this makes updating and deleting easy:

# Comments start with #
text title 250,20 size=28 color=blue 'System Architecture'

rect frontend 100,100 200x100 color=blue fill=blue 'Frontend'
rect backend 400,100 200x100 color=green fill=green 'Backend'
arrow fe-to-be 300,150 -> 400,150 color=gray style=dashed 'API'

diamond cache 250,280 120x80 color=orange fill=orange
circle queue 500,280 80x80 color=purple fill=purple

Supported types: rect, circle, diamond, arrow, line, text

Colors: red, blue, green, orange, purple, pink, yellow, gray, black — or any hex code (#e03131)

Arrow options: style=dashed, start=arrow, end=triangle

Board Management

Tool Description
list_boards List all boards
create_board Create a new board
read_board Read elements with IDs (for editing)
clear_board Remove all elements

Editing

Tool Description
update_element Change any property by element name/ID
delete_elements Delete specific elements by name/ID
rename_element Rename a cryptic ID to a descriptive name (updates all references)

Version History

Requires ExcaliDash with PR #138 (pending merge).

Tool Description
board_history List version snapshots (ID + timestamp)
restore_version Restore a board to a previous snapshot (reversible)

Library

Tool Description
get_library Search available icons/templates by name
add_from_library Place a library item on the board

Environment Variables

Variable Required Description
EXCALIDASH_BACKEND_URL Yes Backend API URL (e.g. http://127.0.0.1:6768)
EXCALIDASH_URL Yes Public frontend URL (e.g. https://draw.example.com)
EXCALIDASH_EMAIL Yes Agent user email
EXCALIDASH_PASSWORD Yes Agent user password
EXCALIDASH_PROXY_PROTO No Set to https if behind reverse proxy with TRUST_PROXY=true
EXCALIDASH_PROXY_HOST No Hostname for proxy Host header

How it works

Claude / AI Agent
       │
       │ MCP tool calls (add_text, draw_scene, etc.)
       ▼
┌─────────────────┐
│  excalidash-mcp │  ← enriches elements, calculates text dimensions
│  (MCP Server)   │
└───────┬─────────┘
        │
   ┌────┴────┐
   │         │
   ▼         ▼
Socket.IO   REST API
(live)      (persist)
   │         │
   └────┬────┘
        ▼
┌─────────────────┐
│   ExcaliDash    │  ← self-hosted Excalidraw dashboard
│   Backend       │
└───────┬─────────┘
        │
        ▼
   Browser(s)  ← instant live updates, no refresh

License

MIT

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured