@drawio/mcp 1.0.5 → 1.1.0

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.
Files changed (3) hide show
  1. package/README.md +5 -22
  2. package/package.json +1 -1
  3. package/src/claude-project-instructions.txt +71 -15
package/README.md CHANGED
@@ -289,31 +289,14 @@ An alternative approach is available that works **without installing the MCP ser
289
289
  The instructions teach Claude to:
290
290
  1. Generate diagram code (Mermaid, XML, or CSV)
291
291
  2. Execute Python code to compress and encode the diagram
292
- 3. Output a clickable URL that opens draw.io with your diagram
292
+ 3. The script outputs a complete HTML page with the URL embedded as a clickable button
293
+ 4. Claude presents the HTML as an artifact - the user clicks the button to open draw.io
293
294
 
294
- ### Token Usage Note
295
+ ### Why HTML Output?
295
296
 
296
- The current instructions tell Claude to output the URL as a clickable link for user convenience. This has two considerations:
297
+ The generated URL contains compressed base64 data. LLMs are known to silently corrupt base64 strings when reproducing them token by token - even a single changed character breaks the link completely.
297
298
 
298
- 1. **Token count**: The URL can be long (especially for complex diagrams), which consumes output tokens
299
- 2. **Character accuracy**: The URL contains base64-encoded data where even a single character change breaks the diagram. The instructions emphasize character-perfect accuracy, but if you experience issues with broken links, you can use the alternative ending below.
300
-
301
- ### Alternative: Reference Script Output Only
302
-
303
- If you prefer not to have Claude re-type the URL (to save tokens or avoid potential character substitution issues), replace the last section of the instructions with:
304
-
305
- ```
306
- ## CRITICAL: URL Output Rules
307
-
308
- **NEVER re-type, repeat, or copy the generated URL in your response.**
309
-
310
- After the Python script executes, simply tell the user:
311
- > "Click the URL in the code output above to open your diagram."
312
-
313
- Why: The URL contains base64-encoded data that can be corrupted when reproduced. The ONLY safe URL is the one printed directly by Python in the execution output.
314
- ```
315
-
316
- This approach requires users to click the URL in the code execution output rather than in Claude's response, but guarantees the URL is always correct.
299
+ By having the Python script output a complete HTML page with the link already embedded, the URL never passes through Claude's text generation. Claude simply presents the script output as an artifact, ensuring the link is always correct.
317
300
 
318
301
  ## Development
319
302
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drawio/mcp",
3
- "version": "1.0.5",
3
+ "version": "1.1.0",
4
4
  "description": "Official draw.io MCP server for LLMs - Open diagrams in draw.io editor",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
package/src/claude-project-instructions.txt CHANGED
@@ -25,7 +25,7 @@ Choose the optimal format for the task:
25
25
 
26
26
  ## URL Generation
27
27
 
28
- Execute this Python code to generate the draw.io URL:
28
+ Execute this Python code to generate the draw.io URL and output it as an HTML artifact:
29
29
 
30
30
  ```python
31
31
  import json, zlib, base64
@@ -36,15 +36,71 @@ diagram_type = "mermaid" # "mermaid", "xml", or "csv"
36
36
  diagram_code = """graph TD
37
37
  A[Start] --> B[End]"""
38
38
 
39
- # Generate compressed URL (raw deflate with 4KB window for memory efficiency)
39
+ # Generate compressed URL
40
40
  encoded = quote(diagram_code, safe='')
41
- c = zlib.compressobj(9, zlib.DEFLATED, -15) # -15 = raw deflate with 32KB window
41
+ c = zlib.compressobj(9, zlib.DEFLATED, -15)
42
42
  raw_deflate = c.compress(encoded.encode('utf-8')) + c.flush()
43
43
  data = base64.b64encode(raw_deflate).decode()
44
44
 
45
- payload = json.dumps({"type": diagram_type, "compressed": True, "data": data})
46
- url = f"https://app.diagrams.net/#create={quote(payload, safe='')}"
47
- print(url)
45
+ payload = json.dumps({"type": diagram_type, "compressed": true, "data": data})
46
+ url = f"https://app.diagrams.net/?pv=0&grid=0#create={quote(payload, safe='')}"
47
+
48
+ # Output as HTML page
49
+ print(f"""<!DOCTYPE html>
50
+ <html>
51
+ <head>
52
+ <meta charset="utf-8">
53
+ <style>
54
+ body {{
55
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
56
+ display: flex;
57
+ justify-content: center;
58
+ align-items: center;
59
+ min-height: 100vh;
60
+ margin: 0;
61
+ background: #f8f9fa;
62
+ }}
63
+ .card {{
64
+ text-align: center;
65
+ background: white;
66
+ border-radius: 12px;
67
+ padding: 40px;
68
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
69
+ }}
70
+ .card h2 {{
71
+ margin: 0 0 8px;
72
+ color: #1a1a1a;
73
+ }}
74
+ .card p {{
75
+ margin: 0 0 24px;
76
+ color: #666;
77
+ }}
78
+ .btn {{
79
+ display: inline-block;
80
+ padding: 14px 32px;
81
+ background: #4285f4;
82
+ color: white;
83
+ text-decoration: none;
84
+ border-radius: 8px;
85
+ font-size: 16px;
86
+ font-weight: 500;
87
+ transition: background 0.2s;
88
+ }}
89
+ .btn:hover {{
90
+ background: #3367d6;
91
+ }}
92
+ </style>
93
+ </head>
94
+ <body>
95
+ <div class="card">
96
+ <h2>Diagram Ready</h2>
97
+ <p>Click below to open your diagram in draw.io</p>
98
+ <a class="btn" href="{url}" target="_blank" rel="noopener noreferrer">
99
+ Open in draw.io
100
+ </a>
101
+ </div>
102
+ </body>
103
+ </html>""")
48
104
  ```
49
105
 
50
106
  ## Format Examples
@@ -87,18 +143,18 @@ CFO,CEO
87
143
  1. When a diagram is requested, determine the best format
88
144
  2. Generate the diagram code
89
145
  3. Execute the Python code to create the URL
90
- 4. Return the clickable URL to the user
146
+ 4. **Create an HTML artifact** from the script output – this is the clickable link for the user
91
147
 
92
148
  ## CRITICAL: URL Output Rules
93
149
 
94
- **ABSOLUTELY ZERO TOLERANCE: When outputting the URL, you MUST reproduce it with 100% character-perfect accuracy.**
150
+ **NEVER type, retype, or reproduce the generated URL in your chat response.**
95
151
 
96
- - The URL is a cryptographic hash - changing even ONE character destroys it completely
97
- - DO NOT "fix" or "correct" anything - if it looks wrong, it is still correct
98
- - DO NOT substitute any characters: no `i`↔`I`, no `k`↔`u`, no `0`↔`O`, no `l`↔`1`, NOTHING
99
- - Copy the URL byte-for-byte, character-for-character, exactly as printed by Python
100
- - If you are uncertain about any character, output it EXACTLY as shown - never guess
152
+ The URL contains compressed base64 data. Retyping it WILL corrupt it – even a single changed character breaks the link completely.
101
153
 
102
- **THE LINK WILL BE COMPLETELY BROKEN AND USELESS IF YOU CHANGE EVEN A SINGLE CHARACTER.**
154
+ Instead, follow this process:
155
+ 1. Execute the Python script
156
+ 2. The script outputs a complete HTML page with the correct link embedded
157
+ 3. Present the HTML output as an artifact (the link inside is guaranteed correct because it was generated by the script, not by you)
158
+ 4. In your chat message, simply tell the user to click the button in the artifact
103
159
 
104
- After executing the script, output the URL exactly as a clickable link for the user.
160
+ **DO NOT** copy the URL from the script output into your response text. The artifact IS the delivery mechanism for the link.