近日，JavaScript图表库DHTMLX Diagram6.1 正式版本。本次版本更新带来了全新的 PERT 可视化模式，并在无代码/低代码流程图编辑体验方面实现了更高的灵活性与可控性。同时，Diagram 编辑器在快捷键管理与图形交互控制上也迎来了多项重要增强。
DHTMLX Diagram 最新版官方试用下载
全新 PERT 模式：让项目规划更清晰
什么是 PERT 模式？
DHTMLX Diagram6.1 新增的PERT（计划评审技术）模式，为 Web 应用提供了一种更加专业、高效的方式来构建 PERT 图。
PERT 图通常用于：
展示项目任务之间的先后关系与依赖关系
分析关键路径
评估整体项目周期与风险
通过清晰的结构化可视化，项目管理人员可以更快速地理解项目全貌，辅助决策。
PERT 图与甘特图数据同步，项目管理更完整
此次新增的 PERT 模式，并不是孤立存在的可视化形态，而是DHTMLX Gantt 甘特图的强力补充。
PERT 图：适用于项目早期规划阶段，关注任务逻辑与依赖
甘特图：适用于执行阶段，关注时间轴、进度与资源跟踪
通过Diagram + Gantt 的数据结构统一与同步机制，开发者可以在同一套数据源下，实现两种视图的无缝切换，帮助项目经理从不同维度全面掌控项目进展。
👉 非常适合应用于：
工程项目管理 / 研发项目管理 / 制造业项目排程 / IT 项目管理系统
从开发者视角看 PERT 模式的价值
在此前版本中，开发者虽然也可以通过 Diagram 默认模式手动构建 PERT 图，但往往需要：
自定义图形模板
手动布局与排列
处理复杂的节点组织逻辑
而PERT 模式的推出，正是为了解决这一“高成本可视化”问题：
内置PERT 专用布局算法
提供预定义的 PERT 图形元素
简化配置与数据准备流程
让开发者可以更快、更规范地构建专业级 PERT 图。
如何启用 PERT 模式？
在 Diagram 初始化时，只需指定新增的type: "pert"配置即可：
const diagram = new dhx.Diagram("diagram_container", { type: "pert", }); diagram.data.parse(dataset);同时，PERT 模式支持通过typeConfig中的dateFormat参数，灵活控制界面中的日期显示格式。
特别说明：
PERT 模式的数据结构与DHTMLX Gantt 完全一致，这是实现 Diagram 与 Gantt 数据同步的关键基础。
内置 PERT 图形元素，一应俱全
DHTMLX Diagram 的 PERT 模式默认包含三类核心元素：
1️⃣ 任务（Task）
表示具体项目任务
支持开始时间、结束时间、工期等信息
2️⃣ 里程碑（Milestone）
表示关键节点
无持续时间，仅标识关键事件
3️⃣ 项目组（Project Group）
作为任务与里程碑的容器
支持嵌套与可视化分组
在数据配置层面，任务与里程碑继承 Diagram 组件中其他内置图形的通用属性，而项目组则具备完整的分组能力，部分属性可在渲染时自动生成。
强大的自定义能力，PERT 模式同样适用
延续 DHTMLX 一贯的高可扩展性，PERT 模式同样支持丰富的定制化能力，包括但不限于：
自定义搜索栏
自定义 PERT 图形样式
定制主题风格
自定义侧边栏与交互面板
无论是企业级系统集成，还是面向最终用户的产品化应用，都可以灵活适配 UI 与业务需求。
Diagram 编辑器增强：快捷键与交互控制更灵活
快捷键（Hotkeys）精细化管理
从 6.1 版本开始，Diagram Editor 新增hotkeys配置项，开发者可以：
完全禁用所有快捷键
禁用指定快捷键
重写快捷键行为，或新增自定义快捷键
这对于需要统一交互规范或限制用户操作行为的企业级应用尤为重要。
图形交互控制更细粒度
在以往版本中，fixed: true只能“一刀切”地禁止移动、缩放和旋转。
6.1 版本新增了一组更精细的事件机制，可分别控制：
缩放前 / 后
旋转前 / 后
操作结束时的业务校验逻辑
帮助开发者更精准地约束用户行为，满足复杂业务场景。
更多示例与 Demo 同步上线
本次更新还同步发布了多项示例资源，包括：
DHTMLX Diagram 组织架构图 AI Builder Demo
PERT 模式完整示例
鱼骨图示例
交互式电气原理图
PDF / PNG 导出水印示例
进一步拓展 Diagram 在智能可视化领域的应用边界。
慧都总结
DHTMLX Diagram6.1 虽然是一次“小版本”更新，但在项目管理可视化能力和编辑器可控性方面带来了实质性的提升。尤其是PERT 模式 + Gantt 甘特图的组合方案，非常适合构建专业级项目管理系统。
