docs: update concepts

apps/docs/src/zh/api/core/flow-document.mdx

@@ -40,7 +40,7 @@ useEffect(() => {
 }, [])
 ```
 
-### renderTree
+## renderTree
 
 画布渲染时的节点树，为了提升性能，渲染的树会随着节点分支折叠而变化，并非真实的树
 

apps/docs/src/zh/guide/_meta.json

@@ -14,6 +14,5 @@
     "type": "dir",
     "name": "concepts",
     "label": "概念"
-  },
-  "qa"
+  }
 ]

apps/docs/src/zh/guide/concepts/_meta.json

@@ -3,5 +3,6 @@
   "node-engine",
   "variable-engine",
   "ECS",
-  "IOC"
+  "IOC",
+  "reactflow"
 ]

apps/docs/src/zh/guide/concepts/canvas-engine.mdx

@@ -1,3 +1,172 @@
+
 # 画布引擎
 
-TODO
+画布引擎底层会提供一套自己的坐标系, 主要由 Playground 驱动
+
+```ts
+interface Playground {
+   node: HTMLDivElement // 画布挂载的dom节点
+   toReactComponent() // 渲染为react 节点
+   readonly: boolean // 只读模式
+   config: PlaygroundConfigEntity // 包含 zoom，scroll 等画布数据
+}
+// hook 快速获取
+const { playground } = useClientContext()
+```
+
+## Layer
+
+:::warning P.S.
+- 渲染层在底层建立了一套自己的坐标系，基于这个坐标系实现模拟滚动、缩放等逻辑，在算viewport时候节点也需要转换到该坐标系上
+- 渲染按画布被拆分成多个层 (Layer)，分层设计是基于ECS的数据切割思想，不同 Layer 只监听自己想要的数据，独立渲染不干扰，Layer 可以理解为ECS的 System，即最终Entity数据消费的地方
+- Layer 实现了类mobx的observer响应式动态依赖收集，数据更新会触发 autorun或render
+
+:::
+
+![切面编程](@/public/layer-uml.jpg)
+
+- Layer 生命周期
+
+```ts
+interface Layer {
+    /**
+     * 初始化时候触发
+     */
+    onReady?(): void;
+
+    /**
+     * playground 大小变化时候会触发
+     */
+    onResize?(size: PipelineDimension): void;
+
+    /**
+     * playground focus 时候触发
+     */
+    onFocus?(): void;
+
+    /**
+     * playground blur 时候触发
+     */
+    onBlur?(): void;
+
+    /**
+     * 监听缩放
+     */
+    onZoom?(scale: number): void;
+
+    /**
+     * 监听滚动
+     */
+    onScroll?(scroll: { scrollX: number; scrollY: number }): void;
+
+    /**
+     * viewport 更新触发
+     */
+    onViewportChange?(): void;
+
+    /**
+     * readonly 或 disable 状态变化
+     * @param state
+     */
+    onReadonlyOrDisabledChange?(state: { disabled: boolean; readonly: boolean }): void;
+
+    /**
+   * 数据更新自动触发react render，如果不提供则不会调用react渲染
+   */
+    render?(): JSX.Element
+ }
+```
+
+Layer的定位其实和 Unity 游戏引擎 提供的 [MonoBehaviour](https://docs.unity3d.com/ScriptReference/MonoBehaviour.html) 类似， Unity 游戏引擎的脚本扩展都是基于这个，可以认为是最核心的设计，底层也是基于 C# 提供的反射 (Reflection) 能力的依赖注入
+
+```C#
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+public class MyMonoBehavior : MonoBehaviour
+{
+    void Awake()
+    {
+        Debug.Log("Awake method is always called before application starts.");
+    }
+    void Start()
+    {
+        Debug.Log("Start method is always called after Awake().");
+    }
+    void Update()
+    {
+        Debug.Log("Update method is called in every frame.");
+    }
+}
+```
+
+- Layer 的响应式更新
+
+```ts
+export class DemoLayer extends Layer {
+    // 任意的inversify模块 的注入
+    @inject(FlowDocument) document: FlowDocument
+    // 监听单个Entity
+    @observeEntity(SomeEntity) entity: SomeEntity
+    // 监听多个Entity
+    @observeEntities(SomeEntity) entities: SomeEntity[]
+    // 监听 Entity的数据块（ECS - Component）变化
+    @observeEntityDatas(SomeEntity, SomeEntityData) transforms: SomeEntityData[]
+    autorun() {}
+    render() {
+      return <div></div>
+    }
+}
+```
+
+## FlowNodeEntity
+- 节点是一颗树，在自由画布模式，则节点是扁平的，无子节点
+```ts
+inteface FlowNodeEntity {
+    id： string
+    children？: FlowNodeEntity[]
+    pre?: FlowNodeEntity
+    next?: FlowNodeEntity
+    parent?: FlowNodeEntity
+    collapsed: boolean // 是否展开
+    getData(dataRegistry): NodeEntityData
+    addData(dataRegistry)
+}
+```
+
+## 2.4.4 FlowNodeTransformData 节点的bbox
+
+```ts
+class FlowNodeTransformData {
+    localTransform: Matrix, // 相对偏移, 只相对于同一个Block的上一个Sibling节点的偏移
+    worldTransform: Matrix, // 绝对偏移, 相对于Parent和Sibling节点叠加后的偏移
+    delta：Point // 居中居左偏移, 和Matrix独立，每个节点自己控制
+    getSize(): Size, // 由自己(独立节点) 或者 子分支节点宽高间距计算得出
+    getBounds(): Rectangle // 由worldMatix及 size 计算得出, 用于最终渲染，该范围也可用于确定高亮选中区域
+    inputPoint(): Point // 输入点位置，一般是Block的第一个节点的中上位置(居中布局)
+    outputPoint(): Point // 输出点位置，默认是节点中下位置，但条件分支，是由内置结束节点等具体逻辑判断得出
+}
+```
+
+## FlowNodeRenderData 节点内容渲染数据
+
+```ts
+class FlowNodeRenderData {
+  node: HTMLDivElement // 当前节点的dom
+  expanded：boolean // 是否展开
+  activated： boolean // 是否激活
+  hidden： boolean // 是否隐藏
+}
+```
+
+## FlowDocument
+
+```ts
+interface FLowDocument {
+    root: FlowNodeEntity // 画布的根节点
+    fromJSON(data): void // 导入数据
+    toJSON(): FlowDocumentJSON // 导出数据
+    addNode(type: string, meta: any): FlowNodeEntity // 添加节点
+    travese(fn: (node: flowNodeEntity) => void, startNode = this.root) // 遍历
+}
+```

apps/docs/src/zh/guide/concepts/ecs.mdx

@@ -1 +1,151 @@
 # ECS
+
+![切面编程](@/public/weaving.png)
+
+理想的切面编程
+
+```ts
+- myAppliation 提供业务逻辑
+  - service 特定的业务逻辑服务
+     - customDomainLogicService
+  - contributionImplement 钩子的注册实例化
+    - MyApplicationContributionImpl
+  - component 业务组件
+
+- core 提供通用逻辑
+  - model 通用模型
+  - contribution 钩子接口
+     - LifecycleContribution 应用的生命周期
+     - CommandContribution
+  - service 公用的service的服务
+     - CommandService
+     - ClipboardService
+  - component 公用的组件
+  ```
+
+  ```ts
+  // IOC 的注入
+@injectable()
+export class CustomDomainLogicService {
+  @inject(FlowContextService) protected flowContextService: FlowContextService;
+  @inject(CommandService) protected commandService: CommandService;
+  @inject(SelectionService) protected selectionService: SelectionService;
+}
+// IOC 的接口声明
+interface LifecycleContribution {
+   onInit(): void
+   onStart(): void
+   onDispose(): void
+}
+// IOC 的接口实现
+@injectable()
+export class MyApplicationContributionImpl implement LifecycleContribution {
+    onStart(): void {
+      // 特定的业务逻辑代码
+    }
+}
+
+// 手动挂在到生命周期钩子
+bind(LifecycleContribution).toService(MyApplicationContributionImpl)
+```
+
+
+:::warning IOC是切面编程的一种手段，引入后，底层模块可以以接口形式暴露给外部注册，带来的好处：
+- 实现微内核 + 插件化的设计，实现插件的可插拔按需消费
+- 可以让包拆得更干净，实现 feature 式的拆包
+
+:::
+
+## 为什么需要 ECS
+
+:::warning ECS （Entity-Component-System）
+适合解耦大的数据对象，常用于游戏，游戏的每个角色（Entity）数据都非常庞大，需要拆分成如物理引擎相关数据、皮肤相关、角色属性等 (多个 Component)，供不同的子系统（System）消费。流程的数据结构复杂，很适合用ECS做拆解
+
+:::
+
+![ECS](@/public/ecs.png)
+
+ReduxStore 伪代码
+```jsx pure
+const store = () => ({
+  nodes: [{
+    position: any
+    form: any
+    data3: any
+
+  }],
+  edges: []
+})
+
+function Playground() {
+  const { nodes } = useStore(store)
+
+  return nodes.map(node => <Node data={node} />)
+}
+```
+优点：
+- 中心化数据管理使用简单
+
+缺点：
+- 中心化数据管理无法精确更新，带来性能瓶颈
+- 扩展性差，节点新增一个数据，都耦合到一个 大JSON 里
+
+ECS 方案
+备注：
+- NodeData 对应的是 ECS - Component
+- Layer 对应 ECS - System
+```jsx pure
+class FlowDocument {
+dataDefines: [
+  NodePositionData,
+  NodeFormData,
+  NodeLineData
+]
+nodeEntities: Entity[] = []
+}
+
+
+class Entity {
+id: string // 只有id 不带数据
+getData: (dataId: string) => EntityData
+}
+
+// 渲染线条
+class LinesLayer {
+@observeEntityData(NodeLineData) lines
+render() {
+  return lines.map(line => <Line data={line} />)
+}
+}
+
+// 渲染节点位置
+class NodePositionsLayer {
+@observeEntityData(NodePositionData) positions
+return() {
+
+}
+}
+
+// 渲染节点表单
+class  NodeFormsLayer {
+  @observeEntityData(NodeFormData) contents
+return() {}
+}
+
+class Playground {
+layers: [
+  LinesLayer, // 线条渲染
+  NodePositionsLayer, // 位置渲染
+  NodeFormsLayer // 内容渲染
+]，
+render() {
+  return this.layers.map(layer => layer.render())
+}
+}
+```
+优点：
+- 节点数据拆开来单独控制渲染，性能可做到精确更新
+- 扩展性强，新增一个节点数据，则新增一个 XXXData + XXXLayer
+
+缺点：
+- 有一定学习成本

apps/docs/src/zh/guide/concepts/node-engine.mdx

@@ -1,3 +1,30 @@
 # 节点引擎
 
-TODO
+节点引擎 NodeEngine 是一个流程节点逻辑的书写框架，让业务专注于业务自身的渲染与数据逻辑，无需关注画布以及节点间联动的底层api。与此同时，节点引擎沉淀了最佳的节点书写范式，帮助业务解决流程业务中可能遇到的各种问题， 如数据逻辑与渲染耦合等。
+节点引擎是可选启用的。如果你不存在以下这些复杂的节点逻辑，可以选择不启用节点引擎，自己维护节点数据与渲染。复杂节点逻辑如：1）节点不渲染也能校验或触发数据副作用；2）节点间联动丰富；3）redo/undo; 等等。
+
+# 基础概念
+
+FlowNodeEntity
+流程节点模型。
+
+FlowNodeRegistry
+流程节点的静态配置。
+
+FormMeta
+节点引擎的静态配置。 配置在 FlowNodeRegistry 中的 formMeta 字段。
+
+Form
+节点引擎中的表单。它维护节点的数据并提供渲染、校验、副作用等能力。他的模型 FormModel 提供节点数据的访问和修改及触发校验等能力。
+
+Field
+节点表单中的某个渲染字段。注意， Form 已经提供了数据层的逻辑，Field 更多是一个渲染层的模型，它尽在表单字段渲染后才存在。
+
+validate
+表单校验。通常有对单个字段的校验也有整体表单校验。
+
+effect
+表单数据的副作用。通常指在表单数据发生一些事件时要触发特定逻辑。 如在某字段的数据变更时要同步一些信息到某个store，这个可以被称为一个effect。
+
+FormPlugin
+表单插件。可以配置在formMeta 中，插件可以对表单进行一系列深度操作。如变量插件。

apps/docs/src/zh/guide/concepts/reactflow.mdx

@@ -0,0 +1,38 @@
+
+# 对比 ReactFlow
+
+[Reactflow](https://reactflow.dev/) 是很优秀的开源项目，架构及代码清晰，但偏流程渲染引擎的底层架构 (Node、Edge、Handle)，需要在上层开发大量功能才能适配复杂场景(如 固定布局，需要对数据建模写布局算法), 高级功能收费。
+
+相比 Reactflow，FlowGram 的目标是提供流程编辑一整套开箱即用的解决方案, 也会专门解决产品中的使用体验问题。
+
+- 下边是 Reactflow 官方提供的 pro 收费能力
+
+| 付费功能                         | FlowGram 是否支持 | 未来计划支持 |
+|----------------------------------|------------------------|--------------|
+| 分组                             | 支持                   |              |
+| redo/undo                        | 支持                   |              |
+| copy/paste                       | 支持                   |              |
+| HelpLines 辅助线                | 支持                   |              |
+| 自定义节点及形状                 | 支持                   |              |
+| 自定义线条                       | 支持                   |              |
+| AutoLayout，自动布局整理         | 支持                   |              |
+| ForceLayout，节点排斥效果        | 不支持                 | No           |
+| Expand/Collapse                  | 支持                   |              |
+| Collaborative 多人协同           | 不支持                 | Yes          |
+| WorkflowBuilder 相当于固定布局完整案例 | 支持                   |              |
+
+- Reactflow 事件都是绑定在原子化的 dom 节点上，且内置，交互定制成本高，需要理解它的源码才能深度开发，如下，在画布缩放很小时候无法选到点位
+
+<table>
+  <tr>
+    <td>
+      <div className="rs-tip">由于 事件是绑定在 svg 上，svg 在缩放后很容易点不到</div>
+      <img src="@/public/reactflow/reactflow-render.gif"/>
+    </td>
+    <td>
+      <div className="rs-tip">FlowGram 的事件是一种全局监听 mousemove 变化，并通过计算及 Threshold  大致确定位置，即使缩放很小也能点到, 同时支持线条重连</div>
+      <img src="@/public/reactflow/reactflow-interaction.gif"/>
+    </td>
+  </tr>
+</table>
+

apps/docs/src/zh/guide/concepts/variable-engine.mdx

@@ -1,3 +1,86 @@
 # 变量引擎
 
-TODO
+## 整体设计
+
+### 架构分层
+
+:::warning 架构分层
+变量引擎设计上遵循 DIP（依赖反转）原则，按照 代码稳定性、抽象层次 以及和 业务的远近 分为三层：
+- 变量抽象层：变量架构中抽象层次最高，代码也最为稳定的部分
+- 变量实现层：变量架构中变动较大，不同业务之间通常存在调整的部分
+- 变量业务层：变量架构中提供给业务的 Facade ，与画布引擎、节点引擎联动的部分
+
+:::
+
+![架构分层图](@/public/variable-engine.png)
+
+
+### 术语表
+
+#### 🌟 作用域（Scope）
+:::warning ⭐️⭐️⭐️ 定义：
+一种约定的空间，空间内 通过 AST 来描述变量声明和消费情况
+- 约定的空间：空间是什么，完全由业务定义
+- 在低代码设计态中，可以是一个节点、一个组件、一个右侧面板...
+- 在一段代码中，可以是一行 Statement、一段代码块、一个函数、一个文件...
+
+:::
+
+作用域的空间是什么？可以由不同的业务来划定。
+
+
+#### 🌟 抽象语法树（AST）
+
+:::warning 定义：
+⭐️⭐️⭐️ 一种协议，通过树的形式，组合 AST 节点，实现对变量信息的显式/隐式 CRUD
+- AST 节点：AST 中可响应式的协议节点
+- 显式 CRUD，如：业务显示设定一个变量的变量类型
+- 隐式 CRUD，如：业务声明一个变量，变量会根据其初始化参数自动推导变量类型
+
+:::
+
+:::warning 作用域里面的变量、类型、表达式、结构体 等等变量信息... 本质上都是 AST 节点的组合
+- 变量 -> VariableDeclaration 节点
+- 表达式 -> Expression 节点
+- 类型 -> TypeNode 节点
+- 结构体 -> StructDeclaration 节点
+
+:::
+
+参考链接：https://ts-ast-viewer.com/
+
+#### 变量（Variable）
+
+:::warning 定义：
+一种用于声明新变量的 AST 节点，通过唯一标识符 指向一个 在特定集合范围内变动的值
+- 在特定集合范围内变动的值：变量的值必须在 变量类型 描述的范围内
+- 唯一标识符：变量必须有一个唯一的 Key 值
+
+:::
+
+[JavaScript中的变量，唯一 Key + 指向一个变动的值](@/public/variable-code.png)
+
+#### 变量类型（Variable Type）
+
+:::warning 定义：
+⭐️⭐️⭐️ 一种 AST 节点，用于约束一个变量，被约束的变量值只能在预先设定的集合范围内变动
+- 一个变量可以绑定一个变量类型
+
+:::
+<table>
+  <tr>
+    <td><img src="@/public/variable-type1.png"/></td>
+    <td><img src="@/public/variable-type2.png"/></td>
+  </tr>
+</table>
+
+### 变量引擎的形象理解
+
+:::warning 想像这样一个变量引擎的世界：
+- 通过一个个 作用域 来划定出一个个 国家
+- 每个国家包含三大公民：声明、类型、表达式
+- 国家与国家之间通过 作用域链 来实现交流
+
+:::
+
+![图解](@/public/varaible-zone.png)

apps/docs/src/zh/guide/index/_meta.json

@@ -1,3 +0,0 @@
-[
-  "introduction"
-]

apps/docs/src/zh/guide/index/canvas-engine/_meta.json

@@ -1,3 +0,0 @@
-[
-  "index"
-]

apps/docs/src/zh/guide/index/canvas-engine/index.mdx

@@ -1,177 +0,0 @@
-
-# 核心建模
-
-Playground 底层会提供一套坐标系
-
-```ts
-interface Playground {
-   node: HTMLDivElement // 画布挂载的dom节点
-   scrollToView({
-     entities?: Entity[] // 指定节点
-     easing?: boolean // 开启缓动
-     bounds?: Reactangle // 指定到特定的bbox位置
-    }) // 让画布缓慢滚动到某个特定节点并居中
-   toReactComponent() // 渲染为react 节点
-   readonly: boolean // 只读模式
-   config: PlaygroundConfigEntity // 包含 zoom，scroll 等画布数据
-}
-// hook 快速获取
-const playground = usePlayground()
-```
-
-## Layer
-
-:::warning P.S.
-- 渲染层在底层建立了一套自己的坐标系，基于这个坐标系实现模拟滚动、缩放等逻辑，在算viewport时候节点也需要转换到该坐标系上
-- 渲染按画布被拆分成多个层 (Layer)，分层设计是基于ECS的数据切割思想，不同 Layer 只监听自己想要的数据，独立渲染不干扰，Layer 可以理解为ECS的 System，即最终Entity数据消费的地方
-- Layer 实现了类mobx的observer响应式动态依赖收集，数据更新会触发 autorun或render
-
-:::
-
-![切面编程](../assets/layer-uml.jpg)
-
-- Layer 生命周期
-
-```ts
-interface Layer {
-    /**
-     * 初始化时候触发
-     */
-    onReady?(): void;
-
-    /**
-     * playground 大小变化时候会触发
-     */
-    onResize?(size: PipelineDimension): void;
-
-    /**
-     * playground focus 时候触发
-     */
-    onFocus?(): void;
-
-    /**
-     * playground blur 时候触发
-     */
-    onBlur?(): void;
-
-    /**
-     * 监听缩放
-     */
-    onZoom?(scale: number): void;
-
-    /**
-     * 监听滚动
-     */
-    onScroll?(scroll: { scrollX: number; scrollY: number }): void;
-
-    /**
-     * viewport 更新触发
-     */
-    onViewportChange?(): void;
-
-    /**
-     * readonly 或 disable 状态变化
-     * @param state
-     */
-    onReadonlyOrDisabledChange?(state: { disabled: boolean; readonly: boolean }): void;
-
-    /**
-   * 数据更新自动触发react render，如果不提供则不会调用react渲染
-   */
-    render?(): JSX.Element
- }
-```
-
-Layer的定位其实和 Unity 游戏引擎 提供的 [MonoBehaviour](https://docs.unity3d.com/ScriptReference/MonoBehaviour.html) 类似， Unity 游戏引擎的脚本扩展都是基于这个，可以认为是最核心的设计，底层也是基于 C# 提供的反射 (Reflection) 能力的依赖注入
-
-```C#
-using System.Collections;
-using System.Collections.Generic;
-using UnityEngine;
-public class MyMonoBehavior : MonoBehaviour
-{
-    void Awake()
-    {
-        Debug.Log("Awake method is always called before application starts.");
-    }
-    void Start()
-    {
-        Debug.Log("Start method is always called after Awake().");
-    }
-    void Update()
-    {
-        Debug.Log("Update method is called in every frame.");
-    }
-}
-```
-
-- Layer 的响应式更新
-
-```ts
-export class DemoLayer extends Layer {
-    // 任意的inversify模块 的注入
-    @inject(FlowDocument) document: FlowDocument
-    // 监听单个Entity
-    @observeEntity(SomeEntity) entity: SomeEntity
-    // 监听多个Entity
-    @observeEntities(SomeEntity) entities: SomeEntity[]
-    // 监听 Entity的数据块（ECS - Component）变化
-    @observeEntityDatas(SomeEntity, SomeEntityData) transforms: SomeEntityData[]
-    autorun() {}
-    render() {
-      return <div></div>
-    }
-}
-```
-
-## FlowNodeEntity
-- 节点是一颗树，在自由画布模式，则节点是扁平的，无子节点
-```ts
-inteface FlowNodeEntity {
-    id： string
-    children？: FlowNodeEntity[]
-    pre?: FlowNodeEntity
-    next?: FlowNodeEntity
-    parent?: FlowNodeEntity
-    collapsed: boolean // 是否展开
-    getData(dataRegistry): NodeEntityData
-    addData(dataRegistry)
-}
-```
-
-## 2.4.4 FlowNodeTransformData 节点的bbox
-
-```ts
-class FlowNodeTransformData {
-    localTransform: Matrix, // 相对偏移, 只相对于同一个Block的上一个Sibling节点的偏移
-    worldTransform: Matrix, // 绝对偏移, 相对于Parent和Sibling节点叠加后的偏移
-    delta：Point // 居中居左偏移, 和Matrix独立，每个节点自己控制
-    getSize(): Size, // 由自己(独立节点) 或者 子分支节点宽高间距计算得出
-    getBounds(): Rectangle // 由worldMatix及 size 计算得出, 用于最终渲染，该范围也可用于确定高亮选中区域
-    inputPoint(): Point // 输入点位置，一般是Block的第一个节点的中上位置(居中布局)
-    outputPoint(): Point // 输出点位置，默认是节点中下位置，但条件分支，是由内置结束节点等具体逻辑判断得出
-}
-```
-
-## FlowNodeRenderData 节点内容渲染数据
-
-```ts
-class FlowNodeRenderData {
-  node: HTMLDivElement // 当前节点的dom
-  expanded：boolean // 是否展开
-  activated： boolean // 是否激活
-  hidden： boolean // 是否隐藏
-}
-```
-
-## FlowDocument
-
-```ts
-interface FLowDocument {
-    root: FlowNodeEntity // 画布的根节点
-    fromJSON(data): void // 导入数据
-    toJSON(): FlowDocumentJSON // 导出数据
-    addNode(type: string, meta: any): FlowNodeEntity // 添加节点
-    traveseDFS(fn: (node: flowNodeEntity) => void, startNode = this.root) // 遍历
-}
-```

apps/docs/src/zh/guide/index/introduction.mdx

@@ -1,189 +0,0 @@
-# 常见问题
-## 为什么不用 ReactFlow
-- ReactFlow 不做数据建模，不提供布局算法，只做渲染，开发复杂人力成本依然很高
-见：https://reactflow.dev/examples/nodes/custom-node
-- ReactFlow的交互的定制成本高，如下，在画布缩放很小时候无法选到点位，也不支持拖拽重连线条
-<table>
-  <tr>
-    <td><img src="@/public/reactflow/reactflow-render.gif"/></td>
-    <td><img src="@/public/reactflow/reactflow-interaction.gif"/></td>
-  </tr>
-</table>
-
-## ReactFlow 付费案例
-
-| 付费功能                         | FlowGramAI 是否支持 | 未来计划支持 |
-|----------------------------------|------------------------|--------------|
-| 分组                             | 支持                   |              |
-| redo/undo                        | 支持                   |              |
-| copy/paste                       | 支持                   |              |
-| HelpLines 辅助线                | 支持                   |              |
-| 自定义节点及形状                 | 支持                   |              |
-| 自定义线条                       | 支持                   |              |
-| AutoLayout，自动布局整理         | 支持                   |              |
-| ForceLayout，节点排斥效果        | 不支持                 | No           |
-| Expand/Collapse                  | 支持                   |              |
-| Collaborative 多人协同           | 不支持                 | Yes          |
-| WorkflowBuilder 相当于自动化布局完整案例 | 支持                   |              |
-
-## 为什么需要 IOC
-
-:::tip 几个概念：
-- 控制反转： Inversion of Control， 是面向对象中的一种设计原则，可以用来降低代码模块之间的耦合度，其中最常见的方式叫做依赖注入（Dependency Injection，简称DI）
-- 领域逻辑：Domain Logic，也可以叫 业务逻辑（Business Logic），这些业务逻辑与特定的产品功能相关
-- 面向切面编程：AOP （Aspect-Oriented Programming），最核心的设计原则是将软件系统拆分为公用逻辑 (横切，有贯穿的意味) 和 领域逻辑 （纵切）的多个个方面 (Aspect)，横切部分可以被所有的 纵切 部分 “按需消费”
-
-:::
-
-回答这个问题之前先了解切面编程，切面编程目的是将领域逻辑的粒度拆的更细，横切部分可被纵切 “按需消费” ，横切和纵切的连接也叫 织入 (Weaving)，而 IOC 就是扮演 Weaving 注入到纵切的角色
-
-
-![切面编程](@/public/weaving.png)
-
-理想的切面编程
-
-```ts
-- myAppliation 提供业务逻辑
-  - service 特定的业务逻辑服务
-     - customDomainLogicService
-  - contributionImplement 钩子的注册实例化
-    - MyApplicationContributionImpl
-  - component 业务组件
-
-- core 提供通用逻辑
-  - model 通用模型
-  - contribution 钩子接口
-     - LifecycleContribution 应用的生命周期
-     - CommandContribution
-  - service 公用的service的服务
-     - CommandService
-     - ClipboardService
-  - component 公用的组件
-  ```
-
-  ```ts
-  // IOC 的注入
-@injectable()
-export class CustomDomainLogicService {
-  @inject(FlowContextService) protected flowContextService: FlowContextService;
-  @inject(CommandService) protected commandService: CommandService;
-  @inject(SelectionService) protected selectionService: SelectionService;
-}
-// IOC 的接口声明
-interface LifecycleContribution {
-   onInit(): void
-   onStart(): void
-   onDispose(): void
-}
-// IOC 的接口实现
-@injectable()
-export class MyApplicationContributionImpl implement LifecycleContribution {
-    onStart(): void {
-      // 特定的业务逻辑代码
-    }
-}
-
-// 手动挂在到生命周期钩子
-bind(LifecycleContribution).toService(MyApplicationContributionImpl)
-```
-
-
-:::warning IOC是切面编程的一种手段，引入后，底层模块可以以接口形式暴露给外部注册，带来的好处：
-- 实现微内核 + 插件化的设计，实现插件的可插拔按需消费
-- 可以让包拆得更干净，实现 feature 式的拆包
-
-:::
-
-## 为什么需要 ECS
-
-:::warning ECS （Entity-Component-System）
-适合解耦大的数据对象，常用于游戏，游戏的每个角色（Entity）数据都非常庞大，需要拆分成如物理引擎相关数据、皮肤相关、角色属性等 (多个 Component)，供不同的子系统（System）消费。流程的数据结构复杂，很适合用ECS做拆解
-
-:::
-
-![ECS](./assets/ecs.png)
-
-ReduxStore 伪代码
-```jsx pure
-const store = () => ({
-  nodes: [{
-    position: any
-    form: any
-    data3: any
-
-  }],
-  edges: []
-})
-
-function Playground() {
-  const { nodes } = useStore(store)
-
-  return nodes.map(node => <Node data={node} />)
-}
-```
-优点：
-- 中心化数据管理使用简单
-
-缺点：
-- 中心化数据管理无法精确更新，带来性能瓶颈
-- 扩展性差，节点新增一个数据，都耦合到一个 大JSON 里
-
-ECS 方案
-备注：
-- NodeData 对应的是 ECS - Component
-- Layer 对应 ECS - System
-```jsx pure
-class FlowDocument {
-dataDefines: [
-  NodePositionData,
-  NodeFormData,
-  NodeLineData
-]
-nodeEntities: Entity[] = []
-}
-
-
-class Entity {
-id: string // 只有id 不带数据
-getData: (dataId: string) => EntityData
-}
-
-// 渲染线条
-class LinesLayer {
-@observeEntityData(NodeLineData) lines
-render() {
-  return lines.map(line => <Line data={line} />)
-}
-}
-
-// 渲染节点位置
-class NodePositionsLayer {
-@observeEntityData(NodePositionData) positions
-return() {
-
-}
-}
-
-// 渲染节点表单
-class  NodeFormsLayer {
-  @observeEntityData(NodeFormData) contents
-return() {}
-}
-
-class Playground {
-layers: [
-  LinesLayer, // 线条渲染
-  NodePositionsLayer, // 位置渲染
-  NodeFormsLayer // 内容渲染
-]，
-render() {
-  return this.layers.map(layer => layer.render())
-}
-}
-```
-优点：
-- 节点数据拆开来单独控制渲染，性能可做到精确更新
-- 扩展性强，新增一个节点数据，则新增一个 XXXData + XXXLayer
-
-缺点：
-- 有一定学习成本

apps/docs/src/zh/guide/index/node-engine.mdx

@@ -1,30 +0,0 @@
-# 节点引擎 NodeEngine
-
-节点引擎 NodeEngine 是一个流程节点逻辑的书写框架，让业务专注于业务自身的渲染与数据逻辑，无需关注画布以及节点间联动的底层api。与此同时，节点引擎沉淀了最佳的节点书写范式，帮助业务解决流程业务中可能遇到的各种问题， 如数据逻辑与渲染耦合等。
-节点引擎是可选启用的。如果你不存在以下这些复杂的节点逻辑，可以选择不启用节点引擎，自己维护节点数据与渲染。复杂节点逻辑如：1）节点不渲染也能校验或触发数据副作用；2）节点间联动丰富；3）redo/undo; 等等。
-
-# 基础概念
-
-FlowNodeEntity
-流程节点模型。
-
-FlowNodeRegistry
-流程节点的静态配置。
-
-FormMeta
-节点引擎的静态配置。 配置在 FlowNodeRegistry 中的 formMeta 字段。
-
-Form
-节点引擎中的表单。它维护节点的数据并提供渲染、校验、副作用等能力。他的模型 FormModel 提供节点数据的访问和修改及触发校验等能力。
-
-Field
-节点表单中的某个渲染字段。注意， Form 已经提供了数据层的逻辑，Field 更多是一个渲染层的模型，它尽在表单字段渲染后才存在。
-
-validate
-表单校验。通常有对单个字段的校验也有整体表单校验。
-
-effect
-表单数据的副作用。通常指在表单数据发生一些事件时要触发特定逻辑。 如在某字段的数据变更时要同步一些信息到某个store，这个可以被称为一个effect。
-
-FormPlugin
-表单插件。可以配置在formMeta 中，插件可以对表单进行一系列深度操作。如变量插件。

apps/docs/src/zh/guide/index/variable-engine.mdx

@@ -1,86 +0,0 @@
-# 变量引擎
-
-## 整体设计
-
-### 架构分层
-
-:::warning 架构分层
-变量引擎设计上遵循 DIP（依赖反转）原则，按照 代码稳定性、抽象层次 以及和 业务的远近 分为三层：
-- 变量抽象层：变量架构中抽象层次最高，代码也最为稳定的部分
-- 变量实现层：变量架构中变动较大，不同业务之间通常存在调整的部分
-- 变量业务层：变量架构中提供给业务的 Facade ，与画布引擎、节点引擎联动的部分
-
-:::
-
-![架构分层图](./assets/variable-engine-structure.png)
-
-
-### 术语表
-
-#### 🌟 作用域（Scope）
-:::warning ⭐️⭐️⭐️ 定义：
-一种约定的空间，空间内 通过 AST 来描述变量声明和消费情况
-- 约定的空间：空间是什么，完全由业务定义
-  - 在低代码设计态中，可以是一个节点、一个组件、一个右侧面板...
-  - 在一段代码中，可以是一行 Statement、一段代码块、一个函数、一个文件...
-
-:::
-
-作用域的空间是什么？可以由不同的业务来划定。
-
-
-#### 🌟 抽象语法树（AST）
-
-:::warning 定义：
-⭐️⭐️⭐️ 一种协议，通过树的形式，组合 AST 节点，实现对变量信息的显式/隐式 CRUD
-- AST 节点：AST 中可响应式的协议节点
-- 显式 CRUD，如：业务显示设定一个变量的变量类型
-- 隐式 CRUD，如：业务声明一个变量，变量会根据其初始化参数自动推导变量类型
-
-:::
-
-:::warning 作用域里面的变量、类型、表达式、结构体 等等变量信息... 本质上都是 AST 节点的组合
-- 变量 -> VariableDeclaration 节点
-- 表达式 -> Expression 节点
-- 类型 -> TypeNode 节点
-- 结构体 -> StructDeclaration 节点
-
-:::
-
-参考链接：https://ts-ast-viewer.com/
-
-#### 变量（Variable）
-
-:::warning 定义：
-一种用于声明新变量的 AST 节点，通过唯一标识符 指向一个 在特定集合范围内变动的值
-- 在特定集合范围内变动的值：变量的值必须在 变量类型 描述的范围内
-- 唯一标识符：变量必须有一个唯一的 Key 值
-
-:::
-
-[JavaScript中的变量，唯一 Key + 指向一个变动的值](./assets/variable-code.png)
-
-#### 变量类型（Variable Type）
-
-:::warning 定义：
-⭐️⭐️⭐️ 一种 AST 节点，用于约束一个变量，被约束的变量值只能在预先设定的集合范围内变动
-- 一个变量可以绑定一个变量类型
-
-:::
-<table>
-  <tr>
-    <td><img src="./assets/variable-type1.png"/></td>
-    <td><img src="./assets/variable-type2.png"/></td>
-  </tr>
-</table>
-
-### 变量引擎的形象理解
-
-:::warning 想像这样一个变量引擎的世界：
-- 通过一个个 作用域 来划定出一个个 国家
-- 每个国家包含三大公民：声明、类型、表达式
-- 国家与国家之间通过 作用域链 来实现交流
-
-:::
-
-![图解](./assets/varaible-zone.png)

apps/docs/src/zh/guide/qa.mdx

@@ -1,3 +0,0 @@
-# QA
-
-## 为什么不使用 ReactFlow