ai-diagrams-mcp 1.0.1 → 1.0.2

package/README.md

@@ -10,11 +10,35 @@ An MCP (Model Context Protocol) server that renders Mermaid diagrams to an inter
 - **Light/Dark Mode** - Automatic system preference detection with manual toggle
 - **Cross-Platform** - Works on macOS, Linux, and Windows
 
-## Installation
+## Quick Start
 
-### Option 1: Use with npx (recommended)
+```bash
+npx -y ai-diagrams-mcp
+```
+
+Or install globally:
+
+```bash
+npm install -g ai-diagrams-mcp
+```
 
-No installation needed. Configure your MCP client to use:
+## Configuration by AI Tool
+
+<table>
+<tr>
+<th>Tool</th>
+<th>Config File</th>
+<th>Configuration</th>
+</tr>
+
+<tr>
+<td><strong>Claude Code</strong></td>
+<td>
+
+`~/.claude.json` or project `.mcp.json`
+
+</td>
+<td>
 
 ```json
 {
@@ -27,27 +51,90 @@ No installation needed. Configure your MCP client to use:
 }
 ```
 
-### Option 2: Global install
+Or via CLI: `claude mcp add ai-diagrams -- npx -y ai-diagrams-mcp`
 
-```bash
-npm install -g ai-diagrams-mcp
+</td>
+</tr>
+
+<tr>
+<td><strong>Claude Desktop</strong></td>
+<td>
+
+macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
+
+Windows: `%APPDATA%\Claude\claude_desktop_config.json`
+
+</td>
+<td>
+
+```json
+{
+  "mcpServers": {
+    "ai-diagrams": {
+      "command": "npx",
+      "args": ["-y", "ai-diagrams-mcp"]
+    }
+  }
+}
 ```
 
-Then configure:
+</td>
+</tr>
+
+<tr>
+<td><strong>Cursor</strong></td>
+<td>
+
+`~/.cursor/mcp.json` or Settings → Features → MCP
+
+</td>
+<td>
 
 ```json
 {
   "mcpServers": {
     "ai-diagrams": {
-      "command": "ai-diagrams-mcp"
+      "command": "npx",
+      "args": ["-y", "ai-diagrams-mcp"]
+    }
+  }
+}
+```
+
+</td>
+</tr>
+
+<tr>
+<td><strong>VS Code (Copilot)</strong></td>
+<td>
+
+`.vscode/mcp.json` in workspace or via Command Palette: `MCP: Add Server`
+
+</td>
+<td>
+
+```json
+{
+  "servers": {
+    "ai-diagrams": {
+      "command": "npx",
+      "args": ["-y", "ai-diagrams-mcp"]
     }
   }
 }
 ```
 
-## Configuration for Claude Code
+</td>
+</tr>
+
+<tr>
+<td><strong>Cline</strong></td>
+<td>
 
-Add to your Claude Code MCP settings (`~/.claude/claude_desktop_config.json` or project `.mcp.json`):
+Click MCP Servers icon → Configure → Edit MCP Settings
+
+</td>
+<td>
 
 ```json
 {
@@ -60,9 +147,105 @@ Add to your Claude Code MCP settings (`~/.claude/claude_desktop_config.json` or
 }
 ```
 
+</td>
+</tr>
+
+<tr>
+<td><strong>Windsurf</strong></td>
+<td>
+
+`~/.codeium/windsurf/mcp_config.json`
+
+</td>
+<td>
+
+```json
+{
+  "mcpServers": {
+    "ai-diagrams": {
+      "command": "npx",
+      "args": ["-y", "ai-diagrams-mcp"]
+    }
+  }
+}
+```
+
+</td>
+</tr>
+
+<tr>
+<td><strong>Zed</strong></td>
+<td>
+
+Settings → Open Settings (JSON)
+
+</td>
+<td>
+
+```json
+{
+  "context_servers": {
+    "ai-diagrams": {
+      "command": {
+        "path": "npx",
+        "args": ["-y", "ai-diagrams-mcp"]
+      }
+    }
+  }
+}
+```
+
+</td>
+</tr>
+
+<tr>
+<td><strong>OpenAI Codex CLI</strong></td>
+<td>
+
+`~/.codex/config.toml`
+
+</td>
+<td>
+
+```toml
+[mcp_servers.ai-diagrams]
+command = "npx"
+args = ["-y", "ai-diagrams-mcp"]
+```
+
+Or via CLI: `codex mcp add ai-diagrams -- npx -y ai-diagrams-mcp`
+
+</td>
+</tr>
+
+<tr>
+<td><strong>JetBrains IDEs</strong></td>
+<td>
+
+Settings → Tools → MCP Server
+
+</td>
+<td>
+
+```json
+{
+  "mcpServers": {
+    "ai-diagrams": {
+      "command": "npx",
+      "args": ["-y", "ai-diagrams-mcp"]
+    }
+  }
+}
+```
+
+</td>
+</tr>
+
+</table>
+
 ## Usage
 
-Once configured, you can ask Claude to render diagrams:
+Once configured, ask your AI assistant to render diagrams:
 
 > "Create a flowchart showing the user authentication process"
 
@@ -90,6 +273,24 @@ The `render_diagram` tool accepts:
 }
 ```
 
+## Supported Diagram Types
+
+Mermaid supports many diagram types including:
+
+- Flowcharts
+- Sequence Diagrams
+- Class Diagrams
+- State Diagrams
+- Entity Relationship Diagrams
+- Gantt Charts
+- Pie Charts
+- Mind Maps
+- Timeline
+- Git Graphs
+- Quadrant Charts
+
+See [Mermaid documentation](https://mermaid.js.org/intro/) for full syntax reference.
+
 ## Viewer Features
 
 - **Zoom Controls** - Use +/- buttons or pinch gesture on trackpad
@@ -122,6 +323,12 @@ npm start
 - **Zoom/Pan**: @panzoom/panzoom
 - **MCP SDK**: @modelcontextprotocol/sdk
 
+## Resources
+
+- [Model Context Protocol](https://modelcontextprotocol.io/) - MCP specification
+- [Mermaid.js](https://mermaid.js.org/) - Diagram syntax documentation
+- [MCP Servers Directory](https://github.com/modelcontextprotocol/servers) - Community MCP servers
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-diagrams-mcp",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "MCP server for rendering Mermaid diagrams with interactive zoom/pan viewer",
   "type": "module",
   "main": "./dist/index.js",