DOCSEARCHbyAlgolia
Submit Docs

LogicFlow Flowchart Editing Framework

repository·master·Indexed 11 days ago

https://github.com/didi/logicflow

A highly scalable, execution-oriented professional flowchart editing library. It provides a core graph editor runtime (@logicflow/core), official plugins for common product features (@logicflow/extension), and automatic graph layout plugins (@logicflow/layout). The ecosystem also includes @logicflow/engine, a workflow engine for executing processes in browser and Node.js environments.

Tokens
224.2K
Snippets
669
Records
984
Agent score
92%

What's inside LogicFlow

  1. What is LogicFlow

    master

    LogicFlow is a flowchart editing framework designed for visual modeling and logic orchestration. It provides core functionalities for flowchart interaction, editing, and flexible node customization through a plugin and expansion mechanism.

    Key capabilities include:

    • Visual Modeling: An intuitive interface for creating, editing, and managing complex logic flow diagrams.
    • High Customizability: Support for custom nodes, connectors, and styles to fit specific use cases.
    • Self-executing Engine: A browser-side execution engine that allows for code-free execution of flowchart logic.

    Common use cases include:

    • Work approval flow configuration
    • Robot logic orchestration
    • No-code platform process configuration
    • ER diagrams and BPMN processes

  2. Overview of LogicFlow Type Definitions

    master

    LogicFlow provides a comprehensive set of TypeScript types to ensure type safety when configuring the engine, defining custom nodes/edges, and developing plugins. The type system is organized into several functional groups:

    • Theme Types: For customizing the visual appearance of elements (nodes, edges, text).
    • Instance Types: For configuring the LogicFlow instance during construction and interacting with its API.
    • Canvas Types: For handling graph data, coordinates, and element properties.
    • Node & Edge Types: For defining the structure and behavior of graph elements.
    • Plugin Types: For implementing extensions and plugins within the framework.

  3. Overview of LogicFlow Core Types

    master

    LogicFlow uses a set of core types to define the configuration and behavior of flowcharts. When initializing or interacting with a LogicFlow instance, you will primarily interact with these configuration categories:

    • Common: Basic configuration items shared across most instances.
    • EdgeType: Defines the available types of edges (lines) in the diagram.
    • BackgroundConfig: Configuration for the canvas background (e.g., grid, color).
    • AnimationConfig: Settings for edge animations.
    • EdgeGeneratorType: Interface for defining custom edge generation logic.
    • CustomTargetAnchorType: Rules for custom anchor connections.
    • CustomAnchorLineProps: Properties for custom anchor lines.
    • GuardsConfig: Configuration for interceptors used for permission control.
    • IEditConfigType: Configuration for edit controls.
    • GridOptions: Settings for the background grid.
    • KeyboardDef: Definitions for keyboard shortcuts and interactions.

  5. Overview of LogicFlow Configuration Types

    master
    This documentation provides the type definitions for various configuration options used within LogicFlow. These types define the structure for instance-level configurations, editing controls, background settings, grid options, keyboard shortcuts, edge types, animations, and custom edge/anchor logic.

  6. Introduction to LogicFlow

    master
    LogicFlow is a flowchart editing framework designed for rapid development of flowchart interaction and editing capabilities. It provides a flexible system for node customization, plugin expansion, and business-specific logic integration. It is suitable for various business scenarios such as IVR (Interactive Voice Response), work order flows, and intelligent customer service robots.

  7. Explore LogicFlow Type Definitions

    master

    LogicFlow provides a comprehensive set of types used for constructor options, runtime APIs, and element configurations. The type system is organized into several functional groups:

    • Theme Style Types: For configuring the visual appearance of elements (nodes, edges, text).
    • Instance Related Types: For configuring the LogicFlow instance, background, grid, keyboard shortcuts, and element registration.
    • Canvas Related Types: For handling graph data, coordinates (Position, Point), and element properties.
    • Node Related Types: For node configuration, drag offsets, and DOM attributes.
    • Edge Related Types: For edge configuration and data structures.
    • Plugin Related Types: For defining and implementing extensions and plugins.

  8. Future Roadmap and Vision for LogicFlow

    master

    LogicFlow is evolving towards becoming a mature, comprehensive solution for flow visualization and execution. The development roadmap focuses on three key pillars:

    1. API Usability and Richness: Enhancing the @logicflow/core API and strengthening @logicflow/extension capabilities to support diverse system requirements.
    2. Documentation and Examples: Improving documentation readability and providing complete, copy-pasteable code examples (including English documentation).
    3. End-to-End Solutions: While LogicFlow handles the frontend flow editing technical challenges, the team aims to integrate it with turbo (a forthcoming flow engine) to provide a complete end-to-end solution covering both visualization and execution.

    If your business requires a flow editor with high extensibility, LogicFlow is designed to meet those needs.

  9. Core capabilities of LogicFlow

    master

    LogicFlow is a flowchart editing framework designed for rapid development of flowchart-based business systems. It provides the following core capabilities:

    1. Drawing Capabilities

    • Uses SVG to render various shapes for nodes and lines.
    • Provides built-in basic nodes (rectangles, circles, polygons, etc.) and lines (straight, polyline, curve).

    2. Interaction Capabilities

    • Responds to mouse events (hover, click, drag, etc.) on nodes, lines, and the canvas.
    • Supports node dragging, drag-to-create edges, line adjustment, and double-clicking nodes to edit text.

    3. Editing Efficiency Tools

    • Includes grids, alignment lines, undo/redo functionality, keyboard shortcuts, and canvas zooming.

    4. Extensibility and API

    • Offers a rich API for host applications to interact with the engine via parameter passing and event listening.

  10. Core Capabilities of LogicFlow

    master

    LogicFlow is a flowchart editing framework designed for rapid integration into business systems. Its core capabilities include:

    • Visual Model: An intuitive interface for creating, editing, and managing complex logic flowcharts.
    • High Customizability: Ability to customize nodes, connectors, and styles for specific use cases.
    • Flexible Extensibility: A rich set of built-in plugins and a mechanism to create custom plugins.
    • Self-Executing Engine: Supports executing flowchart logic directly in the browser, enabling no-code execution.
    • Data Transformation: Supports converting LogicFlow data structures to and from BPMN, Turbo, and other backend execution engine formats.

  11. Built-in BPMN base nodes

    master

    The @logicflow/extension package provides a set of built-in BPMN base nodes categorized into Events, Tasks, Gateways, Sub-processes, and Flows. These nodes map to standard BPMN XML definitions.

    Events

    • Start Events (bpmn:startEvent): Includes standard start events and sub-process events (distinguished by the isInterrupting property: isInterrupting = 'false' for interrupting, isInterrupting = 'true' for non-interrupting).
    • Boundary Events (bpmn:boundaryEvent): Includes interrupting (cancelActivity = 'true') and non-interrupting (cancelActivity = 'false') boundary events.
    • Intermediate Events: Catch events (bpmn:intermediateCatchEvent) and Throw events (bpmn:intermediateThrowEvent).
    • End Events (bpmn:endEvent).

    Tasks

    • Service Task (bpmn:serviceTask)
    • User Task (bpmn:userTask)

    Gateways

    • Parallel Gateway (bpmn:parallelGateway)
    • Exclusive Gateway (bpmn:exclusiveGateway)
    • Inclusive Gateway (bpmn:inclusiveGateway)

    Sub-processes

    • Embedded Sub-process (bpmn:subProcess)

    Flows

    • Sequence Flow (bpmn:sequenceFlow): Can be styled as a default flow using the isDefaultFlow property.

  12. Overview of BPMN Plugins in LogicFlow

    master

    LogicFlow provides BPMN (Business Process Model and Notation) plugins to enable standardized business process modeling on the canvas. These plugins allow users to visualize BPMN-compliant diagrams, export to BPMN 2.0 XML, and integrate with engines like Activiti, Flowable, or Camunda.

    There are two versions available:

    1. Basic Version (for simple flows):

      • bpmnElement: Registers basic BPMN nodes.
      • bpmnAdapter: Provides basic data import/export between LogicFlow data and BPMN XML.

    2. Extended Version (for complex customization):

      • BPMNElements: Adds 6 additional node types.
      • bpmnElementsAdapter: Provides fine-grained customization for import, export, and data mapping to meet specific engine or business requirements.

    Note: The built-in plugins are intended for demonstration and quick starts. For production business projects with complex semantics or custom XML structures, it is recommended to implement your own node types and data conversion logic, using the built-in plugins as a reference.