跳到主要内容

AgileJS Graph

一个轻量级、零依赖的 Canvas 可视化引擎

快速开始在线Demo

极致轻量

  • 纯 Canvas 内核,不依赖任何第三方渲染库;
  • 采用模块化结构与独立渲染器/插件注册机制,可按需裁剪功能;
  • 节点与边的快照及 Path2D 结果缓存减少重复计算,在中大型场景下降低绘制开销。

深度可定制

  • 统一的 Graph 数据模型、RendererRegistry 与 PluginManager 构成扩展主干;
  • 节点、锚点、连线样式、交互策略及序列化协议均可在不修改内核的情况下增量扩展;
  • 命令历史与事件总线支持撤销/重做、操作追踪以及构建回放与审计能力。

高性能渲染

  • 通过视口裁剪、可选四叉树空间索引、离屏边快照层以及 Path2D/图像缓存等手段降低无效绘制;
  • 拖拽、平移及大规模场景下基于阈值的条件降质策略(跳过边与标签)保障交互帧率;
  • 可结合命令历史调试快照与自定义采样扩展性能分析。
undraw_online-test_cqv0

数据驱动与动效

  • 支持基于数据的节点/边属性驱动,实现声明式动画效果;
  • 内置平滑过渡、缓动函数及关键帧插值,轻松构建流动的连线与动态拓扑;
  • 支持节点闪烁、流动虚线等视觉增强,提升图表的信息表达力
  • 支持移动端渲染和部分编辑场景。

工程级稳定性

  • 插件、渲染器、命令三层均采用可插拔设计;
  • 插件暴露 setup、dispose、beforeRender、render*、afterRender 钩子以明确侧效应边界;
  • Graph 序列化配合 CommandHistory 使状态持久化与协作审计可实现;
  • 内置选择、框选、连接、缩放/平移、网格吸附、参考线、剪贴板、图像、最小地图、文本内联编辑等常用功能。
banner01

生态兼容性

  • 仅依赖标准 DOM 与 Canvas,可在 React、Vue、Angular 中封装为受控组件并接入 Zustand、MobX 等状态管理;
  • 支持嵌入 Electron 与 WebView;
  • 纯 Node 场景可通过 DOM 适配层接入。