代码和图编辑器技术调研

代码编辑器

技术选型：

在线代码编辑器： CodePen、CodeSanbox、JSFiddle
开源框架/库：CodeMirror5

图编辑器

开源框架/库：

• LogicFlow 底层依赖 svg
• AntV G6 自定义需求强、中等数据
  • 交互方面缩放 友好（采用脏矩形渲染机制、矩阵 scale 算法）✨
  • 适合复杂定制 ✨
• Sigma.js 简单样式、海量数据
  • 平均，基本上不会有卡顿
  • 动作上有缓入缓出机制，隐藏了一些不自然的帧来达到流畅
  • 适合简单交互、数据量大的场景
• vis-network 对定制化和包大小有要求、功能模块化裁剪、场景友好
  • 大数据交互下不太友好，有明显卡顿感
  • 完善的模块化机制

    X6 与 G6 的区别：
    X6 是图编辑引擎，特点是节点、边、等元素的定制能力非常强，经常用来构建流程图、ER 图、DAG 图、脑图等应用。G6 和 X6 是孪生兄弟，G6 更擅长于图可视化和图分析领域。