Composer

本地服务

usecomposer.com开发工具429 周前更新

代码仓库访问官网

关于 Composer

Composer 是面向编码 Agent 的可视化架构设计工具，可通过 IDE 创建和修改交互式图表。变更会显示在实时画布上，并提供代码库导入和图表检查工具。

主要功能

01创建和选择图表
02读取和搜索图表结构
03添加和更新节点及连线
04定义 API 并关联源码路径
05检查图表并导入代码库

适用场景

01根据代码库构建架构图
02更新设计中的服务和连接
03将图表节点关联到源文件
04检查图表中的缺失端点或孤立节点

MCP 相关

MCP 服务向编码 Agent 提供 Composer 图表工具，并连接 Composer API。它支持远程 HTTP 连接和 stdio，并通过 OAuth 2.1 授权。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "composer": {
      "command": "npx",
      "args": [
        "-y",
        "@usecomposer/mcp"
      ]
    }
  }
}

启动命令npx -y @usecomposer/mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@usecomposer/mcp0.1.7stdio

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

Composer 演示

Composer 徽标 Composer MCP Server

为你的 AI 编码 Agent 提供架构画布。
直接在 IDE 中设计、可视化并演进软件架构图。

Composer 是一款可视化系统设计工具，可让 AI 编码 Agent 通过 MCP（Model Context Protocol）创建和修改交互式架构图。你的 Agent 可以使用工具来添加服务、数据库、队列和连接；你则可以在 usecomposer.com 上查看实时更新的画布。

Your IDE  <-->  MCP Server (this package)  <-->  Composer API  <-->  Your Diagram

快速开始

连接 IDE

Claude Code：

claude mcp add --transport http composer https://mcp.usecomposer.com

Cursor — 在项目根目录中创建 .cursor/mcp.json：

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

首次使用时，浏览器会打开以进行授权。

Claude Code

claude mcp add --transport http composer https://mcp.usecomposer.com

Cursor

在项目根目录中创建 .cursor/mcp.json：

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

Codex

codex mcp add composer -- npx -y @usecomposer/mcp --stdio

VS Code (Copilot Chat)

在项目根目录中创建 .vscode/mcp.json：

{
  "servers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

VS Code (Cline)

打开 Cline 侧边栏 > Settings（齿轮图标）> MCP Servers > Add Remote Server：

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

VS Code (Continue)

添加到 .continue/config.yaml：

mcpServers:
  - name: composer
    url: https://mcp.usecomposer.com

Windsurf

添加到 ~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "composer": {
      "serverUrl": "https://mcp.usecomposer.com"
    }
  }
}

注意： Windsurf 使用 "serverUrl"，而不是 "url"。

OpenCode

在项目根目录中创建 opencode.json：

{
  "mcp": {
    "composer": {
      "type": "remote",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

工具

图表管理

工具	描述
`list_diagrams`	列出所有图表。首先调用此工具，确定要处理哪个图表
`create_diagram`	创建新图表，并为当前会话自动选中
`select_diagram`	为当前会话选择要处理的图表
`rename_diagram`	重命名当前选中的图表

注意： 使用其他工具前，先调用 list_diagrams，然后调用 select_diagram（或 create_diagram）。

读取

工具	描述
`get_graph`	获取完整的架构图，包括所有节点和边
`get_node`	获取单个节点的详细信息，包括相连的边
`search_graph`	按关键词搜索节点和边
`get_screenshot`	获取最近一次自动保存的图表 PNG 缩略图

写入

工具	描述
`upsert_node`	创建或更新节点（服务、数据库、队列等）
`upsert_edge`	创建或更新两个节点之间的连接
`define_api`	为后端服务节点定义 API 端点
`delete_element`	从图表中删除节点或边
`link_path`	将节点链接到代码库中的文件或文件夹

规划与验证

工具	描述
`verify_diagram`	检查是否存在缺少端点或孤立节点等问题
`plan_import`	导入现有代码库的分步工作流
`get_guide`	节点类型、协议和最佳实践参考指南

节点类型

client · frontend · backend · database · cache · queue · storage · external

边协议

REST · gRPC · GraphQL · WebSocket · TCP · UDP · async · event · internal

示例提示词

连接后，可以尝试向你的 AI agent 提问：

提示词	功能
"将此代码库导入 Composer"	扫描你的代码仓库并构建架构图
"创建一个名为 Backend Architecture 的 Composer 新图表"	创建并自动选中新图表
"在 Composer 中的 API 和数据库之间添加一个 Redis 缓存"	向图表中添加新节点和边
"向 Composer 图表添加分析监控"	添加可观测性节点及其连接
"更新我在 Composer 中定义的 API"	刷新后端节点上的端点定义
"验证我的 Composer 图表"	检查缺少的端点、孤立节点等
"将每个 Composer 节点关联到其源代码"	将图表节点与文件路径关联起来

工作原理

身份验证通过 OAuth 2.1 处理 — 浏览器会打开一次性授权流程，完成后即可连接。工具调用会代理到 mcp.usecomposer.com 上的 Composer API。图表数据存储在 Composer 的服务器上。MCP 服务本身是无状态的。

通过 MCP 所做的更改会通过实时 WebSocket 同步立即显示在 Composer 画布上。

开发

git clone https://github.com/olivergrabner/composer-mcp
cd composer-mcp
npm install
npm run dev        # Watch mode (rebuilds on change)
npm run build      # Production build

链接

Composer - 可视化架构画布
MCP Protocol - Model Context Protocol 规范
Issues - 错误报告和功能请求

许可证

MIT

支持 Markdown

登录后评论

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

阅读入门指南

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。