From 4a2e5becba81ffe4f0561e5f02b52e660768fecc Mon Sep 17 00:00:00 2001
From: dragooncjw <289056872@qq.com>
Date: Fri, 28 Feb 2025 16:46:28 +0800
Subject: [PATCH] chore: update en docs

---
 apps/docs/src/en/guide/concepts/_meta.json    |  5 ++-
 apps/docs/src/en/guide/concepts/reactflow.mdx | 37 +++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 apps/docs/src/en/guide/concepts/reactflow.mdx

diff --git a/apps/docs/src/en/guide/concepts/_meta.json b/apps/docs/src/en/guide/concepts/_meta.json
index 01828b81..96726688 100644
--- a/apps/docs/src/en/guide/concepts/_meta.json
+++ b/apps/docs/src/en/guide/concepts/_meta.json
@@ -2,6 +2,7 @@
   "canvas-engine",
   "node-engine",
   "variable-engine",
-  "ECS",
-  "IOC"
+  "ecs",
+  "ioc",
+  "reactflow"
 ]
diff --git a/apps/docs/src/en/guide/concepts/reactflow.mdx b/apps/docs/src/en/guide/concepts/reactflow.mdx
new file mode 100644
index 00000000..1634a5d4
--- /dev/null
+++ b/apps/docs/src/en/guide/concepts/reactflow.mdx
@@ -0,0 +1,37 @@
+# Comparison with ReactFlow
+
+[Reactflow](https://reactflow.dev/) is an excellent open-source project with clear architecture and code. However, it focuses on low-level flow rendering engine architecture (Node, Edge, Handle), requiring extensive development at the upper layer to adapt to complex scenarios (such as fixed layouts, which need data modeling and layout algorithms). Advanced features are paid.
+
+Compared to ReactFlow, FlowGram aims to provide a complete out-of-the-box solution for flow editing.
+
+- Below are the pro paid features officially provided by ReactFlow
+
+| Paid Features                    | Supported by FlowGram | Future Plan |
+|----------------------------------|------------------------|--------------|
+| Grouping                         | Supported             |              |
+| redo/undo                        | Supported             |              |
+| copy/paste                       | Supported             |              |
+| HelpLines                        | Supported             |              |
+| Custom nodes and shapes          | Supported             |              |
+| Custom edges                     | Supported             |              |
+| AutoLayout                       | Supported             |              |
+| ForceLayout                      | Not Supported         | No           |
+| Expand/Collapse                  | Supported             |              |
+| Collaborative                    | Not Supported         | Yes          |
+| WorkflowBuilder (Fixed Layout Example) | Supported             |              |
+
+- ReactFlow events are bound to atomized DOM nodes and built-in, making interaction customization costly. Deep development requires understanding its source code. For example, it's difficult to select points when the canvas is zoomed out:
+
+<table>
+  <tr>
+    <td>
+      <div className="rs-tip">Since events are bound to SVG, it's difficult to click on elements when zoomed out</div>
+      <img src="@/public/reactflow/reactflow-render.gif"/>
+    </td>
+    <td>
+      <div className="rs-tip">FlowGram's events use global mousemove monitoring and calculate positions with Threshold, allowing clicks even when zoomed out, while also supporting edge reconnection</div>
+      <img src="@/public/reactflow/reactflow-interaction.gif"/>
+    </td>
+  </tr>
+</table>
+