Visual Editor
RuleGo-Editor is a visual rule chain editor built with LogicFlow (opens new window) + Element Plus + Vue 3, integrated into RuleGo-Server.
# Access
After starting RuleGo-Server, visit in your browser:
http://localhost:9090/editor/
Online demo:
- Editor: http://8.134.32.225:9090/editor/ (opens new window)
- UI Interface: http://8.134.32.225:9090/ui/ (opens new window)
Editor documentation: https://editor.rulego.cc/ (opens new window)
# Core Features
# Canvas Operations
- Drag to Add Nodes: Drag nodes from the left component panel onto the canvas
- Connections: Drag node anchors to create connection relationships
- Select/Multi-select: Box select or Ctrl+click to multi-select nodes
- Undo/Redo: Ctrl+Z / Ctrl+Y
- Copy/Paste: Ctrl+C / Ctrl+V
- Delete: Delete / Backspace
- Minimap: Thumbnail navigation in the bottom-right corner
- Fullscreen: Canvas fullscreen editing mode
# Node Types
| Type | Description |
|---|---|
| Start Node | Rule chain entry (auto-generated) |
| End Node | Rule chain exit |
| Process Node | Standard component node (filter, transformer, action, etc.) |
| Input Endpoint | Endpoint node (HTTP, MQTT, Kafka, Cron, etc.) |
| Sub Rule Chain | Reference to another rule chain |
| AI Agent | AI agent node |
| AI Orchestration | AI orchestration node |
| Group | Visual grouping |
| Comment | Comment node |
# Property Editing
Double-click a node or right-click and select "Properties" to open the property editing drawer:
- Basic Configuration: Node name, debug mode
- Component Configuration: Dynamically rendered forms based on component type, supporting:
- Text input, multi-line text
- Boolean toggle, slider, number input
- Dropdown select, date/time picker
- Array, Map, Struct editor
- Code editor (CodeMirror, supporting JS/Lua/SQL)
- Expression/condition editor
- JSON Schema editor
- Rule chain selector
- Connection Relationships: Configure output connection relationship types (True/False/Success/Failure, etc.)
# Connection Editing
Double-click a connection to edit the relationship type label; custom relationship names are supported.
# Canvas Status
The top-right corner of the editor displays the current canvas status:
- Editing: Normal editing mode
- Running: Rule chain is executing
- Disabled: Rule chain is disabled
# Rule Chain Management
Operate via the toolbar:
| Operation | Description |
|---|---|
| New | Create a new rule chain |
| Open | Search and open an existing rule chain |
| Save | Save the current rule chain (Ctrl+S) |
| Edit Info | Modify rule chain basic information, input Schema, variables |
| Run | Open the run dialog, configure input parameters and execute |
| Import/Export | Import and export rule chain JSON |
| Start/Stop | Deploy or stop a rule chain |
| Reset | Revert to the last saved version |
# Debugging Features
# Run Dialog
Click the [Run] button to open the run configuration:
- msgType: Message type
- Request Body: JSON or dynamic form based on inputSchema
- Metadata: key=value pairs
- Custom Headers: HTTP request headers
- Start Node: Execute from a specified node, or execute only a single node
- Execution Mode: Synchronous (execute) / Asynchronous (notify)
# Debug Console
The bottom panel displays real-time data flow:
- IN/OUT data for each node
- Node execution status (blue for processing, green for success, red for failure)
- Execution history playback
# Node Debug Data
Click a node to view the historical debug log panel.
For an illustrated guide, see Debugging Rule Chains.
# AI Features
The editor integrates an AI assistant panel (conversational creation/modification of rule chains), one-click AI generation, and AI Agent chat functionality. For details, see AI Features and AI Assistant Tutorial.
# Component Management
# Component Panel
A collapsible component panel on the left:
- Displays all available components in a categorized tree
- Supports enabling/disabling components
- Drag components onto the canvas to add nodes
# Component Marketplace
Browse and install online components with one-click install/uninstall.
# Embedded Integration
RuleGo-Editor can be embedded into third-party applications as a Vue component:
<rulego-editor
:options="editorOptions"
:data="chainData"
/>
2
3
4
# Configuration Options
| Parameter | Description |
|---|---|
options.url | Backend service address (default http://127.0.0.1:9090) |
options.toolbar.show* | Toolbar button display control |
data | Initial rule chain data |
# Exposed Methods
| Method | Description |
|---|---|
render() | Render the canvas |
save() | Save the rule chain |
getData() | Get the rule chain DSL |
setLocales() | Set language |
reloadComponents() | Reload the component list |