AI导哈

架构设计工具

Composer是一款可视化系统设计工具，允许AI编码代理通过MCP协议创建和修改交互式架构图，适用于软件架构设计和实时协作。

  • by OliverGrabner
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 OliverGrabner/composer-mcp

使用说明

Composer MCP Server

Give your AI coding agent an architecture canvas.
Design, visualize, and evolve software architecture diagrams - right from your IDE.

作曲家 是一个可视化系统设计工具，允许AI编码代理通过以下方式创建和修改交互式架构图 MCP（模型上下文协议）。您的代理将获得添加服务、数据库、队列和连接的工具，您将在以下位置获得实时画布 usecomposer.com 实时更新。

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

入门指南

连接IDE

克劳德代码：

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

光标 --创建 .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)

打开临床侧栏>设置（齿轮图标）>MCP服务器>添加远程服务器：

{
  "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"
    }
  }
}

注： 风帆用途 "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代理：

提示 它做什么
“将此代码库导入Composer” 扫描您的仓库并构建架构图
“创建一个名为后端架构的新Composer图” 创建并自动选择新图表
“在Composer中的API和数据库之间添加Redis缓存” 向图中添加新节点和边
“将分析监控添加到Composer图中” 添加可观察性节点和连接
“更新我在Composer中定义的API” 刷新后端节点上的端点定义
“验证我的Composer图” 检查缺少的端点、孤立节点等。
“将每个Composer节点链接到其源代码” 将图表节点与文件路径相关联

运作原理

身份验证是通过OAuth 2.1处理的——您的浏览器会打开一个一次性同意流，您就可以连接了。工具调用被代理到位于的Composer API mcp.usecomposer.com。您的图表数据存储在Composer的服务器上。MCP服务器本身是无状态的。

通过MCP所做的更改在 作曲家画布 通过实时WebSocket同步。

发展

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

链接

许可证

麻省理工学院

相关 MCP