JSON Canvas MCP Server

JSON画布MCP服务器

一种模型上下文协议（MCP）服务器实现，根据 官方规范此服务器允许创建、修改和验证无限画布数据结构。

概述

JSON Canvas MCP服务器提供了JSON Canvas 1.0规范的完整实现，支持：

• 无限画布数据的创建和操作
• 支持所有节点类型（文本、文件、链接、组）
• 带有样式和标签的边缘连接
• 根据规范进行验证
• 可配置的输出路径

组件

资源

服务器公开以下资源：

• canvas://schema：用于验证画布文件的JSON模式
• canvas://examples：演示不同功能的画布文件示例
• canvas://templates：用于创建新画布的模板

工具

节点操作

• 创建节点

- 创建任何支持类型的新节点 - 输入： - type （string）：节点类型（“文本”、“文件”、“链接”、“组”） - properties （对象）：节点特定属性 - 常见： id, x, y, width, height, color - 特定类型： text, file, url等等。 - 返回：已创建节点对象

• update_node

- 更新现有节点的属性 - 输入： - id （string）：要更新的节点ID - properties （对象）：要更新的属性 - 返回：已更新节点对象

• delete_node

- 删除节点及其连接边 - 输入： - id （string）：要删除的节点ID - 返回：成功确认

边缘操作

• create_edge

- 在节点之间创建新边 - 输入： - id （字符串）：唯一边缘标识符 - fromNode （字符串）：源节点ID - toNode （string）：目标节点ID - fromSide （可选字符串）：起始侧（“顶部”、“右侧”、“底部”、“左侧”） - toSide （可选字符串）：结束侧 - color （可选字符串）：边缘颜色 - label （可选字符串）：边缘标签 - 返回：已创建边对象

• update_edge

- 更新现有边的属性 - 输入： - id （字符串）：要更新的边缘ID - properties （对象）：要更新的属性 - 返回：已更新的边对象

• 删除_边缘

- 移除边缘 - 输入： - id （字符串）：要删除的边缘ID - 返回：成功确认

画布操作

• validate_canvas

- 根据规范验证画布 - 输入： - canvas （对象）：要验证的画布数据 - 返回：包含任何错误的验证结果

• 出口canvas

- 将画布导出为不同格式 - 输入： - format （string）：目标格式（“json”、“svg”、“png”） - canvas （对象）：要导出的画布数据 - 返回：以请求的格式导出画布

使用Claude Desktop

码头工人

将此添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "jsoncanvas": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-v",
        "canvas-data:/data",
        "mcp/jsoncanvas"
      ],
      "env": {
        "OUTPUT_PATH": "/data/output"
      }
    }
  }
}

紫外线的

{
  "mcpServers": {
    "jsoncanvas": {
      "command": "uv",
      "args": [
        "--directory",
        "/path/to/jsoncanvas",
        "run",
        "mcp-server-jsoncanvas"
      ],
      "env": {
        "OUTPUT_PATH": "./output"
      }
    }
  }
}

配置

可以使用环境变量配置服务器：

• OUTPUT_PATH：保存画布文件的目录（默认：“./output”）
• FORMAT：画布文件的默认输出格式（默认：“json”）

建筑

Docker构建

docker build -t mcp/jsoncanvas .

本地建设

# Install uv if not already installed
curl -LsSf https://astral.sh/uv/install.sh | sh

# Create virtual environment and install dependencies
uv venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate
uv pip install -e .

# Run tests
pytest

示例用法

创建画布

from jsoncanvas import Canvas, TextNode, Edge

# Create nodes
title = TextNode(
    id="title",
    x=100,
    y=100,
    width=400,
    height=100,
    text="# Hello Canvas\n\nThis is a demonstration.",
    color="#4285F4"
)

info = TextNode(
    id="info",
    x=600,
    y=100,
    width=300,
    height=100,
    text="More information here",
    color="2"  # Using preset color
)

# Create canvas
canvas = Canvas()
canvas.add_node(title)
canvas.add_node(info)

# Connect nodes
edge = Edge(
    id="edge1",
    from_node="title",
    to_node="info",
    from_side="right",
    to_side="left",
    label="Connection"
)
canvas.add_edge(edge)

# Save canvas
canvas.save("example.canvas")

许可证

此MCP服务器根据MIT许可证获得许可。这意味着您可以根据MIT许可证的条款和条件自由使用、修改和分发软件。有关更多详细信息，请参阅项目存储库中的LICENSE文件。