JSON Canvas MCP 服务器

模型上下文协议 (MCP) 服务器实现，提供根据官方规范处理 JSON Canvas 文件的工具。此服务器支持创建、修改和验证无限的画布数据结构。

概述

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

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

Related MCP server: Canvas MCP Server V2.0

成分

资源

服务器公开以下资源：

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

工具

节点操作

创建节点
- 创建任何受支持类型的新节点
- 输入：
  - type （字符串）：节点类型（“文本”，“文件”，“链接”，“组”）
  - properties （对象）：节点特定的属性
    - 常见： id 、 x 、 y 、 width 、 height 、 color
    - 特定类型： text 、 file 、 url等。
- 返回：创建的节点对象
更新节点
- 更新现有节点的属性
- 输入：
  - id （字符串）：要更新的节点 ID
  - properties （对象）：要更新的属性
- 返回：更新后的节点对象
删除节点
- 删除节点及其连接的边
- 输入：
  - id （字符串）：要删除的节点 ID
- 返回：成功确认

边缘操作

创建边
- 在节点之间创建新边
- 输入：
  - id （字符串）：唯一边缘标识符
  - fromNode （字符串）：源节点 ID
  - toNode （字符串）：目标节点 ID
  - fromSide （可选字符串）：起始侧（“顶部”、“右侧”、“底部”、“左侧”）
  - toSide （可选字符串）：结束侧
  - color （可选字符串）：边缘颜色
  - label （可选字符串）：边缘标签
- 返回：创建的边缘对象
更新边
- 更新现有边的属性
- 输入：
  - id （字符串）：要更新的边缘 ID
  - properties （对象）：要更新的属性
- 返回：更新的边缘对象
删除边
- 移除边
- 输入：
  - id （字符串）：要删除的边 ID
- 返回：成功确认

画布操作

验证画布
- 根据规范验证画布
- 输入：
  - canvas （对象）：需要验证的画布数据
- 返回：带有任何错误的验证结果
导出画布
- 将画布导出为不同的格式
- 输入：
  - format （字符串）：目标格式（“json”，“svg”，“png”）
  - canvas （对象）：要导出的画布数据
- 返回：以请求的格式导出的画布

与 Claude Desktop 一起使用

Docker

将其添加到您的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")