内容
# 思维泡泡 MCP
**Abrakedabra - 你的枯燥文档现在变成了带有工作流图表的漂亮网站**
一个富有创造力的、原生 MCP 工具，通过无缝的 AI 集成，将任何文档、系统架构或计划转化为漂亮的交互式 HTML 可视化。
<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="hero_dark_v2.png">
<source media="(prefers-color-scheme: light)" srcset="hero_light_v2.png">
<img src="hero_light_v2.png" alt="将普通文档转换为交互式桑基图" width="100%">
</picture>
</p>
## 这是什么？
一个 Model Context Protocol（MCP）服务器，与你的 AI 助手合作，自动分析文档并生成带有嵌入式图表和图表的惊艳、交互式 HTML 可视化。不需要构建工具，不需要框架 - 只需要纯粹的 HTML、CSS 和 JavaScript，可以在任何地方运行。
**MCP 优先设计：**
- 与 Claude Desktop、Cursor 和任何兼容 MCP 的客户端本地集成
- 自动分析识别内容中的系统、工作流和数据模型
- **服务器端 SVG 渲染**，使用 beautiful-mermaid 和 D3（不需要 CDN！）
- 智能图表生成：Mermaid（流程图、序列图、ER 图、类图、状态图）+ D3 图表（条形图、饼图、环形图、折线图、面积图、甘特图、时间线、象限图、桑基图、径向图、树状图）
- **13 种布局模板**（侧边栏、杂志、演示文稿、仪表盘、极简主义、编辑风格、比较、简报、教程、记分卡、报告、档案、对话）
- **章节角色**（指标、引用、引导、声明、整宽、支持）用于细粒度视觉控制
- **密度预设**（紧凑、舒适、宽松）以匹配内容类型
- **12 种精选主题**，包括 Tokyo Night、Dracula、Gruvbox、GitHub 和 Solarized
- **高级图表样式**（注释、曲线类型、颜色策略、强调效果、用于无障碍的模式编码）
- **实时主题切换** - 用户无需重新生成主题
- 单命令工作流 - 只需说“可视化这个”，你的 AI 处理所有事情
- 自包含 HTML，完全离线工作
### 立即查看
**[浏览完整示例画廊 →](examples/)**
#### 16 种 D3 图表类型
<p align="center">
<a href="examples/all_d3_charts.html">
<img src="examples/chart_library_preview.png" alt="完整的 D3 图表库" width="100%">
</a>
<br><em>条形图、折线图、面积图、饼图、环形图、甘特图、时间线、象限图、桑基图、径向图、树状图 - 均带有注释、强调效果和实时主题切换</em>
</p>
#### 布局模板
相同内容，以三种不同的方式呈现，以适应你的使用场景：
<table>
<tr>
<td width="33%">
<a href="examples/layout_sidebar.html">
<img src="examples/layout_sidebar_preview.png" alt="侧边栏布局">
</a>
<br><strong>侧边栏</strong> - 多章节导航
<br><em>最适合：API 文档、技术参考</em>
</td>
<td width="33%">
<a href="examples/layout_magazine.html">
<img src="examples/layout_magazine_preview.png" alt="杂志布局">
</a>
<br><strong>杂志</strong> - 英雄 + 叙事流程
<br><em>最适合：报告、案例研究</em>
</td>
<td width="33%">
<a href="examples/layout_dashboard.html">
<img src="examples/layout_dashboard_preview.png" alt="仪表盘布局">
</a>
<br><strong>仪表盘</strong> - KPI 卡片 + 网格
<br><em>最适合：监控、指标</em>
</td>
</tr>
</table>
#### 完整示例
<table>
<tr>
<td width="50%">
<a href="examples/payment_gateway_integration.html">
<img src="examples/payment_gateway_preview.png" alt="支付网关 API">
</a>
<br><strong>支付网关 API</strong>
<br><em>带有序列图和 ER 模型的 RESTful API 文档</em>
</td>
<td width="50%">
<a href="examples/product_roadmap_2026.html">
<img src="examples/product_roadmap_preview.png" alt="产品路线图">
</a>
<br><strong>2026 产品路线图</strong>
<br><em>带有 5 百万美元 ARR 目标的 9 阶段开发计划</em>
</td>
</tr>
</table>
**[查看所有带有实时预览的示例 →](examples/)**
## 工作原理
```mermaid
graph LR
A[文档] --> C[LLM]
B[用户请求] --> C
C <--> D[思维泡泡 MCP]
C --> E[HTML + 图表输出]
style A fill:#d5f4f7,stroke:#00838f,stroke-width:3px
style B fill:#d5f4f7,stroke:#00838f,stroke-width:3px
style C fill:#d1e7fd,stroke:#0d47a1,stroke-width:3px
style D fill:#fff4e1,stroke:#ff9900,stroke-width:3px
style E fill:#d4edda,stroke:#28a745,stroke-width:3px
```
### MCP 工作流
1. **你添加：** 文档到 LLM 上下文
2. **你说：** “分析和可视化此文档”
3. **思维泡泡 MCP：** 自动识别系统、工作流和数据模型
4. **你选择：** 要可视化的项目
5. **思维泡泡 MCP：** 创建 Mermaid 图表 + 完整的 HTML 可视化
6. **你打开：** 浏览器中的漂亮可视化
7. **你体验：** 清晰和乐趣
### 替代：独立提示方法
对于没有 MCP 支持的环境，您可以使用基于独立提示的替代方法：
1. 复制 `prompt_template.md` + 你的内容
2. 手动发送到你的 LLM
3. 接收生成的 HTML
## 快速入门
### MCP 安装（主要方法）
**适用于 Claude Desktop、Cursor 或任何 MCP 客户端的 2 分钟设置：**
```bash
cd thought_bubble_mcp
npm install && npm run build
```
然后添加到你的 MCP 配置并重启你的 AI 客户端：
```json
{
"mcpServers": {
"thought-bubble": {
"command": "node",
"args": ["/绝对路径/思维泡泡/思维泡泡_mcp/dist/index.js"]
}
}
}
```
**注意：** 将 `/绝对路径/思维泡泡/` 替换为你的实际安装路径。
**完整说明：** [`thought_bubble_mcp/START_HERE.md`](thought_bubble_mcp/START_HERE.md)
**用法：**
```
"使用思维泡泡工具分析此内容并创建可视化：
[粘贴/添加你的文档作为上下文]"
```
就这样。你的 AI 将分析、生成图表并创建完整的 HTML 可视化。
## 快速测试 - 立即试用
想立即测试思维泡泡吗？我们提供了三个现成的测试文档：
### 1. API 集成文档
**文件：** [`test_inputs/test_doc_1_api_integration.md`](test_inputs/test_doc_1_api_integration.md)
**内容：** 带有身份验证流程、服务架构和数据模型的支付网关 API
**预期可视化：**
- 服务架构图（流程图）
- 支付处理序列（序列图）
- 数据模型关系（ER 图）
### 2. 产品路线图
**文件：** [`test_inputs/test_doc_2_product_roadmap.md`](test_inputs/test_doc_2_product_roadmap.md)
**内容：** 带有 4 个季度 9 个阶段的 2026 年开发路线图
**预期可视化：**
- 开发时间线（类似甘特的流程图）
- 功能依赖（流程图）
- 资源分配
### 3. 组织结构
**文件：** [`test_inputs/test_doc_3_org_structure.md`](test_inputs/test_doc_3_org_structure.md)
**内容：** 带有 8 名高管、副总裁和决策框架的公司等级制度
**预期可视化：**
- 高管领导等级制度（流程图）
- 决策流程（流程图）
- 团队分布
**测试：**
1. 在 AI 助手中打开任何测试文档
2. 说：”使用思维泡泡来分析和可视化此文档”
3. 从识别的列表中选择要可视化的系统
4. 接收交互式 HTML 可视化
### 替代方法（无 MCP）
**适用于 Claude/ChatGPT（手动提示）：**
1. 复制 `prompt_template.md` 的内容
2. 附加源文档
3. 发送到 LLM
4. 接收 HTML 可视化
**适用于 Cursor/AI IDE（工作区引用）：**
1. 打开文档文件
2. 引用：`@thought_bubble`
3. 说：”使用思维泡泡可视化此内容”
4. AI 生成自定义 HTML
## 你可以可视化什么？
- 系统架构
- 开发计划
- API 文档
- 组织图表
- 项目路线图
- 流程
- 数据模型
- 集成指南
- 技术规范
- 知识库
- 任何有结构的内容！
## 功能
### 13 种布局模板
每种都针对特定的内容类型和用例进行了优化：
- **侧边栏** - 带有固定导航的多章节文档（7+ 节）
- **杂志** - 带有英雄章节和引用语的报告和案例研究
- **演示文稿** - 带有全视口快进滑动的推介文稿
- **仪表盘** - 带有指标卡和图表网格的 KPI 监控
- **极简主义** - 带有视觉优先英雄的单一主题深入探讨
- **编辑风格** - 带有居中学术风格的论文和叙事
- **比较** - 带有平行列的供应商评估
- **简报** - 带有引导项目和统计条的冲刺回顾
- **教程** - 带有进度脊柱的逐步指南
- **记分卡** - 带有语义颜色评分的成熟度评估
- **报告** - 带有封面和目录的 RFC 和合规文档
- **档案** - 带有个人资料头和事实的研究综合
- **对话** - 带有结构化参数和权衡的 ADR
### 章节角色
对各个章节的细粒度视觉控制：
- **指标** - 带有值和标签的大型 KPI 卡
- **引用语** - 带有醒目字体的引用块
- **引导** - 带有较大文字的较宽的开头段落
- **声明** - 居中显示的大型文字，用于关键消息
- **整宽** - 跨越视口的突破性视觉效果
- **支持** - 附录和次要内容
### D3 图表功能
**16+ 种图表类型** - 条形图、饼图、环形图、折线图、面积图、甘特图、时间线、象限图、桑基图、径向图、树状图
**示例 - 带有注释的收入图表：**
```json
{
"diagramType": "line",
"chartData": [
{"x": "Q1", "y": 1200000},
{"x": "Q2", "y": 1850000},
{"x": "Q3", "y": 2100000},
{"x": "Q4", "y": 3200000}
],
"chartOptions": {
"curve": "smooth",
"emphasis": "glow",
"colorStrategy": "monochrome",
"annotations": [
{"label": "产品发布 +54%", "x": "Q2", "y": 1850000, "dx": 10, "dy": -20},
{"label": "企业交易", "x": "Q4", "y": 3200000, "dx": 10, "dy": -20}
]
}
}
```
**示例 - 桑基流程图：**
```json
{
"diagramType": "sankey",
"chartData": [{
"nodes": [
{"id": "direct", "label": "直接销售"},
{"id": "partner", "label": "合作伙伴"},
{"id": "enterprise", "label": "企业"},
{"id": "smb", "label": "中小企业"}
],
"links": [
{"source": "direct", "target": "enterprise", "value": 45},
{"source": "direct", "target": "smb", "value": 12},
{"source": "partner", "target": "enterprise", "value": 28},
{"source": "partner", "target": "smb", "value": 35}
]
}]
}
```
**图表选项：**
- **注释** - 带有 dx/dy 定位的数据点标签
- **曲线类型** - `smooth`, `natural`, `sharp`, `step`
- **颜色策略** - `categorical`, `sequential`, `diverging`, `monochrome`
- **强调效果** - `glow`, `shadow`, `lift`, `none`
- **模式编码** - `patterns: true` 用于 WCAG 合规性
- **动画** - `stagger`, `draw`, `grow`, `fade`, `none`
### 专业设计
- **12 种精选主题** - Tokyo Night, Dracula, Gruvbox, Solarized Dark/Light, GitHub Dark/Light, Professional, Creative, Technical, Minimal, Dark
- **字体配对** - 主题特定的字体组合（显示 + 正文 + 等宽）
- **密度预设** - 紧凑（信息密集），舒适（平衡），宽松（留白）
- **实时主题切换** - 用户可以在浏览器中切换主题而无需重新生成
- **响应式布局** - 移动设备、平板电脑、桌面设备断点
- **平滑动画** - 进入动画、悬停状态、过渡
- **无障碍** - ARIA 标签、键盘导航、WCAG AA 对比度、模式编码
### 自包含
- 无需构建过程
- 无依赖（除可选的 Mermaid CDN 外）
- 单个 HTML 文件输出
- 离线工作（首次加载后）
- 复制粘贴部署
## 图表和图表类型
思维泡泡支持全面范围的视觉化类型。参见 [`showcase_examples/README.md`](showcase_examples/README.md) 以获取每种类型的实时示例。
### D3 图表
- **条形图** - 精确比较，分类数据，带有圆角条形和值标签
- **折线图** - 随时间变化的趋势，带有可配置的曲线插值
- **面积图** - 累积体积，增长轨迹，带有渐变填充
- **饼图/环形图** - 组成分解（建议最多 6 个类别）
- **径向图** - 圆形多轴比较
- **甘特图** - 项目时间线和里程碑日程
- **时间线** - 带有中心主线的按时间顺序排列的事件序列
- **象限图** - 2D 定位矩阵（优先级，影响分析）
- **桑基图** - 流量体积和收入流
- **树状图** - 分层比例和分类
### Mermaid 图表
- **流程图** - 流程、工单、决策树、架构
- **序列图** - API 交互、身份验证流程、消息传递
- **类图** - 对象模型、数据结构、关系
- **ER 图** - 数据库模式、实体关系
- **状态图** - 状态机、状态流程、生命周期管理
注意：目前不支持 C4 图表。
**[查看具有所有图表类型的综合示例](showcase_examples/README.md)**
### 甘特图：项目时间线
适用于项目规划、路线图和调度：
```mermaid
gantt
title 项目开发时间线
dateFormat YYYY-MM-DD
section 规划
需求收集 :done, req, 2026-01-01, 2026-01-14
设计和线框图 :done, des, 2026-01-15, 2026-01-28
section 开发
后端 API :active, dev1, 2026-01-29, 30d
前端组件 : dev2, after dev1, 25d
集成 : dev3, after dev2, 15d
section 测试
质量保证 : test, after dev3, 20d
漏洞修复 : fix, after test, 10d
section 部署
生产发布 : rel, after fix, 5d
```
### 序列图：订单处理
适用于 API 流、服务交互和消息传递：
```mermaid
sequenceDiagram
participant 用户
participant 用户服务 as 用户服务
participant 产品目录 as 产品目录
participant 订单服务 as 订单服务
participant 支付网关 as 支付网关
participant Stripe
用户->>用户服务: 登录请求
用户服务-->>用户: JWT 令牌
用户->>产品目录: 浏览产品
产品目录-->>用户: 产品列表
用户->>订单服务: 添加到购物车
订单服务->>产品目录: 检查库存
产品目录-->>订单服务: 库存可用
订单服务-->>用户: 项目已添加
用户->>订单服务: 结账
订单服务->>用户服务: 验证用户
用户服务-->>订单服务: 用户已验证
订单服务->>支付网关: 处理支付
支付网关->>Stripe: 充值卡
Stripe-->>支付网关: 支付成功
支付网关-->>订单服务: 支付确认
订单服务->>产品目录: 更新库存
订单服务-->>用户: 订单确认
```
### 用户旅程：新用户入职体验
适用于映射用户体验和触点：
```mermaid
journey
title 新用户入职旅程
section 发现
访问首页: 5: 用户
阅读功能: 4: 用户
查看示例: 5: 用户
section 注册
注册: 3: 用户
验证电子邮件: 2: 用户
完成个人资料: 4: 用户
section 首次使用
观看教程: 4: 用户
创建第一个项目: 3: 用户
邀请团队成员: 5: 用户
section 采用
每日使用: 5: 用户
探索功能: 4: 用户
升级计划: 5: 用户
```
### 流程图：用户注册流程
适用于流程、工单、决策树：
```mermaid
flowchart TD
开始([用户访问注册页面]) --> 提交[提交电子邮件和密码]
提交 --> 验证{验证凭证}
验证 -->|有效| 发送电子邮件[发送验证电子邮件]
验证 -->|无效| 错误[显示错误信息]
错误 --> 提交
发送电子邮件 --> 等待点击[等待用户操作]
等待点击 --> 点击[用户点击激活链接]
点击 --> 激活[激活账户]
激活 --> 成功([注册完成])
style 开始 fill:#e1f5ff
style 成功 fill:#d4edda
style 错误 fill:#f8d7da
style 激活 fill:#d4edda
```
### 状态图：订单生命周期
适用于状态机、状态流程和生命周期管理：
```mermaid
stateDiagram-v2
[*] --> 草稿
草稿 --> 待处理: 提交订单
待处理 --> 处理中: 支付已批准
待处理 --> 已取消: 支付失败
处理中 --> 已发货: 订单已发货
处理中 --> 已取消: 缺货
已发货 --> 已交付: 确认交付
已交付 --> 已退货: 退货请求
已退货 --> 已退款: 退货处理完成
已取消 --> [*]
已退款 --> [*]
已交付 --> [*]
```
**还有更多：** ER 图、类图、Git 图、饼图、象限图、C4 架构图。 [查看所有示例](examples/README.md#live-diagram-examples)
## 文件列表
```
thought_bubble/
├── README.md # 本文件
├── thought_bubble_mcp/ # MCP 服务器（主要接口）
│ ├── START_HERE.md # MCP 快速入门指南
│ ├── README.md # 完整的 MCP 文档
│ ├── ARCHITECTURE.md # 完整的架构参考
│ ├── THEMES.md # 主题文档
│ ├── src/ # TypeScript 源代码
│ │ ├── index.ts # MCP 服务器入口点
│ │ ├── tools/ # 工具实现
│ │ ├── renderers/ # D3 和 Mermaid 渲染
│ │ ├── builders/ # HTML 组装
│ │ ├── themes/ # 主题系统
│ │ └── prompts/ # LLM 提示模板
│ ├── scripts/ # 示范生成脚本
│ └── dist/ # 构建后的服务器（运行 npm run build 后）
├── LLM_Design_Assets/ # 设计系统文档
│ └── ESSENTIAL_DESIGN_RULES.md # 核心设计原则
├── DesignTeam/ # 内部设计文档
│ └── DesignGuide/ # 详细的設計指南（POV、字体排版、布局、D3、颜色、间距）
├── showcase_examples/ # 13 个综合示例可视化
│ ├── README.md # 详细的示例文档
│ ├── index.html # 示例画廊
│ └── *.html # 单个示例
├── test_inputs/ # 用于生成示例的测试文档
├── base_template.html # 核心 HTML 结构
└── prompt_template.md # 旧版：非 MCP 使用的手动提示
```
## 使用提示
### 为了获得最佳结果：
1. **提供结构** - 您的内容越有条理，输出效果越好
2. **指定偏好** - 告诉 LLM 您想要哪些组件/主题
3. **包含图表** - Mermaid 图表渲染效果极佳
4. **定义章节** - 清晰的章节标题有助于创建导航
5. **添加元数据** - 状态、日期、作者等增强可视化效果
### 示例 MCP 用法：
**直接询问您的 AI：**
```
使用 thought-bubble 来分析和可视化此系统架构文档。
我想要流程图的 workflow 和带有侧边栏导航的专业主题。
[粘贴您的文档]
```
AI 将使用 MCP 工具来分析、创建图表并生成完整的可视化。
**适用于手动/旧版提示方法：**
```
使用 thought-bubble 创建此内容的交互式 HTML 可视化。
主题：专业
包含：侧边栏导航、Mermaid 图表、统计卡片、时间线布局
[您的内容在此]
```
## 自定义
LLM 可以自定义：
- 颜色方案和主题
- 组件选择
- 布局结构
- 导航样式
- 动画强度
- 内容组织
## MCP 工具
thought_bubble MCP 服务器为您的 AI 助手提供了 5 种工具：
### `analyze_content`
分析文档以识别可视化机会：
- **工作流程**（流程、序列、流）
- **系统**（架构、组件、服务）
- **数据模型**（实体、模式、对象）
- **指标/KPI**（关键绩效指标）
返回具有布局建议的结构化分析。
### `generate_visualization`
生成完整的自包含 HTML，包含：
- **13 种布局模板**（侧边栏、杂志、演示文稿、仪表盘、极简风格、编辑风格、比较、简介、教程、记分卡、报告、档案、对话）
- **章节角色**（指标、引用、引导、陈述、全文、支持）
- **密度预设**（紧凑、舒适、宽松）
- **16+ 种图表/图表类型**（Mermaid + D3）
- **高级图表选项**（注释、曲线类型、颜色策略、强调效果、图案）
- **12 种主题**，具有实时切换功能
- **响应式设计**，适用于所有设备
### `generate_mermaid_prompt`
返回提示模板，帮助 LLM 生成 Mermaid 图表代码。
### `list_themes`
列出所有 12 种可用主题及其详细信息（名称、模式、类别、个性）。
### `get_design_guide`
检索设计指南文档（POV、字体排版、布局、D3 样式指南、色彩理论、间距）。
**完整的 MCP 文档：** [`thought_bubble_mcp/README.md`](thought_bubble_mcp/README.md) | **架构参考：** [`thought_bubble_mcp/ARCHITECTURE.md`](thought_bubble_mcp/ARCHITECTURE.md)
## 浏览器支持
生成的可视化适用于：
- Chrome/Edge（最新版）
- Firefox（最新版）
- Safari（最新版）
- 移动浏览器（iOS、Android）
## 许可证
MIT 许可证 - 免费用于个人和商业项目
## 鸣谢
创建此项目是为了让文档变得更美观、更易于访问。
## 贡献
欢迎贡献！我们特别重视：
- MCP 服务器增强（新工具、改进的分析）
- 新的组件模式和主题
- 示例可视化
- 文档改进
通过 PR 提交贡献。
---
**让你的文档令人难忘。**
MCP 配置
以下是此 MCP Server 的配置信息，可直接复制到 Cursor 或其他 MCP 客户端中使用。
mcp.json
连接信息
猜你喜欢
暂无推荐服务器