内容
# 厌倦了格式糟糕的 Markdown？给你的 LLM 一个画布。 🎨
**jarbobo** 让 Claude（或任何 MCP 客户端）能够在你的编辑器中绘制 **真正的、交互式的图表** —
不是 ASCII 艺术，不是 mermaid 字符串（它会胡乱生成一半的语法），也不是在另一个标签页中的 PNG 图片。
图形、UML 时序图和类图都生活在 Cursor 中，作为一流的标签页，其中
**每个节点都是代码中的实时指针**：悬停它以获取概要，点击它，编辑器
跳转到确切的 `文件:行`。
[](assets/demo.mov)
*上方：探索 pybind11 的内部实现 — **点击图片以观看完整演示**（0:14）。
该图由 Claude 通过 MCP 绘制；点击 `struct internals` 焦点 `internals.h:302`
在编辑器中。*
---
## 为什么存在
LLM 在 *解释* 系统方面很出色，但在 *展示* 方面很糟糕。Markdown 给他们提供了项目符号；
mermaid 给他们提供了容易出错的语法。jarbobo 给他们提供了一个具有交互性契约的画布：
| LLM 设置… | 你得到… |
|---|---|
| `tooltip` | 任何节点、边、消息或类上的悬停文本 |
| `detail` | 点击 → 侧边栏显示完整解释（可锁定 🔒，点击外部关闭） |
| `file` + `line` | **点击 → 编辑器打开该源代码行**（⌘-点击跳过详细面板直接跳转；悬停时按住 ⌃ 以高亮显示引用） |
| `href` | 点击 → 文档 / PR / 仪表盘 |
以及您期望的查看器机制：
- 🗂 **每个图表一个标签页** — 并排比较视图，将标签页拖出成为独立窗口
- 🔍 **平移和缩放** — 右拖动平移，滚动平移，⇧-滚动水平平移，⌘-滚动缩放
- 🧲 **持久化布局** — 拖动节点；排列方式在关闭和重新打开后保持不变
- 🎯 **引用目标切换** — 在主代码窗口或图表旁边打开点击的引用
- 📊 **状态栏** — `jarbobo: idle` / `jarbobo: 3 diagrams`，点击查看历史记录
## 三种工具
- **`draw_graph`** — 架构、数据流、调用图、状态机。分层/力导向/网格/圆形
布局，形状（框、椭圆、菱形、六边形、圆柱体），带有标签的分组容器用于
边界（“CPython 解释器” vs “你的 .so”），样式化边（实线/虚线/点线，颜色）。
- **`draw_sequence_diagram`** — UML 时序图：框/参与者/数据库参与者，同步/异步/回复/自身
消息，带有自动激活条、侧边注释和 `loop / alt / opt / par` 帧。
- **`draw_class_diagram`** — UML 类：带「立体字」的类，属性和方法，`+ - # ~`
可见性，以及诚实的 UML 关系 — 继承 ▷，实现 ⇢▷，组合 ◆，
聚集 ◇，关联，依赖 ⇢ — 带有基数标签。
- **`draw_swimlane_diagram`** — 跨职能流程：步骤按所有者（服务、团队、线程）划分为泳道，
水平或垂直，并带有自动按边排序的步骤；框/菱形/椭圆步骤和样式化的跨泳道边。
- **`draw_timeline`** — 里程碑 ◆ 和阶段跨度 ▬ 在分类有序轴上
（日期、版本、季度 — 任意），带有可选的标签跟踪：发布
历史、迁移计划、路线图、事件时间线。
- **`list_diagrams`** / **`open_diagram`** — 枚举保存的图表并重新显示任意
版本（还返回其规范，以便 LLM 可以回滚或在此基础上构建）。
**编辑是版本化的。** 每次不带 `id` 的绘图调用都会创建一个新图表（新标签页）
并返回其 `id`；传递 `id` **编辑** 它 — 内容保存为下一个
版本，*现有标签页更新就位*。面板标题栏中的版本选择器
允许您翻回到任意旧版本；内容绝不会被覆盖。
验证很严格（未知节点 ID，无效帧范围 → 工具调用失败并带有可修复
的消息），因此 LLM 无法悄悄地绘制出损坏的图片。
## 快速开始
```bash
git clone git@github.com:tch1001/jarbobo.git && cd jarbobo
npm install && npm run compile && npm run vendor
npx vsce package --allow-missing-repository
cursor --install-extension jarbobo-0.1.0.vsix # 或：code --install-extension …
```
**Stock VS Code 1.101+**：就这样 — 扩展程序通过 `vscode.lm.registerMcpServerDefinitionProvider`
自行注册其捆绑的 MCP
服务器，在编辑器的
自己的 Node（`process.execPath`）上运行，因此无需进行其他配置。
**Cursor** 目前尚未实现此注册 API（[在 Cursor
论坛上跟踪](https://forum.cursor.com/t/support-vs-codes-register-mcp-server-definition-provider-api/133031)），
因此请手动注册服务器：
```jsonc
// ~/.cursor/mcp.json
{
"mcpServers": {
"jarbobo": { "command": "node", "args": ["<abs-path>/jarbobo/out/mcp-server.js"] }
}
}
```
```bash
# Claude Code — 相同的手动步骤，适用于任何缺少注册 API 的客户端
claude mcp add --scope user jarbobo node <abs-path>/jarbobo/out/mcp-server.js
```
重新加载编辑器后，询问您的代理类似
*“绘制导入时发生的时序图，并链接每个步骤到源代码。”*
## 架构
两个进程，一个 localhost 桥接 — 因此 **任意数量的 MCP 客户端都可以绘制到同一个编辑器**：
```
Claude（Cursor 代理 / Claude Code / …）
│ stdio MCP：draw_graph / draw_sequence_diagram / draw_class_diagram
▼
mcp-server.js 验证（zod）→ 保存 ~/.jarbobo/diagrams/*.json
│ POST /diagram （端口通过 ~/.jarbobo/port.json 发现）
▼
扩展程序宿主 一个图表一个网页标签页 · 状态栏 · 持久化布局
▼
网页视图 cytoscape（图）· 手动滚动 SVG（时序图 / UML）
│ 点击节点并跳转到文件:行
▼
你的编辑器 显示该行，尊重锁定编辑器组
```
## 面板速查表
| 操作 | 方法 |
|---|---|
| 平移 | 右拖动，或滚动 / ⇧-滚动 |
| 缩放 | ⌘-滚动（围绕光标） |
| 重置平移/缩放 | **重置视图** 按钮 |
| 重新计算布局（丢弃拖动） | **重置布局** 按钮 |
| 锁定详细面板 | 🔓 → 🔒 在 ✕ 旁边（点击外部关闭时解锁） |
| 直接打开代码引用 | **⌘-点击** 元素 |
| 悬停时高亮显示代码引用 | 按住 **⌃ Ctrl** |
| 选择引用打开位置 | **引用 → 代码窗口 / 此窗口** 切换按钮 |
| 重新排列 | 拖动节点（图）或类框 — 布局保持不变 |
| 切换图表版本 | **v3 ▾** 面板标题栏中的选择器（编辑会增加版本号；旧版本仍然存在） |
| 重新打开任意内容 | 状态栏项目，或 `Jarbobo: 打开最近的图表` |
## 开发
`media/dev.html` 是一个独立的测试环境（提供 `media/` 并打开 `dev.html#graph|sequence|class`）。
`node scripts/test-mcp.mjs` 对 MCP 服务器进行简单测试，覆盖 stdio。
`curl 127.0.0.1:$(jq .port ~/.jarbobo/port.json)/health` 检查桥接。
MIT.
