JSON Canvas MCP 服务器

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

概述

JSON Canvas MCP 服务器提供了 JSON Canvas 1.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")

执照

此 MCP 服务器采用 MIT 许可证。这意味着您可以自由使用、修改和分发该软件，但须遵守 MIT 许可证的条款和条件。更多详情，请参阅项目仓库中的 LICENSE 文件。

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

模型上下文协议服务器，可根据 JSON Canvas 1.0 规范创建、修改和验证无限画布数据结构。

Related Resources

Reddit Discussion about this server

Related MCP Servers

mcp-server-code-assist
abhishekbhakat
A
security
A
license
A
quality
A Model Context Protocol server that provides tools for code modification and generation via Large Language Models, allowing users to create, modify, rewrite, and delete files using structured XML instructions.
Last updated -
12
1
Python
MIT License
Canvas MCP Server V2.0
DMontgomery40
A
security
F
license
A
quality
A Model Context Protocol server that enables interaction with the Canvas Learning Management System API, allowing users to manage courses, assignments, enrollments, and grades within Canvas.
Last updated -
54
37
33
JavaScript
Custom Context MCP Server
omer-ayhan
A
security
A
license
A
quality
A Model Context Protocol server that transforms text into structured JSON data using templates with placeholders.
Last updated -
2
1
TypeScript
MIT License
mcp-remote-server
hemanth
-
security
F
license
-
quality
A Model Context Protocol server that provides tools for fetching xkcd comics and resources for dynamic data retrieval, WebSocket echo functionality, and static JSON data testing.
Last updated -
5
TypeScript

View all related MCP servers

JSON Canvas MCP Server