git clone <repo-url> drawio-mcp
cd drawio-mcp
npm install
npm run build

{
  "mcpServers": {
    "drawio-uml": {
      "command": "node",
      "args": ["D:\\path\\to\\drawio-mcp\\dist\\index.js"]
    }
  }
}

{
  "mcpServers": {
    "drawio-uml": {
      "command": "node",
      "args": ["D:\\path\\to\\drawio-mcp\\dist\\index.js"]
    }
  }
}

{
  "mcpServers": {
    "drawio-uml": {
      "command": "node",
      "args": ["D:\\path\\to\\drawio-mcp\\dist\\index.js"]
    }
  }
}

{
  "mcpServers": {
    "drawio-uml": {
      "command": "node",
      "args": ["/absolute/path/to/drawio-mcp/dist/index.js"]
    }
  }
}

1. draw_activity_diagram(...)  → sinh file
2. read_diagram_file({ file_path: "activity-diagram-xxx.drawio" })  → xem cell IDs
3. update_diagram_file({
     file_path: "activity-diagram-xxx.drawio",
     operations: [
       { type: "move_by", cellId: "4", dx: 50, dy: 0 },
       { type: "relabel", cellId: "4", value: "New Label" },
     ]
   })  → sửa file, không cần tạo mới

Vẽ class diagram cho hệ thống quản lý thư viện:

- class Book: attributes = [id, title, author, isbn], methods = [borrow(), return()]
- class Member: attributes = [id, name, email], methods = [borrowBook(), returnBook()]
- class Librarian extends Member: attributes = [employeeId]
- class BorrowRecord: attributes = [id, borrowDate, dueDate]
- class Library: attributes = [name, address]

Relationships:
- Librarian → Member (inheritance)
- BorrowRecord → Member (association, "borrowed by")
- BorrowRecord → Book (association, "contains")
- Library → Book (aggregation, "has")

Vẽ use case diagram cho hệ thống ATM:

System name: "ATM System"

Actors:
- Customer (mô tả: người dùng ATM)
- Bank Admin (mô tả: quản trị viên ngân hàng)

Use cases:
- "Withdraw Cash" (id: uc1)
- "Deposit Cash" (id: uc2)
- "Transfer Funds" (id: uc3)
- "Check Balance" (id: uc4)
- "Change PIN" (id: uc5)
- "Manage Users" (id: uc6)

Associations:
- Customer → uc1
- Customer → uc2
- Customer → uc3
- Customer → uc4
- Customer → uc5
- Bank Admin → uc6

Relationships:
- uc3 → uc2 (include)  — Transfer cần Deposit để có tiền
- uc5 → uc4 (extend)   — Change PIN có thể cần Check Balance

System boundary: "ATM System" bao gồm tất cả use cases

Vẽ activity diagram cho quy trình đặt hàng online:

Start node: s1
Action nodes:
- login (label: "Log in")
- browse (label: "Browse products")
- cart (label: "Add to cart")
- checkout (label: "Proceed to checkout")
- payment (label: "Process payment")
- confirm (label: "Send confirmation")
- cancel (label: "Cancel order")
- redirect (label: "Redirect to payment gateway")
- verify (label: "Verify payment")

End nodes: e1, e2

Decision nodes:
- d1 (label: "Continue shopping?")
- d2 (label: "Payment successful?")

Flows:
- s1 → login
- login → browse
- browse → cart
- cart → d1
- d1 → checkout (label: "Yes")
- d1 → browse (label: "No")             # backward edge (loop)
- checkout → redirect
- redirect → payment
- payment → d2
- d2 → verify (label: "Yes")
- d2 → payment (label: "No")            # backward edge (loop)
- verify → confirm
- confirm → e1
- checkout → cancel (label: "Cancel")
- cancel → e2

Swimlanes: (tùy chọn — bỏ nếu không cần)
- "Customer" gồm: [s1, login, browse, cart, d1, checkout, cancel]
- "System" gồm: [redirect, payment, d2, verify]
- "Email Service" gồm: [confirm]

Vẽ sequence diagram cho quy trình rút tiền ATM:

Title: "ATM Transaction"

Participants:
- "User" (type: actor)
- "Cây ATM" (type: boundary)
- "Server Ngân Hàng" (type: entity)

Messages:
# ── Authentication ──
- User → Cây ATM: Nhập thẻ (asynchronous, order: 1)
- Cây ATM → User: Yêu cầu mã PIN (asynchronous, order: 2)
- User → Cây ATM: Nhập mã PIN (asynchronous, order: 3)
- Cây ATM → Server Ngân Hàng: Kiểm tra mã PIN (synchronous, order: 4)
- Server Ngân Hàng → Cây ATM: Xác nhận mã PIN (return, order: 5)

# ── Menu ──
- Cây ATM → User: Hiển thị danh sách lựa chọn (asynchronous, order: 6)
- User → Cây ATM: Nhập lựa chọn (asynchronous, order: 7)

# ── Alt: Kiểm tra số dư / Rút tiền / Huỷ ──
# (gán fragment cho mọi message trong block)
- Cây ATM → Server Ngân Hàng: Lấy số dư (synchronous, order: 8)         # fragment: alt, condition: "Kiểm tra số dư / Rút tiền / Huỷ", fromOrder: 8, toOrder: 20
- Server Ngân Hàng → Cây ATM: Trả về số dư (return, order: 9)
- Cây ATM → User: Hiển thị số dư (asynchronous, order: 10)
- Cây ATM → User: Yêu cầu nhập số tiền (asynchronous, order: 11)
- User → Cây ATM: Nhập số tiền (asynchronous, order: 12)
- Cây ATM → Server Ngân Hàng: Kiểm tra số dư (synchronous, order: 13)
- Server Ngân Hàng → Cây ATM: Trả về số dư (return, order: 14)

# ── Nested Alt: Số dư > Số tiền / Số dư < Số tiền ──
- Cây ATM → Server Ngân Hàng: Cập nhật số dư (synchronous, order: 15)   # fragment: alt, condition: "Đủ tiền / Không đủ", fromOrder: 15, toOrder: 19
- Server Ngân Hàng → Cây ATM: Số dư đã được cập nhật (return, order: 16)
- Cây ATM → User: Thông báo "Hãy nhận tiền" (asynchronous, order: 17)
- User → Cây ATM: Nhận tiền (asynchronous, order: 18)
- Cây ATM → User: Thông báo "Số dư không đủ" (asynchronous, order: 19)

# ── Huỷ ──
- Cây ATM → User: Thông báo "Huỷ giao dịch" (asynchronous, order: 20)

# ── Final ──
- Cây ATM → User: In hóa đơn (asynchronous, order: 21)
- Cây ATM → User: Trả thẻ (asynchronous, order: 22)
- User → Cây ATM: Nhận lại thẻ (asynchronous, order: 23)
- Cây ATM → User: Hiển thị cảm ơn (asynchronous, order: 24)

npm run dev        # Chạy MCP server với tsx (hot reload)
npm run test       # Chạy unit tests
npm run build      # Build TypeScript → dist/
npm run inspect    # Test với MCP Inspector

src/
├── index.ts                    # Entry point MCP server (stdio)
├── types/                      # Zod schemas + TypeScript interfaces
│   ├── class-diagram.ts
│   ├── usecase-diagram.ts
│   ├── activity-diagram.ts
│   └── sequence-diagram.ts
├── builders/                   # Sinh mxGraph XML cells
│   ├── base-builder.ts         # Abstract class (ID, addVertex, addEdge, serialize)
│   ├── class-builder.ts
│   ├── usecase-builder.ts
│   ├── activity-builder.ts
│   └── sequence-builder.ts
├── tools/                      # MCP tool definitions
│   ├── class-diagram.ts
│   ├── usecase-diagram.ts
│   ├── activity-diagram.ts
│   └── sequence-diagram.ts
└── utils/
    ├── diagram-writer.ts       # Ghi file .drawio
    ├── compression.ts          # Deflate + base64
    ├── layout.ts               # Grid layout helpers
    └── styles.ts               # draw.io mxGraph styles