JSON Canvas

JSON Canvas

🚀 JSON Canvas MCP 服务器

JSON Canvas MCP 服务器是一个实现了 Model Context Protocol (MCP) 协议的服务器,它依据 官方规范,提供了用于处理 JSON Canvas 文件的工具。该服务器支持创建、修改和验证无限画布数据结构,为用户在画布操作方面提供了强大的功能支持。

🚀 快速开始

克隆仓库

使用 Git 克隆此项目:

git clone https://github.com/your-username/jsoncanvas.git
cd jsoncanvas

安装依赖

运行以下命令安装所需依赖项:

pip install -r requirements.txt

运行服务器

安装完成后,运行以下命令启动服务器:

python3 -m jsoncanvas.server

✨ 主要特性

JSON Canvas MCP 服务器完整实现了 JSON Canvas 1.0 规范,具备以下强大功能:

  • 数据操作:支持创建和操作无限画布数据,满足多样化的画布使用需求。
  • 节点类型丰富:支持所有节点类型,包括文本、文件、链接、组,为画布内容的构建提供了多种选择。
  • 边连接及标签:提供带样式的边连接及标签,使画布元素之间的关系更加清晰。
  • 规范验证:可对规范进行验证,确保画布数据的准确性和规范性。
  • 输出路径可配置:用户能够根据自身需求配置输出路径。

📦 安装指南

环境变量配置

设置以下环境变量以自定义服务器行为:

  • JSONCANVAS_PORT:指定服务器监听的端口,默认为 3000
  • JSONCANVAS_HOST:指定服务器绑定的主机地址,默认为 localhost
  • JSONCANVAS_LOG_LEVEL:指定日志级别,可选值有 debug, info, warning, error,默认为 info

配置文件

可以在项目根目录下创建一个 config.json 文件:

{
"port": 3001,
"host": "127.0.0.1",
"log_level": "debug"
}

💻 使用示例

基础用法

使用 Claude Desktop 的方式一:通过命令行工具

  1. 安装并启动 Claude Desktop。
  2. 打开终端,运行以下命令:
python3 -m jsoncanvas.example
  1. 按照提示操作即可。

使用 Claude Desktop 的方式二:直接使用 API 接口

from jsoncanvas import Canvas, TextNode, Edge

# 创建节点
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"  # 使用预设颜色
)

# 创建画布
canvas = Canvas()
canvas.add_node(title)
canvas.add_node(info)

# 连接节点
edge = Edge(
id="edge1",
from_node="title",
to_node="info",
from_side="right",
to_side="left",
label="Connection"
)
canvas.add_edge(edge)

# 保存画布
canvas.save("example.canvas")

高级用法

创建一个画布

from jsoncanvas import Canvas, TextNode, Edge

# 创建节点
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"  # 使用预设颜色
)

# 创建画布
canvas = Canvas()
canvas.add_node(title)
canvas.add_node(info)

# 连接节点
edge = Edge(
id="edge1",
from_node="title",
to_node="info",
from_side="right",
to_side="left",
label="Connection"
)
canvas.add_edge(edge)

# 保存画布
canvas.save("example.canvas")

📚 详细文档

组件

资源

服务器公开了以下资源:

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

工具

节点操作
  • create_node

    • 功能:创建任意类型的新节点。
    • 输入:
      • type (字符串):节点类型 ("text", "file", "link", "group")。
      • properties (对象):节点特定属性。
        • 公共属性:id, x, y, width, height, color
        • 类型特定属性:text, file, url 等。
    • 返回:创建的节点对象。
  • update_node

    • 功能:更新现有节点属性。
    • 输入:
      • id (字符串):要更新的节点 ID。
      • properties (对象):要更新的属性。
    • 返回:已更新的节点对象。
  • delete_node

    • 功能:删除节点及其连接的边。
    • 输入:
      • id (字符串):要删除的节点 ID。
    • 返回:无。
边操作
  • create_edge

    • 功能:创建新边。
    • 输入:
      • id (字符串):边的唯一标识符。
      • from_node (字符串):起始节点的 ID。
      • to_node (字符串):目标节点的 ID。
      • label (字符串,可选):边的标签。
      • color (字符串,可选):边的颜色,默认为 "#000000"
    • 返回:创建的边对象。
  • update_edge

    • 功能:更新现有边属性。
    • 输入:
      • id (字符串):要更新的边 ID。
      • properties (对象):要更新的属性。
    • 返回:无。
  • delete_edge

    • 功能:删除指定边。
    • 输入:
      • id (字符串):要删除的边 ID。
    • 返回:无。

📄 许可证

此项目采用 MIT 许可证。详见 LICENSE 文件。

  • 0 关注
  • 0 收藏,18 浏览
  • system 提出于 2025-09-19 03:27

相似服务问题

相关AI产品