ASCIIFlow MCP服务器
MCP（模型上下文协议）服务器，将ASCIIFlow的绘图图元作为工具公开，使AI助手能够直接从PRD或自然语言描述生成ASCII线框。
安装
需要Node.js>=20。
推荐：从源代码进行全局安装
# Clone the repository with submodules
git clone --recurse-submodules https://github.com/bobooooo/asciiflow-mcp.git
cd asciiflow-mcp
# Install dependencies
npm install
# Install globally
npm install -g .如果你已经克隆了 --recurse-submodules，初始化子模块：
git submodule update --init --recursive替代方案：直接与npx一起使用（可能较慢）
npx -y github:bobooooo/asciiflow-mcp备注：此包为ASCIIFlow客户端库使用git子模块。克隆时，使用 --recurse-submodules 自动获取所需的依赖关系。Claude桌面配置
对于全局安装（推荐）：
添加以下内容 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）或 %APPDATA%\Claude\claude_desktop_config.json （Windows）：
{
"mcpServers": {
"asciiflow": {
"command": "asciiflow-mcp"
}
}
}对于npx：
{
"mcpServers": {
"asciiflow": {
"command": "npx",
"args": ["-y", "github:bobooooo/asciiflow-mcp"]
}
}
}然后重新启动Claude Desktop。
可用工具
| 工具 | 参数 | 说明 |
|---|---|---|
canvas_new | — | 创建/重置一个空白画布 |
draw_box | x, y, w, h, label? | 在画布上绘制矩形框。x/y 为左上角坐标，w/h 为宽高（字符单位，最小 3），label 可选，显示在顶边框中央 |
draw_line | x1, y1, x2, y2 | 在两点之间绘制折线（先水平后垂直） |
draw_arrow | x1, y1, x2, y2 | 在两点之间绘制带箭头的连线，箭头指向终点 |
add_text | x, y, text | 在指定坐标添加文字，支持 \n 换行 |
canvas_export | — | 导出当前画布为 ASCII 文本 |
canvas_preview | — | 预览当前画布状态（与 canvas_export 相同，用于中间检查） |
canvas_batch | ops | 批量执行绘图指令并返回最终结果。ops 是指令数组，每条指令包含 op 字段（canvas_new / draw_box / draw_line / draw_arrow / add_text）及对应参数 |
所有坐标均采用字符网格单位（列/行）。
示例用法
单一工具调用
提示克劳德：
帮我根据这个 PRD 生成登录页面的 ASCII 线框图：用户需要输入邮箱和密码，点击登录按钮后跳转到主页，底部有"忘记密码"和"注册"链接。
Claude将按顺序调用MCP工具，并产生如下输出：
┌────────────────登录────────────────┐
│ │
│ │
│ 邮箱: │
│ ┌──────────────────────────────┐ │
│ │ │ │
│ └──────────────────────────────┘ │
│ │
│ 密码: │
│ ┌──────────────────────────────┐ │
│ │ │ │
│ └──────────────────────────────┘ │
│ │
│ ┌─────登 录──────┐ │
│ │ │ │
│ └──────────────┘ │
│ │
│ 忘记密码? 注册账号 │
│ │
└──────────────────────────────────┘批处理工具调用
为了获得更好的性能，请使用 canvas_batch 在一次调用中执行所有绘图操作：
{
"ops": [
{ "op": "canvas_new" },
{ "op": "draw_box", "x": 0, "y": 0, "w": 36, "h": 20, "label": "登录" },
{ "op": "add_text", "x": 2, "y": 3, "text": "邮箱:" },
{ "op": "draw_box", "x": 2, "y": 4, "w": 32, "h": 3 },
{ "op": "add_text", "x": 2, "y": 8, "text": "密码:" },
{ "op": "draw_box", "x": 2, "y": 9, "w": 32, "h": 3 },
{ "op": "draw_box", "x": 10, "y": 13, "w": 16, "h": 3, "label": "登 录" },
{ "op": "add_text", "x": 3, "y": 17, "text": "忘记密码?" },
{ "op": "add_text", "x": 22, "y": 17, "text": "注册账号" }
]
}发展
对于贡献者
要修改源代码并重新生成，请执行以下操作：
# Clone with submodules
git clone --recurse-submodules https://github.com/bobooooo/asciiflow-mcp.git
cd asciiflow-mcp
# Install dependencies
npm install
# Build
npm run build
# Test locally
npm link构建过程使用来自的ASCIIFlow客户端库 client-repo 子模块。
运行测试：
npm test仓库
- 主存储库：https://github.com/bobooooo/asciiflow
- MCP包：https://github.com/bobooooo/asciiflow-mcp
许可证
麻省理工学院