@drawio/mcp 1.0.1 → 1.0.3

package/README.md

@@ -10,7 +10,27 @@ The official [draw.io](https://www.draw.io) MCP (Model Context Protocol) server
 - **URL support**: Fetch content from URLs automatically
 - **Customizable display**: Lightbox mode, dark mode, and more
 
-## Installation
+## Two Ways to Use
+
+### Option 1: MCP Server (Claude Desktop)
+
+Install and configure the MCP server for Claude Desktop. The server runs locally and can automatically open diagrams in your browser.
+
+### Option 2: Project Instructions (No MCP)
+
+Use draw.io diagram generation with custom project instructions - works in both Claude.ai and Claude Desktop without installing the MCP server. See [Using Project Instructions](#using-project-instructions-no-mcp) below.
+
+| Feature | MCP Server | Project Instructions |
+|---------|------------|----------------------|
+| Platform | Claude Desktop | Claude.ai & Claude Desktop |
+| Installation | Required | None |
+| System access | Opens browser automatically | No system access |
+| Link verification | Automatic | User can inspect link before clicking |
+| Complexity | More setup | Just paste instructions |
+
+---
+
+## MCP Server Installation
 
 ### Using npx (recommended)
 
@@ -277,6 +297,44 @@ npm install
 npm start
 ```
 
+---
+
+## Using Project Instructions (No MCP)
+
+You can use draw.io diagram generation without installing the MCP server by using custom project instructions. This works in both Claude.ai (web) and Claude Desktop.
+
+**Advantages:**
+
+- **No installation** - Just paste instructions into a project
+- **Works everywhere** - Claude.ai and Claude Desktop
+- **No system access** - Claude generates a link without accessing your computer
+- **Transparent** - You can inspect the generated URL before clicking
+- **Verifiable** - The link visibly points to `app.diagrams.net`
+
+### Setup
+
+1. Create a new Project in Claude.ai or Claude Desktop
+2. In Project Settings, paste the contents of [`claude-project-instructions.txt`](./claude-project-instructions.txt) into the custom instructions
+3. Start a conversation and ask Claude to create diagrams
+
+### How It Works
+
+Claude creates an **HTML artifact** that:
+1. Generates Mermaid/CSV/XML diagram code based on your request
+2. Compresses the diagram data using pako.js (loaded from CDN)
+3. Shows a button to open draw.io with the diagram in lightbox mode
+4. In draw.io, hover to see the "Edit" button to open the full editor
+
+**Note:** The artifact uses draw.io's lightbox mode (`lightbox=1&dark=auto&border=10&edit=_blank`).
+
+### Example
+
+**You:** Create a flowchart for a user login process
+
+**Claude:** *Creates an HTML artifact with an "Open in draw.io" button*
+
+---
+
 ## Related Resources
 
 - [draw.io](https://www.draw.io) - Free online diagram editor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawio/mcp",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Official draw.io MCP server for LLMs - Open diagrams in draw.io editor",
   "type": "module",
   "main": "src/index.js",

package/src/index.js

@@ -95,14 +95,7 @@ function generateDrawioUrl(data, type, options = {})
   params.set("border", border.toString());
   params.set("edit", edit);
 
-  let createHash = "#create=" + encodeURIComponent(JSON.stringify(createObj));
-
-  // Workaround for unsupported xml type
-  if (createObj.type === "xml")
-  {
-    createHash = "#R" + compressedData;
-  }
-
+  const createHash = "#create=" + encodeURIComponent(JSON.stringify(createObj));
   const paramsStr = params.toString();
 
   return DRAWIO_BASE_URL + (paramsStr ? "?" + paramsStr : "") + createHash;