@drawio/mcp 1.0.6 → 1.1.1

package/README.md

@@ -1,6 +1,11 @@
-# Draw.io MCP Server
+# Draw.io MCP Tool Server
 
-The official [draw.io](https://www.draw.io) MCP (Model Context Protocol) server that enables LLMs to create and open diagrams in the draw.io editor.
+The official [draw.io](https://www.draw.io) MCP server that opens diagrams directly in the draw.io editor. Supports XML, CSV, and Mermaid.js formats with lightbox and dark mode options.
+
+This package is part of the [drawio-mcp](https://github.com/jgraph/drawio-mcp) repository, which also includes:
+
+- **[MCP App Server](https://github.com/jgraph/drawio-mcp/tree/main/mcp-app-server)** — Renders diagrams inline in AI chat interfaces. Hosted at `https://mcp.draw.io/mcp` — no install required.
+- **[Project Instructions](https://github.com/jgraph/drawio-mcp/tree/main/project-instructions)** — Zero-install approach using Claude Project instructions.
 
 ## Features
 
@@ -29,7 +34,7 @@ drawio-mcp
 
 ```bash
 git clone https://github.com/jgraph/drawio-mcp.git
-cd drawio-mcp
+cd drawio-mcp/mcp-tool-server
 npm install
 npm start
 ```
@@ -96,168 +101,12 @@ Opens the draw.io editor with a Mermaid.js diagram.
 
 ## Example Prompts
 
-Here are example prompts you can use with Claude to create diagrams.
-
-**Important:** Claude Desktop may have multiple ways to create diagrams (artifacts, browser control, MCP tools). To ensure Claude uses the draw.io MCP, explicitly mention the tool name in your prompt.
-
-You can also add a system instruction to your Claude Desktop project:
-> "Always use the draw.io MCP tools (open_drawio_mermaid, open_drawio_csv, open_drawio_xml) to create diagrams. Do not use browser control or artifacts."
-
-### Explicit MCP Tool Calls
-
-These prompts explicitly request the draw.io MCP tools:
-
-**Mermaid:**
-- "Use `open_drawio_mermaid` to create a flowchart for a user login process"
-- "Use the draw.io MCP tool `open_drawio_mermaid` to make a sequence diagram showing OAuth2 flow"
-- "Create a state diagram with `open_drawio_mermaid` for an order lifecycle"
-
-**CSV:**
-- "Use `open_drawio_csv` to create an org chart for our team: CEO -> CTO, CFO; CTO -> 3 Engineers"
-- "Use the draw.io MCP tool `open_drawio_csv` to generate a network topology diagram"
-- "Create a microservices architecture with `open_drawio_csv`"
-
-**XML:**
+- "Use `open_drawio_mermaid` to create a sequence diagram showing OAuth2 authentication flow"
+- "Use `open_drawio_csv` to create an org chart: CEO → CTO, CFO; CTO → 3 Engineers"
 - "Use `open_drawio_xml` to create a detailed AWS architecture diagram with VPC, subnets, and security groups"
-- "Use the draw.io MCP tool `open_drawio_xml` to create a floor plan with 3 offices and a conference room"
-- "Create a network rack diagram with `open_drawio_xml` showing servers, switches, and cabling"
-
-### Mermaid Diagrams
-
-**Flowcharts:**
-- "Create a flowchart showing a user login process with password validation and 2FA"
-- "Make a diagram of a CI/CD pipeline with build, test, and deploy stages"
-- "Draw a decision tree for troubleshooting network connectivity issues"
-
-**Sequence Diagrams:**
-- "Create a sequence diagram showing OAuth2 authentication flow"
-- "Make a sequence diagram of a REST API request/response cycle"
-- "Draw the interaction between a web browser, server, and database for a search query"
-
-**Class Diagrams:**
-- "Create a class diagram for a simple e-commerce system with Product, Order, and Customer classes"
-- "Make a UML class diagram showing inheritance for a vehicle hierarchy"
-
-**Other Mermaid Types:**
-- "Create an entity relationship diagram for a blog with users, posts, and comments"
-- "Make a state diagram for an order lifecycle (pending, confirmed, shipped, delivered)"
-- "Draw a Gantt chart for a 3-month software development project"
-
-### CSV Diagrams
-
-**Org Charts (generated from description):**
-- "Create an org chart for a tech startup with a CEO, CTO with 3 engineers, and CFO with 2 accountants"
-- "Make an organizational diagram for a hospital with departments: Emergency, Surgery, Pediatrics, each with a head doctor and 2 staff"
-- "Generate an org chart showing: John (CEO) manages Sarah (VP Sales) and Mike (VP Engineering). Sarah manages 2 sales reps, Mike manages 3 developers"
-
-**Network/Architecture Diagrams (generated from description):**
-- "Create a network diagram showing: Load Balancer connects to 3 Web Servers, each Web Server connects to a shared Database and Cache"
-- "Make an AWS architecture diagram with: Users -> CloudFront -> ALB -> 2 EC2 instances -> RDS"
-- "Generate a microservices diagram with API Gateway connecting to Auth, Users, Orders, and Payments services"
-
-**Process/Workflow Diagrams (generated from description):**
-- "Create a diagram showing our hiring process: Application -> HR Review -> Technical Interview -> Culture Fit -> Offer -> Onboarding"
-- "Make a diagram of a pizza order flow from customer order through kitchen stations to delivery"
-
-**From Existing Data:**
-- "Create a diagram from this CSV data showing project dependencies"
-- "Turn this spreadsheet of employees and managers into an org chart"
-
-### XML Diagrams
-
-**Complex Custom Diagrams:**
-- "Create a detailed AWS architecture diagram with VPC, subnets, EC2, and RDS"
-- "Make a custom floor plan layout with specific room dimensions"
-- "Draw a circuit diagram with specific component placements"
-
-**Importing Existing Diagrams:**
-- "Open this draw.io XML file and let me edit it"
-- "Load my existing diagram from this URL: https://example.com/diagram.xml"
-
-## Format Examples
-
-### Flowchart with Mermaid
-
-```text
-graph TD
-    A[Start] --> B{Decision}
-    B -->|Yes| C[Action 1]
-    B -->|No| D[Action 2]
-    C --> E[End]
-    D --> E
-```
-
-### Sequence Diagram with Mermaid
-
-```text
-sequenceDiagram
-    participant User
-    participant Server
-    participant Database
-
-    User->>Server: Login Request
-    Server->>Database: Validate Credentials
-    Database-->>Server: User Data
-    Server-->>User: JWT Token
-```
-
-### Org Chart with CSV
-
-```csv
-## Org Chart
-# label: %name%<br><i style="color:gray;">%title%</i>
-# style: rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;
-# connect: {"from":"manager","to":"name","invert":true,"style":"curved=1;endArrow=blockThin;endFill=1;"}
-# layout: auto
-# nodespacing: 40
-# levelspacing: 60
-name,title,manager
-Alice Johnson,CEO,
-Bob Smith,CTO,Alice Johnson
-Carol Williams,CFO,Alice Johnson
-Dave Brown,Lead Engineer,Bob Smith
-Eve Davis,Senior Engineer,Bob Smith
-Frank Miller,Accountant,Carol Williams
-```
-
-### Entity List with CSV
-
-```csv
-## Entity Diagram
-# label: %name%
-# style: shape=rectangle;rounded=1;whiteSpace=wrap;html=1;
-# connect: {"from":"connects_to","to":"name","style":"endArrow=classic;"}
-# layout: horizontalflow
-name,type,connects_to
-API Gateway,service,Auth Service
-Auth Service,service,User Database
-User Database,database,
-API Gateway,service,Product Service
-Product Service,service,Product Database
-Product Database,database,
-```
 
-### Native XML
-
-```xml
-<mxGraphModel>
-  <root>
-    <mxCell id="0"/>
-    <mxCell id="1" parent="0"/>
-    <mxCell id="2" value="Hello World" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;"
-            vertex="1" parent="1">
-      <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
-    </mxCell>
-    <mxCell id="3" value="Another Box" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
-            vertex="1" parent="1">
-      <mxGeometry x="280" y="100" width="120" height="60" as="geometry"/>
-    </mxCell>
-    <mxCell id="4" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
-      <mxGeometry relative="1" as="geometry"/>
-    </mxCell>
-  </root>
-</mxGraphModel>
-```
+> **Tip:** Claude Desktop may have multiple ways to create diagrams. To ensure it uses the draw.io MCP, mention the tool name explicitly or add a system instruction:
+> *"Always use the draw.io MCP tools to create diagrams."*
 
 ## How It Works
 
@@ -267,69 +116,9 @@ Product Database,database,
 4. The URL is returned to the LLM, which can present it to the user
 5. Opening the URL loads draw.io with the diagram ready to view/edit
 
-## Alternative: Project Instructions (No MCP Required)
-
-An alternative approach is available that works **without installing the MCP server**. Instead of using MCP tools, you add instructions to a Claude Project that teach Claude to generate draw.io URLs using Python code execution.
-
-### Advantages
-
-- **No installation required** - works immediately in Claude.ai
-- **No desktop app needed** - works entirely in the browser
-- **Easy to use** - just add instructions to your Claude Project
-- **Privacy-friendly** - the generated URL uses a hash fragment (`#create=...`), which stays in the browser and is never sent to any server
-
-### How to Install
-
-1. Open your Claude Project settings
-2. Add the contents of [`src/claude-project-instructions.txt`](src/claude-project-instructions.txt) to your project instructions
-3. Ask Claude to create diagrams - it will generate clickable draw.io URLs
-
-### How It Works
-
-The instructions teach Claude to:
-1. Generate diagram code (Mermaid, XML, or CSV)
-2. Execute Python code to compress and encode the diagram
-3. Output a clickable URL that opens draw.io with your diagram
-
-### Token Usage Note
-
-The current instructions tell Claude to output the URL as a clickable link for user convenience. This has two considerations:
-
-1. **Token count**: The URL can be long (especially for complex diagrams), which consumes output tokens
-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.
-
-### Alternative: Reference Script Output Only
-
-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:
-
-```
-## CRITICAL: URL Output Rules
-
-**NEVER re-type, repeat, or copy the generated URL in your response.**
-
-After the Python script executes, simply tell the user:
-> "Click the URL in the code output above to open your diagram."
-
-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.
-```
-
-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.
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Run the server
-npm start
-```
-
 ## Related Resources
 
 - [draw.io](https://www.draw.io) - Free online diagram editor
 - [draw.io Desktop](https://github.com/jgraph/drawio-desktop) - Desktop application
-- [@drawio/mcp on npm](https://www.npmjs.com/package/@drawio/mcp) - This package on npm
-- [drawio-mcp on GitHub](https://github.com/jgraph/drawio-mcp) - Source code repository
-- [Mermaid.js Documentation](https://mermaid.js.org/intro/)
+- [drawio-mcp on GitHub](https://github.com/jgraph/drawio-mcp) - Full repository with all three approaches
 - [MCP Specification](https://modelcontextprotocol.io/)

package/package.json

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

package/src/claude-project-instructions.txt

@@ -1,104 +0,0 @@
-# Draw.io Diagram Generation
-
-When the user requests any visual diagram, use draw.io to create it.
-
-## Supported Diagrams
-
-Draw.io supports virtually any diagram type:
-- **Standard**: Flowcharts, org charts, mind maps, timelines, Venn diagrams
-- **Software**: UML (class, sequence, activity, use case), ERD, architecture diagrams
-- **Cloud/Infrastructure**: AWS, Azure, GCP, Kubernetes, network topology
-- **Engineering**: Electrical circuits, digital logic, P&ID, floor plans
-- **Business**: BPMN, value streams, customer journeys, SWOT
-- **UI/UX**: Wireframes, mockups, sitemaps
-- **And more**: Infographics, data flows, decision trees, etc.
-
-## Format Selection
-
-Choose the optimal format for the task:
-
-| Format | Best For |
-|--------|----------|
-| **Mermaid** | Flowcharts, sequences, ERD, Gantt, state diagrams, class diagrams |
-| **CSV** | Hierarchical data (org charts), bulk import from spreadsheets |
-| **XML** | Complex layouts, precise positioning, custom styling, icons, shapes |
-
-## URL Generation
-
-Execute this Python code to generate the draw.io URL:
-
-```python
-import json, zlib, base64
-from urllib.parse import quote
-
-# Set these variables:
-diagram_type = "mermaid"  # "mermaid", "xml", or "csv"
-diagram_code = """graph TD
-    A[Start] --> B[End]"""
-
-# Generate compressed URL (raw deflate with 4KB window for memory efficiency)
-encoded = quote(diagram_code, safe='')
-c = zlib.compressobj(9, zlib.DEFLATED, -15)  # -15 = raw deflate with 32KB window
-raw_deflate = c.compress(encoded.encode('utf-8')) + c.flush()
-data = base64.b64encode(raw_deflate).decode()
-
-payload = json.dumps({"type": diagram_type, "compressed": True, "data": data})
-url = f"https://app.diagrams.net/?pv=0&grid=0#create={quote(payload, safe='')}"
-print(url)
-```
-
-## Format Examples
-
-### Mermaid
-```
-graph TD
-    A[Start] --> B{Decision}
-    B -->|Yes| C[Action]
-    B -->|No| D[End]
-```
-
-### XML (draw.io native)
-```xml
-<mxGraphModel>
-  <root>
-    <mxCell id="0"/>
-    <mxCell id="1" parent="0"/>
-    <mxCell id="2" value="Box" style="rounded=1;fillColor=#d5e8d4;" vertex="1" parent="1">
-      <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
-    </mxCell>
-  </root>
-</mxGraphModel>
-```
-
-### CSV (hierarchical data)
-```
-# label: %name%
-# style: rounded=1;whiteSpace=wrap;html=1;
-# connect: {"from":"manager","to":"name","invert":true}
-# layout: auto
-name,manager
-CEO,
-CTO,CEO
-CFO,CEO
-```
-
-## Instructions
-
-1. When a diagram is requested, determine the best format
-2. Generate the diagram code
-3. Execute the Python code to create the URL
-4. Return the clickable URL to the user
-
-## CRITICAL: URL Output Rules
-
-**ABSOLUTELY ZERO TOLERANCE: When outputting the URL, you MUST reproduce it with 100% character-perfect accuracy.**
-
-- The URL is a cryptographic hash - changing even ONE character destroys it completely
-- DO NOT "fix" or "correct" anything - if it looks wrong, it is still correct
-- DO NOT substitute any characters: no `i`↔`I`, no `k`↔`u`, no `0`↔`O`, no `l`↔`1`, NOTHING
-- Copy the URL byte-for-byte, character-for-character, exactly as printed by Python
-- If you are uncertain about any character, output it EXACTLY as shown - never guess
-
-**THE LINK WILL BE COMPLETELY BROKEN AND USELESS IF YOU CHANGE EVEN A SINGLE CHARACTER.**
-
-After executing the script, output the URL exactly as a clickable link for the user.