@drawio/mcp 1.0.2 → 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 uses its built-in Python analysis tool to:
|
|
323
|
-
1. Generate Mermaid/CSV/XML diagram code based on your request
|
|
324
|
-
2. Compress and encode the diagram data
|
|
325
|
-
3. Create a draw.io URL with the embedded diagram
|
|
326
|
-
4. Present the URL as a clickable link
|
|
327
|
-
|
|
328
|
-
### Example
|
|
329
|
-
|
|
330
|
-
**You:** Create a flowchart for a user login process
|
|
331
|
-
|
|
332
|
-
**Claude:** Here's your flowchart:
|
|
333
|
-
|
|
334
|
-
👉 [Open in draw.io](https://app.diagrams.net/?pv=0&grid=0#create=...)
|
|
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/)
|