mcpField
M
miro-mcp

miro-mcp

github.com/miroapp生产力164235 次安装6 周前更新
代码仓库

关于 miro-mcp

miro-mcp 说明 Claude Code 如何与 Miro 看板交互，以创建、读取和编辑可视化内容。文档涵盖图表、文档、表格以及从看板项目提取结构化上下文。

主要功能

  1. 01通过文本或 Mermaid 创建图表
  2. 02创建和编辑看板文档
  3. 03创建、同步和筛选表格
  4. 04浏览看板内容并提取上下文
  5. 05读取图像数据和下载链接

适用场景

  1. 01绘制流程或组件结构图
  2. 02提取指定看板项目的详细信息
  3. 03读取并更新结构化表格数据

MCP 相关

Miro MCP 使 Claude 能与 Miro 看板交互。所列工具可创建和读取图表、文档、表格及图像等内容。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/miroapp/miro-ai --skill miro-mcp

安装后在 Claude Code 中输入/miro-mcp确认已加载。

详细介绍

将 Miro 与 Claude Code 搭配使用

什么是 Miro MCP？

Miro MCP（Model Context Protocol）让 Claude 能够直接与 Miro 看板交互。创建图表、文档和表格；读取看板内容；并从可视化设计中提取结构化文档。

可用工具

内容创建
  • diagram_get_dsl - 创建图表前获取 DSL 格式规范
  • diagram_create - 根据 DSL 文本描述生成图表
  • doc_create - 在看板上创建 Markdown 文档
  • table_create - 创建包含文本列和选择列的表格
  • table_sync_rows - 添加或更新表格行
内容读取
  • board_list_items - 列出看板上的项目，可按类型或容器筛选
  • context_explore - 探索看板的高层内容（框架、文档、原型、表格、图表）
  • context_get - 从特定看板项目中提取详细文本上下文
  • table_list_rows - 读取表格数据，可按列筛选
  • image_get_data - 获取看板中的图像内容
  • image_get_url - 获取图像的下载 URL
文档编辑
  • doc_get - 读取文档内容和版本
  • doc_update - 使用查找和替换编辑文档

看板 URL 和 ID

Miro 工具可直接接受看板 URL。从以下 URL 中自动提取 board_id 和 item_id：

  • https://miro.com/app/board/uXjVK123abc=/ - 看板 URL
  • https://miro.com/app/board/uXjVK123abc=/?moveToWidget=3458764612345 - 聚焦到项目的 URL

URL 包含 moveToWidget 或 focusWidget 参数时，会自动提取 item_id。

创建图表

使用 diagram_create 根据文本描述创建可视化图表。

支持的图表类型
  • flowchart - 流程、工作流、决策树
  • mindmap - 层级化思路、头脑风暴
  • uml_class - 类结构、继承关系
  • uml_sequence - 组件随时间发生的交互
  • entity_relationship - 数据库架构、数据模型
描述格式

使用自然语言效果良好：

User registration flow: start -> enter email -> validate email ->
send verification -> user confirms -> create account -> redirect to dashboard

Mermaid 语法可实现精确控制：

flowchart TD
    A[Start] --> B{Valid Email?}
    B -->|Yes| C[Send Verification]
    B -->|No| D[Show Error]
    C --> E[Wait for Confirm]
    E --> F[Create Account]
在看板上定位项目

看板坐标使用以 (0, 0) 为中心的笛卡尔坐标系。X 正方向向右，Y 正方向向下。

间距建议：

  • 图表：间隔 2000-3000 个单位
  • 文档：间隔 500-1000 个单位
  • 表格：间隔 1500-2000 个单位
放置在框架中

将 parent_id 设置为框架 ID，即可将内容放入该框架。

创建文档

使用 doc_create 在看板上创建类似 Google Docs 的文档。

支持的 Markdown
  • 标题：# H1 至 ###### H6
  • 粗体：**text**
  • 斜体：*text*
  • 无序列表：- item
  • 有序列表：1. item
  • 链接：[text](url)
文档示例
# Sprint Planning - Week 12

## Goals
- Complete user authentication module
- Fix critical bugs from QA

## Team Assignments
1. **Alice** - Auth backend
2. **Bob** - Frontend integration
3. **Carol** - Bug fixes

## Resources
- [Design specs](https://example.com/specs)
- [API documentation](https://example.com/api)

使用表格

创建表格

使用 table_create 创建包含指定类型列的表格。支持两种列类型：text 用于自由输入，select 用于带有预定义颜色选项的下拉菜单。

添加和更新行

使用 table_sync_rows 添加或更新表格数据。将 key_column 设置为匹配现有行，以实现插入或更新行为——匹配的行会被更新，不匹配的行会作为新行插入。

读取表格数据

使用 table_list_rows 读取表格内容。使用 ColumnName=Value 格式按列值筛选。

提取看板内容

探索看板内容

使用 context_explore 获取看板内容的概览——返回框架、文档、原型、表格和图表，以及它们的 URL 和标题。

获取项目详情

使用 context_get 从特定项目中提取详细内容：

项目类型返回内容
文档文档内容的 HTML 标记
原型屏幕表示 UI/布局的 HTML 标记
原型容器AI 生成的所有屏幕及导航流程映射
画框AI 生成的画框内容摘要
表格格式化的表格数据
图表AI 生成的描述和分析
工作流
  1. 调用 context_explore 以发现白板内容
  2. 从结果中确定感兴趣的项目
  3. 使用特定项目 URL 调用 context_get（并设置 moveToWidget 参数）

浏览白板项目

使用 board_list_items 浏览白板内容。按项目类型（frame、sticky_note、card、shape、text、image、document、embed）或容器筛选，以列出特定画框中的项目。

最佳实践

对于图表
  • 明确说明元素及其关系
  • 指定流程方向（从上到下、从左到右）
  • 包含决策点和条件
  • 让 AI 自动检测图表类型，或明确指定类型
对于文档
  • 使用清晰的标题组织内容
  • 聚焦主题，确保内容易于浏览
  • 多个项目使用列表
  • 添加相关资源的链接
对于表格
  • 选择有意义的列名
  • 状态/优先级字段使用选择列
  • 设置清晰且彼此不同的选项颜色
  • 使用 key_column 进行幂等更新
对于上下文提取
  • 从 context_explore 开始，以发现白板内容
  • 白板较大时，聚焦特定画框
  • 使用项目 URL 调用 context_get 以提取详细内容

快速参考

任务工具
获取图表 DSL 规范diagram_get_dsl
创建图表diagram_create
创建文档doc_create
读取文档doc_get
编辑文档doc_update
创建表格table_create
添加/更新表格行table_sync_rows
读取表格数据table_list_rows
发现白板内容context_explore
提取项目详情context_get
列出白板项目board_list_items
获取图像数据image_get_data
获取图像 URLimage_get_url

评论

支持 Markdown