Ideaboard MCP

MockFlow IdeaBoard MCP服务器

](https://www.npmjs.com/package/@mockflow/ideaboard-mcp) 

本地 主控程序 服务器 MockFlow IdeaBoard.直接从人工智能驱动的编码工具中创建流程图、思维导图、看板、云架构图和12多种其他可视化类型。

适用于 克劳德代码, 光标, VS代码副本, 法典，以及任何兼容MCP的客户端。

注： MCP服务器可能无法为涉及图像、人工智能艺术或复杂设计的某些类型的生成提供完整的体验。为了获得最佳的无缝体验，请使用 什么是AI代理 在MockFlow编辑器中。

快速开始

1.安装

npm install -g @mockflow/ideaboard-mcp

或者在不安装的情况下运行：

npx @mockflow/ideaboard-mcp

2.身份验证

mockflow-ideaboard-mcp login

这将打开您的浏览器，进入MockFlow的登录页面。使用您的MockFlow帐户登录并授权访问。令牌会自动保存到 ~/.mockflow/credentials.json （一次性设置）。

3.启动服务器

mockflow-ideaboard-mcp

您将看到：

MockFlow IdeaBoard - Local MCP Server
======================================
User: you@example.com

MCP server running on http://localhost:21193/mcp

Add to your AI client:

  Claude Code:
    claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp

4.连接您的AI客户端

克劳德代码

claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp

光标

设置>光标设置>工具和MCP：

{
  "mcpServers": {
    "mockflow-ideaboard": {
      "url": "http://localhost:21193/mcp"
    }
  }
}

VS代码副本

创建 .vscode/mcp.json 在您的项目中：

{
  "servers": {
    "mockflow-ideaboard": {
      "type": "http",
      "url": "http://localhost:21193/mcp"
    }
  }
}

食品法典委员会（OpenAI）

codex mcp add mockflow-ideaboard http://localhost:21193/mcp

5.开始提示

问你的AI客户端：

"Create a flowchart showing the user registration process"
"Create a kanban board for the product launch"
"Draw an AWS architecture diagram with API Gateway, Lambda, and DynamoDB"
"Create a mind map about project management methodologies"
"Map out the database schema as an ER diagram"

服务器创建一个新的IdeaBoard并返回URL。在浏览器中打开它进行查看和编辑。

可用工具（16）

运作原理

You: "Create a kanban board for the sprint"
  |
  v
AI Client (Claude Code / Cursor / VS Code)
  |  generates structured data (columns, cards, etc.)
  v
MCP Server (localhost:21193)
  |  proxies to MockFlow backend
  v
app.mockflow.com
  |  creates IdeaBoard with visualization
  v
Returns board URL → open in browser to view/edit

1. 你的AI客户端会读取你的代码库或按照你的提示进行操作
2. 它呼吁适当的 render_* 通过MCP使用结构化数据的工具
3. 本地MCP服务器将请求转发到 app.mockflow.com
4. MockFlow创建电路板并返回URL
5. 您打开URL以查看、编辑和共享可视化

CLI参考

mockflow-ideaboard-mcp                     # Start server on default port (21193)
mockflow-ideaboard-mcp --port=8888         # Start on custom port
mockflow-ideaboard-mcp login               # Set up API key (one-time)
mockflow-ideaboard-mcp --help              # Show usage and setup instructions

配置

凭证

存储在 ~/.mockflow/credentials.json （由自动创建 mockflow-ideaboard-mcp login):

{
  "access_token": "...",
  "userid": "you@example.com",
  "clientid": "your-client-id"
}

自定义端口

如果端口21193正在使用中：

mockflow-ideaboard-mcp --port=8888

然后更新您的AI客户端配置以使用新端口。

调试模式

对于详细日志记录：

MCP_DEBUG=1 mockflow-ideaboard-mcp

验证安装

# Check server is running
curl http://localhost:21193/mcp

# List available tools
curl -X POST http://localhost:21193/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'

速率限制

仅可视化工具调用（例如。 render_flowchart, render_mindmap)被计算在内。协议消息(initialize, tools/list, ping)是无限的。

限制是在服务器端为每个经过身份验证的用户强制执行的。每个回复都包括 RateLimit-Limit, RateLimit-Remaining，以及 RateLimit-Reset 标题。

故障排除

“找不到凭据”

跑 mockflow-ideaboard-mcp login 使用您的MockFlow帐户进行身份验证。

端口已在使用中

另一个进程正在使用端口21193。要么：

• 使用其他端口： mockflow-ideaboard-mcp --port=8888
• 终止进程： lsof -ti :21193 | xargs kill

AI客户端不使用IdeaBoard工具

在提示中明确： *“使用mockflow ideaboard，为…创建流程图”*.AI客户端有很多工具，可以默认生成代码。

工具调用失败，出现后端错误

确保您有有效的登录名和互联网连接。服务器需要达到 app.mockflow.com。如果您的令牌已过期，请运行 mockflow-ideaboard-mcp login 再一次。

示例提示

代码库可视化

"Analyze this codebase and create a system architecture diagram"
"Create a flowchart showing the authentication flow in this project"
"Map out the database schema as an ER diagram"
"Visualize the API endpoints as a swimlane diagram"

项目管理

"Create a kanban board for the remaining TODOs in this project"
"Create a gantt chart for the Q2 product roadmap"
"Create a calendar with the team's sprint events for April"

头脑风暴

"Create a mind map about microservices architecture patterns"
"Create a whiteboard with sticky notes for the retrospective"
"Create a customer journey map for the onboarding experience"

人工智能技能（克劳德代码）

技能是预先构建的提示，教Claude Code如何使用IdeaBoard MCP工具完成特定任务。当克劳德检测到匹配的意图时，技能会自动触发，而不是每次都写详细的提示。

安装技能

将技能文件复制到您的Claude Code技能目录：

mkdir -p ~/.claude/skills/mockflow-decision-flowchart
# Copy SKILL.md into the folder (see skills/ directory in this repo)

可用技能

更多可用技能 MockFlow配方库 --每个食谱都可以用作克劳德代码技能。

创建自定义技能

使用 AI提示框 在IdeaBoard内部创建和测试自定义提示，然后将其导出为Claude Code技能。请参阅 skills/ SKILL.md格式的目录。

技能格式

---
name: skill-name
description: When to use this skill
allowed-tools: MCP(render_flowchart)
user-invocable: true
---

# Instructions for Claude Code
...

链接

• npm：
• github：
• 模拟流： mockflow.com
• WireframePro MCP： @模拟流/线框程序mcp --将HTML转换为线框

贡献

欢迎在 .

许可证

麻省理工学院