@drawio/mcp 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -59
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,27 +10,7 @@ The official [draw.io](https://www.draw.io) MCP (Model Context Protocol) server
|
|
|
10
10
|
- **URL support**: Fetch content from URLs automatically
|
|
11
11
|
- **Customizable display**: Lightbox mode, dark mode, and more
|
|
12
12
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
### Option 1: MCP Server (Claude Desktop)
|
|
16
|
-
|
|
17
|
-
Install and configure the MCP server for Claude Desktop. The server runs locally and can automatically open diagrams in your browser.
|
|
18
|
-
|
|
19
|
-
### Option 2: Project Instructions (No MCP)
|
|
20
|
-
|
|
21
|
-
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.
|
|
22
|
-
|
|
23
|
-
| Feature | MCP Server | Project Instructions |
|
|
24
|
-
|---------|------------|----------------------|
|
|
25
|
-
| Platform | Claude Desktop | Claude.ai & Claude Desktop |
|
|
26
|
-
| Installation | Required | None |
|
|
27
|
-
| System access | Opens browser automatically | No system access |
|
|
28
|
-
| Link verification | Automatic | User can inspect link before clicking |
|
|
29
|
-
| Complexity | More setup | Just paste instructions |
|
|
30
|
-
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
## MCP Server Installation
|
|
13
|
+
## Installation
|
|
34
14
|
|
|
35
15
|
### Using npx (recommended)
|
|
36
16
|
|
|
@@ -287,6 +267,10 @@ Product Database,database,
|
|
|
287
267
|
4. The URL is returned to the LLM, which can present it to the user
|
|
288
268
|
5. Opening the URL loads draw.io with the diagram ready to view/edit
|
|
289
269
|
|
|
270
|
+
## Alternative: Project Instructions (Experimental)
|
|
271
|
+
|
|
272
|
+
For an alternative approach that works without installing the MCP server, see the [Project Instructions discussion](https://github.com/jgraph/drawio-mcp/discussions/1). This approach uses Claude's Python sandbox to generate draw.io URLs, but has limitations due to a zlib compression bug.
|
|
273
|
+
|
|
290
274
|
## Development
|
|
291
275
|
|
|
292
276
|
```bash
|
|
@@ -297,47 +281,11 @@ npm install
|
|
|
297
281
|
npm start
|
|
298
282
|
```
|
|
299
283
|
|
|
300
|
-
---
|
|
301
|
-
|
|
302
|
-
## Using Project Instructions (No MCP)
|
|
303
|
-
|
|
304
|
-
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.
|
|
305
|
-
|
|
306
|
-
**Advantages:**
|
|
307
|
-
|
|
308
|
-
- **No installation** - Just paste instructions into a project
|
|
309
|
-
- **Works everywhere** - Claude.ai and Claude Desktop
|
|
310
|
-
- **No system access** - Claude generates a link without accessing your computer
|
|
311
|
-
- **Transparent** - You can inspect the generated URL before clicking
|
|
312
|
-
- **Verifiable** - The link visibly points to `app.diagrams.net`
|
|
313
|
-
|
|
314
|
-
### Setup
|
|
315
|
-
|
|
316
|
-
1. Create a new Project in Claude.ai or Claude Desktop
|
|
317
|
-
2. In Project Settings, paste the contents of [`claude-project-instructions.txt`](./claude-project-instructions.txt) into the custom instructions
|
|
318
|
-
3. Start a conversation and ask Claude to create diagrams
|
|
319
|
-
|
|
320
|
-
### How It Works
|
|
321
|
-
|
|
322
|
-
Claude creates an **HTML artifact** that:
|
|
323
|
-
1. Generates Mermaid/CSV/XML diagram code based on your request
|
|
324
|
-
2. Compresses the diagram data using pako.js (loaded from CDN)
|
|
325
|
-
3. Shows a button to open draw.io with the diagram in lightbox mode
|
|
326
|
-
4. In draw.io, hover to see the "Edit" button to open the full editor
|
|
327
|
-
|
|
328
|
-
**Note:** The artifact uses draw.io's lightbox mode (`lightbox=1&dark=auto&border=10&edit=_blank`).
|
|
329
|
-
|
|
330
|
-
### Example
|
|
331
|
-
|
|
332
|
-
**You:** Create a flowchart for a user login process
|
|
333
|
-
|
|
334
|
-
**Claude:** *Creates an HTML artifact with an "Open in draw.io" button*
|
|
335
|
-
|
|
336
|
-
---
|
|
337
|
-
|
|
338
284
|
## Related Resources
|
|
339
285
|
|
|
340
286
|
- [draw.io](https://www.draw.io) - Free online diagram editor
|
|
341
287
|
- [draw.io Desktop](https://github.com/jgraph/drawio-desktop) - Desktop application
|
|
288
|
+
- [@drawio/mcp on npm](https://www.npmjs.com/package/@drawio/mcp) - This package on npm
|
|
289
|
+
- [drawio-mcp on GitHub](https://github.com/jgraph/drawio-mcp) - Source code repository
|
|
342
290
|
- [Mermaid.js Documentation](https://mermaid.js.org/intro/)
|
|
343
291
|
- [MCP Specification](https://modelcontextprotocol.io/)
|