drio
Open app

JSON Canvas MCP Server

Source

Catalog onlyCatalog onlySTDIO

Overview

The JSON Canvas MCP Server is an implementation of the Model Context Protocol (MCP) that provides tools for creating, modifying, and validating JSON Canvas files according to the official specification. It allows users to work with infinite canvas data structures effectively.

To use the JSON Canvas MCP Server, you can run it via Docker or UV, configure it with environment variables, and interact with it through its API to create and manage canvas data.

  • Full implementation of the JSON Canvas 1.0 specification. - Support for various node types (text, file, link, group). - Edge connections with customizable styling and labels. - Validation of canvas data against the specification. - Exporting canvas data to multiple formats (JSON, SVG, PNG).
  1. Creating interactive diagrams and flowcharts.
  2. Managing complex data visualizations.
  3. Collaborating on design projects using infinite canvas.

Add to your AI client

Use these steps to connect JSON Canvas MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-server-obsidian-jsoncanvas-cam10001110101": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-obsidian-jsoncanvas-cam10001110101"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mcp-server-obsidian-jsoncanvas-cam10001110101": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-obsidian-jsoncanvas-cam10001110101"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-server-obsidian-jsoncanvas-cam10001110101": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-obsidian-jsoncanvas-cam10001110101"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-server-obsidian-jsoncanvas-cam10001110101": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-obsidian-jsoncanvas-cam10001110101"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-server-obsidian-jsoncanvas-cam10001110101": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-obsidian-jsoncanvas-cam10001110101"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-server-obsidian-jsoncanvas-cam10001110101": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-obsidian-jsoncanvas-cam10001110101"
      ]
    }
  }
}

FAQ

What types of nodes can I create?

You can create text, file, link, and group nodes.

How do I validate my canvas?

Use the validate_canvas operation to check your canvas against the specification.

Is there a way to export my canvas?

Yes, you can export your canvas in JSON, SVG, or PNG formats.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":1811,"uuid":"3f527e6f-1387-484b-ab68-8201818ce4d9","name":"mcp-server-obsidian-jsoncanvas","title":"JSON Canvas MCP Server","description":"","avatar_url":"https://avatars.githubusercontent.com/u/168899055?v=4","created_at":"2025-03-05T05:28:41.391+00:00","updated_at":"2025-03-12T10:20:54.009+00:00","status":"created","author_name":"Cam10001110101","author_avatar_url":"https://avatars.githubusercontent.com/u/168899055?v=4","tags":"jsoncanvas,mcp-server,canvas-tools","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/Cam10001110101/mcp-server-obsidian-jsoncanvas","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"0\",\"license\":\"MIT license\",\"language\":\"Python\",\"is_official\":false,\"latest_commit_time\":\"2025-03-03 17:18:16\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools