diagram-plugin 怎么安装？

在已安装 dsh CLI 引擎的环境中，进入插件页复制安装命令一键执行即可；尚未跑自动兼容性验证，可查看页面内的依赖与入口分析。

diagram-plugin 兼容性怎么样？

尚未跑自动兼容性验证，可查看页面内的依赖与入口分析。

diagram-plugin 有中文文档吗？

已提供中文翻译 README（由 DeepSeek 最新模型翻译生成），本站可切换中英文对照阅读。

diagram-plugin 还在维护吗？

GitHub 0 星。最近一次上游提交在 2026/10/22。

图表画布 weimin96/diagram-plugin

MCP

weimin9612 天前有提交已提供中文文档扫描：含敏感能力兼容 / 相关生态

在 GitHub 查看 ↗

在对话旁实时生成并编辑 Mermaid 与 Canvas 图表

30/100

综合分

GitHub 星标

—

npm 周下载

—/5

用户评分

数据截至 2026/10/22 · 周下载取自 npm 全网（含 CI / 镜像），非本站安装数；综合分由星标、活跃度与兼容性检查合成。

相关生态插件（非 dsh 原生，按其对应运行时安装）

git clone https://github.com/weimin96/diagram-plugin.git

状态速览

判定依据：实装验证 · 静态安装检查 · 自动扫描 · 仓库维护状态

信任档位：已验证

是什么

生态应用

桌面端 / Web 外壳，不以 dsh plugin add 安装

装得上吗

本站已在 dsh 0.2.1-rc.2 下真实安装成功

非静态推断

L4 · 真实安装等级说明 →

安全吗

本站尚未对该插件做风险分级

暂未覆盖，不等同于无风险

还在维护吗

活跃：最近一次提交在 12 天前

档位由哪些信号合成

本站实装验证（真实安装 L4 覆盖全站；L5 为运行时冒烟或实机截图，覆盖范围小于 L4） · 验证所用 dsh 版本 · 静态安装检查 · 风险分级 · 仓库维护状态。下方各区块是它的证据明细。

验证判据与等级说明 →

社区实装还没有人打卡 · 装过的第一个就是你

安全扫描自动 · 静态分析源码

v2.7.0

🔵 扫描：含敏感能力尚无人工评估

展开查看扫描说明与证据 ↓

静态扫描发现插件具备触达本地系统的能力：执行外部命令、读写/删除本地文件、读取剪贴板或密钥类环境变量（至少其一）。这是能力清单，不是危险判定——具体能力项与证据见下方，安装前请自行判断是否需要。

读写/删除本地文件

查看扫描证据（共 57 处，展示前 29 条）

读取本地文件
integrations/deepseek/bridge.mjs:16
const workspace = await realpath(workspacePath)
读取本地文件
integrations/deepseek/bridge.mjs:19
|| await realpath(args.workspacePath) !== workspace) throw new Error('图表操作超出当前会话工作区。')
读取本地文件
integrations/deepseek/host.mjs:73
readFile(path.join(directory, 'app.js'), 'utf8'), readFile(path.join(directory, 'app.css'), 'utf8'),
读取本地文件
integrations/deepseek/host.mjs:95
const target = await realpath(body.params.path)
写入本地文件
src/canvasHistory.ts:429
await mkdir(path.dirname(file), { recursive: true, mode: 0o700 })
写入本地文件
src/canvasHistory.ts:430
await appendFile(file, events.map((event) => JSON.stringify(event)).join('\n') + '\n', { encoding: 'utf8', mode: 0o600, flag: 'a' })
读取本地文件
src/canvasHistory.ts:434
const text = await readFile(historyFile(this.workspacePath), 'utf8').catch((error) => {
读取本地文件
src/icons.ts:9
const svg = await readFile(path.join(assetDir, filename), 'utf8')
读取本地文件
src/server.ts:43
readFile(path.join(here, 'app.js'), 'utf8'),
读取本地文件
src/server.ts:44
readFile(path.join(here, 'app.css'), 'utf8'),
读取本地文件
src/server.ts:2026
const state = JSON.parse(await readFile(stateFile, 'utf8')) as CodexDesktopState
读取本地文件
src/server.ts:2059
const parsed = JSON.parse(await readFile(file, 'utf8')) as { recentWorkspaces?: unknown }
写入本地文件
src/server.ts:2070
await mkdir(path.dirname(recentStateFile), { recursive: true })
写入本地文件
src/server.ts:2071
await writeFile(recentStateFile, JSON.stringify({ recentWorkspaces }, null, 2), 'utf8')
读取本地文件
src/server.ts:2130
return realpath(file).catch((error: NodeJS.ErrnoException) => {
读取本地文件
src/store.ts:39
const resolved = await realpath(path.resolve(expanded)).catch(() => null)
读取本地文件
src/store.ts:41
const info = await stat(resolved)
读取本地文件
src/store.ts:65
const info = await stat(target)
写入本地文件
src/store.ts:78
await writeFile(target, source, { encoding: 'utf8', flag: 'wx' })
读取本地文件
src/store.ts:79
const info = await stat(target)
写入本地文件
src/store.ts:92
await writeFile(target, normalizeSource(source), { encoding: 'utf8', flag: 'wx' })
读取本地文件
src/store.ts:93
const info = await stat(target)
读取本地文件
src/store.ts:108
const before = await stat(target)
写入本地文件
src/store.ts:111
await writeFile(staging, normalizeSource(source), { encoding: 'utf8', flag: 'wx', mode: before.mode & 0o777 })
写入本地文件
src/store.ts:115
await utimes(staging, before.atime, modifiedAt)
写入本地文件
src/store.ts:117
await rename(staging, target)
删除本地文件
src/store.ts:119
await unlink(staging).catch((error: NodeJS.ErrnoException) => {
写入本地文件
src/store.ts:136
await writeFile(target, normalizeSource(source), { encoding: 'utf8', flag: 'wx' }).catch((error: NodeJS.ErrnoException) => {
删除本地文件
src/store.ts:186
await unlink(target)

扫描于 2026/11/4（0 天前） · 范围全包扫描 · 来源 GitHub 仓库

静态扫描只反映源码中出现的调用，不构成安全背书；人工评估与自动扫描相互独立、互不覆盖。

给这个插件打分还没有人投票↓

用户评分

还没有人投票，来当第一个

广告精选好物

飞利浦 TAH6519 主动降噪耳机 ¥299

头戴式无线 anc 主动降噪，蓝牙连接，久戴舒适向。

·anc 主动降噪 · 头戴式无线
·价格与库存以商品页实时为准

去淘宝看看→

广告MCP 兼容手册

装完插件，给 AI 接上 MCP

Cursor、Claude Code、VS Code 逐个核对：能不能装、配置怎么写、装不上是什么原因。

·按客户端逐格核对
·结论标注依据与风险等级

查 MCP 兼容性→

在 DeepSeek Harness/Codex 中创建、查看和编辑 Mermaid 图表与 Canvas 画布。

README

由 DeepSeek 最新模型翻译生成

展开完整文档（README 剩余 1 节）

Diagram Plugin

在 Codex 与 DeepSeek Harness 的对话旁，实时生成、编辑和演进 Mermaid 与 Canvas 图表。

图表以纯文本保存在项目仓库中，可读、可 diff、可版本控制。

= 22" src="https://img.shields.io/badge/Node.js-%3E%3D22-339933?logo=node.js&logoColor=white">

| 对话旁实时预览 | Canvas 可视化编辑 |

安装

| 宿主 | 当前安装方式 | 环境要求 |
| DeepSeek Harness | 插件管理中安装 npm 成品包，无需下载源码 | Desktop 0.2.1-rc.2，使用宿主自带运行时 |
| Codex | npm 一条命令安装（从 0.20.1 版本开始） | Codex Desktop、Codex CLI 0.163.0 或兼容版本、Node.js 22+ |

DeepSeek Harness

在 Desktop 的「插件 → 添加插件」中输入：

@weimin96/diagram-plugin

安装后重新打开 Desktop，即可在项目聊天标题栏打开 Diagram。npm 包已包含构建产物，无需克隆仓库、构建或单独配置 MCP 服务。

使用命令行安装

完全退出 Desktop 后，使用自带的 dsh 命令安装：

dsh plugin --profile desktop add @weimin96/diagram-plugin

完成后重新打开 Desktop。

Codex

支持 Codex Desktop 的对话侧边面板。0.20.1 及以上版本的 npm 包已内置 Codex marketplace、MCP 服务和安装器。该版本发布到 npm 后，安装了 Codex CLI 和 Node.js 22+ 的用户可以运行：

npx @weimin96/diagram-plugin@latest install --codex

安装器将 npm 包中的构建产物复制到 ~/.codex/diagram-plugin-npm/，注册 diagram-plugin-npm marketplace，再安装 diagram-plugin@diagram-plugin-npm。无需克隆源码或安装 pnpm。完成后重新打开 Codex Desktop。重复执行同一命令可更新插件；不会删除其他 marketplace。

如果此前已经从源码安装了 diagram-plugin@diagram-plugin-local，需先运行 codex plugin remove diagram-plugin@diagram-plugin-local，再安装 npm 版，避免两个来源重复注册同一套工具。

版本 0.20.0 仅支持 DeepSeek Harness 的 npm 安装，不包含上述 Codex 命令。

从源码安装

如需安装未发布的开发版本，准备好 Codex CLI、Node.js 22+ 和 pnpm 11，然后执行：

git clone https://github.com/weimin96/diagram-plugin.git
cd diagram-plugin
pnpm install
pnpm plugin:install

安装命令会自动构建插件、注册本地 marketplace，并安装 diagram-plugin@diagram-plugin-local。完成后重新打开 Codex Desktop。

如果 Codex Desktop 已经打开，也可以将最后一条命令替换为 pnpm plugin:install:desktop，安装后自动刷新宿主。

本地调试与发布流程见 开发与发布。

不要为同一个 Diagram 再配置通用 MCP 客户端，否则会出现重复工具，并可能让模型与图表面板连接到不同实例。

功能特性

- 对话伴随面板：在当前聊天右侧打开 Diagram，助手读取、创建或修改图表时面板自动跟随；支持多图标签页和跟随开关。
- 双图表引擎：结构化图使用 Mermaid，直接读写 .mmd / .mermaid；自由布局与系统架构使用 Canvas，保存为可版本控制的 .diagram.json。
- 19 种 Mermaid 图表：覆盖流程图、时序图、思维导图（脑图）、类图、ER 图、状态图、甘特图、时间线、Git 分支图、用户旅程、四象限、看板、需求图、桑基图、XY 图、饼图、雷达图、矩形树图和鱼骨图。
- 3 种 Canvas 工作台：架构画布、流程画布和自由画布，分别面向系统拓扑、手工流程和白板草图。
- AI 可读可改：通过 MCP 工具按需读取图表；修改先生成可审查的 Proposal Diff，支持部分接受、A/B 候选与字段级并发 rebase。
- 安全可回溯：保存时检查文件 revision，采用原子写入；AI 修改拥有独立历史和依赖 DAG，可按子图撤销与重做。
- 架构设计系统：自动分区、语义配色、角色与云厂商图标、C4 语义、正交连线路由和 12 套可切换的共享视觉样式。
- 代码与图联动：节点可绑定真实源码文件，支持按源码反查节点、批量同步模块节点，以及将 Git 改动映射为架构影响分析。
- 完整编辑器：CodeMirror 源码编辑、实时预览、缩放平移、多选/框选、对齐分布、分组与泳道、MiniMap、图层顺序和 SVG / PNG 导出。
- 本地优先：不依赖云端服务，所有图表默认保存在项目的 docs/diagrams/ 中。

支持的图表

共支持 3 种 Canvas 画布工作台与 19 种 Mermaid 图表。每种 Mermaid 类型都有独立的构图原型、密度策略与质量检查规则。

Canvas 画布

| 工作台 | 适用场景 | 文件格式 |
| 架构画布 | 系统 / 服务 / 模块拓扑、C4 Context / Container / Component、服务拓扑、事件与数据流、部署视图 | .diagram.json |
| 流程画布 | 手动排版的业务流程、审批链与决策流 | .diagram.json |
| 自由画布 | 白板、草图、任意布局与说明图 | .diagram.json |

架构画布内置系统架构、C4 系统上下文、C4 容器、C4 组件、服务拓扑、事件与数据流等生成预设。

架构画布还内置角色与技术语义、命名分区、C4 容器、云厂商图标和正交连线路由，可用 diagram.beautifyArchitecture 一键整理。

Mermaid 图表

结构化图表直接读写 .mmd / .mermaid 文件。

核心结构

| 图表 | 适用场景 |
| 流程图 Flowchart | 业务流程、分支判断、审批与决策链 |
| 时序图 Sequence | API 调用顺序、服务协作、MQ 交互 |
| 思维导图 Mindmap（脑图） | 知识拆解、功能地图、方案发散 |
| 类图 Class | 类、接口、继承 / 实现 / 组合关系 |
| ER 图 ER | 数据实体、字段、主外键与表关系 |
| 状态图 State | 生命周期、状态机、状态流转 |
| 甘特图 Gantt | 项目排期、阶段依赖与里程碑 |
| 时间线 Timeline | 历史演进、版本里程碑 |

分析与规划

| 图表 | 适用场景 |
| Git 分支图 Git Graph | 分支、提交与合并策略 |
| 用户旅程 Journey | 用户触点、体验阶段与情绪 |
| 四象限图 Quadrant | 二维优先级、定位与取舍 |
| 看板 Kanban | 任务状态与工作流可视化 |
| 需求关系图 Requirement | 需求到实现、验证的追踪关系 |

数据可视化

| 图表 | 适用场景 |
| 桑基图 Sankey | 可加总的流量、转化与去向 |
| XY 图表 XY Chart | 柱状 / 折线趋势与指标对比 |
| 饼图 Pie | 单一总体内的占比 |
| 雷达图 Radar | 同尺度多维评分对比 |
| 矩形树图 Treemap | 层级面积构成 |

专业分析

| 图表 | 适用场景 |
| 鱼骨图 Ishikawa | 根因分析、问题归因 |

数据类图表只使用真实数据或用户明确给出的示意数据，不要为图形效果编造数值。

内置类型聚焦上表 19 种。Mermaid 的 C4、architecture-beta、block-beta、packet-beta 等扩展语法没有专门的构图规则与质量检查；架构类需求请使用 Canvas 架构画布。

使用

1. 在 Codex 或 DeepSeek Harness 中打开一个项目聊天。
2. 从聊天标题栏打开 Diagram，或直接对助手说「打开右侧画板」。
3. 用自然语言描述需求，助手会创建或修改图表，右侧面板自动跟随。

一些常见指令：

根据 src/ 生成系统架构图，使用架构画布把登录流程画成时序图检查当前图的布局，减少连线交叉给支付服务补充异常分支，并先给我看 Diff

对已有图的修改默认先生成 Proposal，只有接受后才会写入磁盘。需要批量浏览、导出或完整分屏编辑时，打开全局 Diagram 图表库。

图表默认保存到当前项目：

docs/diagrams/
├── login-flow.mmd
├── system-architecture.diagram.json
└── exports/
└── system-architecture.png

常用操作

| 目标 | 操作方式 |
| 新建图表 | 对助手描述需求，或在图表库中点击新建 |
| 修改已有图 | 选中节点/区域后点击「调整选中」，或直接描述修改要求 |
| 审查 AI 修改 | 在右侧 Proposal 面板查看 Diff，接受、拒绝或切换 A/B 候选 |
| 绑定源码 | Canvas 节点 Inspector → 源码文件，搜索并绑定真实路径 |
| 查看影响范围 | 选中节点后追踪上游/下游，或分析当前 Git 改动的影响 |
| 导出 | 预览右上角导出 SVG 或 2x PNG，默认进入 docs/diagrams/exports/ |

MCP 工具

Diagram 以 MCP Server 形式运行，模型与图表面板共享同一个服务实例。暴露给模型的常用工具如下（在 DeepSeek Harness 中注册为 diagram_create 等下划线形式）：

| 能力 | 工具 |
| 打开面板 | diagram.thread |
| 读取与创建 | diagram.list · diagram.get · diagram.getSubgraph · diagram.create |
| 更新与审查 | diagram.update · diagram.proposeUpdate · diagram.proposeSubgraphPatch · diagram.composeProposalBranches |
| 设计辅助 | diagram.designGuide · diagram.searchArchitectureTemplates · diagram.inspectQuality · diagram.beautifyArchitecture · diagram.routeArchitectureEdges |
| 源码与影响分析 | diagram.findBySource · diagram.upsertSourceNode · diagram.upsertSourceNodes · diagram.gitChanges · diagram.impactFromGit |
| 历史与依赖 | diagram.patchGraph |

其余工具中，Proposal 接受/拒绝、Patch 撤销重做、导出与图片资源等仅供图表面板调用，不会暴露给模型；完整工具列表以 MCP listTools 返回为准。

已知限制

- Canvas 聚焦架构草图与流程场景，暂不包含手绘压感、图片批注和多人实时协作。
- 宿主目前没有公开「当前活动编辑器文件 / 代码选区」的读取接口，生成图表时需从工作区选择文件或目录。
- DeepSeek Harness 已在 macOS 完成原生验收；Windows、Linux 与其他宿主版本尚未验证。

开发

pnpm install
pnpm typecheck
pnpm test
pnpm build
pnpm smoke
pnpm check:hosts

视觉验收：

pnpm visual:verify

架构说明、本地调试、打包发布和宿主适配细节见 开发与发布。

贡献

欢迎提交 Issue 和 Pull Request。提交前请至少运行：

pnpm typecheck && pnpm test && pnpm build

开源协议

本项目基于 MIT License 开源，Copyright © 2026 weimin96。

第三方图标与资源声明见 THIRD_PARTY_NOTICES.md。