@drawio/mcp 1.1.0 → 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,52 +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. The script outputs a complete HTML page with the URL embedded as a clickable button
-4. Claude presents the HTML as an artifact - the user clicks the button to open draw.io
-
-### Why HTML Output?
-
-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.
-
-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.
-
-## 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.1.0",
+  "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,160 +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 and output it as an HTML artifact:
-
-```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
-encoded = quote(diagram_code, safe='')
-c = zlib.compressobj(9, zlib.DEFLATED, -15)
-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='')}"
-
-# Output as HTML page
-print(f"""<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<style>
-  body {{
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    margin: 0;
-    background: #f8f9fa;
-  }}
-  .card {{
-    text-align: center;
-    background: white;
-    border-radius: 12px;
-    padding: 40px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  }}
-  .card h2 {{
-    margin: 0 0 8px;
-    color: #1a1a1a;
-  }}
-  .card p {{
-    margin: 0 0 24px;
-    color: #666;
-  }}
-  .btn {{
-    display: inline-block;
-    padding: 14px 32px;
-    background: #4285f4;
-    color: white;
-    text-decoration: none;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 500;
-    transition: background 0.2s;
-  }}
-  .btn:hover {{
-    background: #3367d6;
-  }}
-</style>
-</head>
-<body>
-  <div class="card">
-    <h2>Diagram Ready</h2>
-    <p>Click below to open your diagram in draw.io</p>
-    <a class="btn" href="{url}" target="_blank" rel="noopener noreferrer">
-      Open in draw.io
-    </a>
-  </div>
-</body>
-</html>""")
-```
-
-## 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. **Create an HTML artifact** from the script output – this is the clickable link for the user
-
-## CRITICAL: URL Output Rules
-
-**NEVER type, retype, or reproduce the generated URL in your chat response.**
-
-The URL contains compressed base64 data. Retyping it WILL corrupt it – even a single changed character breaks the link completely.
-
-Instead, follow this process:
-1. Execute the Python script
-2. The script outputs a complete HTML page with the correct link embedded
-3. Present the HTML output as an artifact (the link inside is guaranteed correct because it was generated by the script, not by you)
-4. In your chat message, simply tell the user to click the button in the artifact
-
-**DO NOT** copy the URL from the script output into your response text. The artifact IS the delivery mechanism for the link.