Diagramly MCP Serverless

MCP无服务器示意图

基于Cloudflare Workers和TypeScript构建的模型上下文协议（MCP）服务器，支持流式HTTP传输协议。

特性

• 🚀 Cloudflare Workers上的无服务器架构
• 📡 最新MCP流式HTTP传输协议支持
• 🛠️ 可扩展工具框架
• 📝 可扩展的提示框架
• 🔧 TypeScript类型安全
• 🌐 CORS支持
• 💡 项目结构简单，易于扩展

项目结构

diagramly-mcp-serverless/
├── src/
│   ├── index.ts              # Main Worker entry point
│   ├── tools/
│   │   ├── index.ts          # Tools registry and manager
│   │   └── mermaid-to-image.ts # Mermaid diagram to image tool
│   └── prompts/
│       ├── index.ts          # Prompts registry and manager
│       └── mermaid-flowchart.ts # Mermaid flowchart prompt
├── package.json              # Project dependencies
├── tsconfig.json             # TypeScript configuration
├── wrangler.jsonc            # Cloudflare Worker configuration
└── README.md                 # Project documentation

快速开始

1.地方发展

npx wrangler dev

这将启动本地开发服务器，通常在 http://localhost:8787

2.部署到Cloudflare

npx wrangler deploy

4.类型检查

npm run type-check

API终点

• POST /mcp -MCP协议通信端点
• GET /health -健康检查端点
• OPTIONS /* -CORS飞行前请求处理

内置功能

工具

目前包括：

• 美人鱼形象：将美人鱼图转换为图像

- 参数： diagramCode （字符串）， imageType （可选：“png”|“svg”） - 功能：使用Kroki服务将Mermaid图代码转换为PNG或SVG图像

提示

目前包括：

• 美人鱼流程图：将内容转换为Mermaid流程图

- 参数： content （字符串） - 功能：生成提示，将用户内容转换为Mermaid流程图

扩展指南

添加新工具

1. 在中创建新的工具文件 src/tools/
2. 按照以下步骤定义您的工具 ToolDefinition 接口
3. 将其添加到 toolRegistry 在……里面 src/tools/index.ts

例子：

export const myNewTool: ToolDefinition = {
  name: "my-new-tool",
  description: "Description of what this tool does",
  inputSchema: {
    param1: z.string(),
    param2: z.number().optional()
  },
  handler: async ({ param1, param2 }) => {
    // Tool implementation logic
    return {
      content: [{
        type: "text",
        text: "Tool result"
      }]
    };
  }
};

添加新提示

1. 在中创建新的提示文件 src/prompts/
2. 根据以下内容定义提示 PromptDefinition 接口
3. 将其添加到 promptRegistry 在……里面 src/prompts/index.ts

例子：

export const myNewPrompt: PromptDefinition = {
  name: "my-new-prompt",
  config: {
    title: "My New Prompt",
    description: "Description of what this prompt does",
    argsSchema: { content: z.string() }
  },
  handler: ({ content }) => ({
    messages: [{
      role: "user",
      content: {
        type: "text",
        text: `Your prompt template here: ${content}`
      }
    }]
  })
};

依赖项

• @模型上下文协议/sdk：MCP框架核心
• 代理：MCP代理库
• 今天：Cloudflare Workers的Web框架
• 动物圈：数据验证库
• 西瓜：Mermaid图压缩库

许可证

MIT许可证