# didi/logicflow

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/didi-logicflow).**

11,441 stars · 1,368 forks · TypeScript · Apache-2.0

## Links

- GitHub: https://github.com/didi/LogicFlow
- Homepage: http://logicflow.cn/
- awesome-repositories: https://awesome-repositories.com/repository/didi-logicflow.md

## Topics

`bpmn` `diagram` `diagramming` `didi` `flow` `flowchart` `graph` `javascript` `javascript-diagramming-library` `mvvm` `svg` `typescript` `visualization`

## Description

LogicFlow is an SVG-based flowchart editing framework and visual graph editor used for building customizable business process diagrams. It serves as a customizable diagramming engine for rendering business process models, entity relationship diagrams, and unified modeling language charts.

The system is characterized by a plugin-based architecture that allows developers to define specialized graphical elements and register pluggable modules. A distinctive feature is its overlay system, which positions standard HTML components on top of the SVG canvas to create interactive menus and control panels.

The framework provides capabilities for creating custom nodes and edges with bespoke shapes and business data. It includes tools for managing graph interactions, such as drag-and-drop and coordinate mapping, as well as data adapters to transform internal graph representations into external formats.

The editor includes productivity features such as grid snapping, alignment guides, zoom controls, and keyboard shortcuts.

## Tags

### Business & Productivity Software

- [Business Process Modeling Tools](https://awesome-repositories.com/f/business-productivity-software/business-process-modeling-tools.md) — Provides a comprehensive framework for implementing business process models, ER diagrams, and UML charts.
- [Flowchart Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/visual-collaboration-tools/flowchart-editors.md) — Provides a comprehensive framework for building customizable flowchart editors with SVG nodes and interactive lines. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Business Process Management](https://awesome-repositories.com/f/business-productivity-software/business-process-management.md) — Supports the design and documentation of complex business workflows and operational procedures through visual modeling.
- [Mind Mapping Software](https://awesome-repositories.com/f/business-productivity-software/mind-mapping-software.md) — Enables the construction of hierarchical thought maps to organize ideas and project structures.

### Graphics & Multimedia

- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Renders diagram elements as scalable vector graphics to ensure a crisp visual representation of nodes and edges.
- [SVG Flowchart Frameworks](https://awesome-repositories.com/f/graphics-multimedia/svg-flowchart-frameworks.md) — Provides a complete SVG-based framework for building customizable business process diagrams and flowchart editors. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Custom Diagram Editor Development](https://awesome-repositories.com/f/graphics-multimedia/custom-diagram-editor-development.md) — Provides a customizable engine for building specialized graphic editors tailored to industry-specific requirements.
- [Flowchart Rendering](https://awesome-repositories.com/f/graphics-multimedia/flowchart-rendering.md) — Provides a rendering engine to draw diagrams using SVG shapes for nodes and connectors. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Interactive SVG Elements](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering/interactive-svg-elements.md) — Implements interactive SVG elements that respond to user inputs like clicks and drags to create dynamic diagrams. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Node and Edge Customizations](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/axis-appearance-configurations/node-appearance/node-and-edge-customizations.md) — Creates unique shapes and associated business data to represent specific domain entities or workflow steps. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Interactive Diagramming Engines](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/interactive-diagramming-engines.md) — Implements an extensible engine for defining graphical elements and pluggable modules for visual business logic.
- [Diagram Layout Aids](https://awesome-repositories.com/f/graphics-multimedia/multi-format-diagram-editing/diagram-layout-aids.md) — Ships productivity features such as grid snapping and alignment guides to streamline the diagramming process. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))

### Development Tools & Productivity

- [Diagramming Plugins](https://awesome-repositories.com/f/development-tools-productivity/diagramming-tools/diagramming-plugins.md) — Provides a plugin-based architecture to register custom modules, methods, and specialized graphical elements.
- [Data Transformation](https://awesome-repositories.com/f/development-tools-productivity/data-structure-visualizers/data-transformation.md) — Transforms complex graph data structures into formats compatible with external business standards or specifications. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Diagram Editing Optimizations](https://awesome-repositories.com/f/development-tools-productivity/diagram-editing-optimizations.md) — Improves diagram creation speed with grid snapping, alignment guides, zoom controls, and keyboard shortcuts. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Custom Plugin Registrations](https://awesome-repositories.com/f/development-tools-productivity/plugin-systems/custom-plugin-registrations.md) — Provides a registry for custom components and data adapters to implement functionality like context menus. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))

### Game Development

- [Custom Element Registrations](https://awesome-repositories.com/f/game-development/custom-component-type-registrations/custom-element-registrations.md) — Allows registration of custom node and edge types with bespoke graphics and business data. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))

### Software Engineering & Architecture

- [Visual Graph Editors](https://awesome-repositories.com/f/software-engineering-architecture/configuration-management-workflows/safe-graph-editing/visual-graph-editors.md) — Offers a visual editor for creating interactive graphs with support for drag-and-drop and coordinate mapping.
- [Plugin-Based Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures.md) — Features a plugin-based architecture that allows developers to register custom modules and modify core behaviors.
- [Plugin-Based Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures.md) — Implements a plugin-based extensibility model for registering custom modules and methods without altering base source code.
- [Custom Method Registration](https://awesome-repositories.com/f/software-engineering-architecture/custom-method-registration.md) — Allows users to register custom logic as methods accessible through the public API. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Module Functionality Extenders](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders.md) — Implements mechanisms for adding custom methods and properties to existing library modules for framework extension. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Editor Capability Extensions](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/editor-capability-extensions.md) — Provides a system to add specialized behaviors and functional tools to the visual editing environment. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Editor Functionality Plugins](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/plugin-extenders/editor-functionality-plugins.md) — Allows the use of pluggable modules to extend editor-centric features like menus and control panels. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Visualization Extenders](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/visualization-extenders.md) — Registers custom methods and event listeners to add new capabilities or trigger external actions. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [External Component Integration](https://awesome-repositories.com/f/software-engineering-architecture/integration-interfaces/ui-component-integrations/external-component-integration.md) — Allows the embedding of external UI libraries and components as overlays on the SVG canvas. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))

### User Interface & Experience

- [Coordinate-Based Positioning](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-positioning.md) — Implements a coordinate-based system to track and manage the absolute screen positions of diagram elements.
- [Custom Component Extensions](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions.md) — Integrates specialized HTML frontend elements over the SVG canvas using coordinate conversion logic. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Custom Node Geometries](https://awesome-repositories.com/f/user-interface-experience/custom-node-geometries.md) — Provides capabilities for defining custom shapes and SVG primitives to represent business entities and relationships. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Custom Node and Edge Geometries](https://awesome-repositories.com/f/user-interface-experience/custom-node-geometries/custom-node-and-edge-geometries.md) — Enables the creation of reusable nodes and edges with custom graphics for domain-specific workflows. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Interaction and Event Handling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling.md) — Implements interaction logic for mouse events such as dragging nodes and creating edges. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Event-Driven Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-models/event-driven-interaction-handlers.md) — Maps mouse and keyboard inputs to specific graph operations like dragging nodes and drawing connecting lines.
- [Graph Interactions](https://awesome-repositories.com/f/user-interface-experience/graph-interactions.md) — Implements user interaction patterns specifically for navigating and manipulating node-link diagrams. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Interactive Diagramming Tools](https://awesome-repositories.com/f/user-interface-experience/interactive-diagramming-tools.md) — Provides a browser-based canvas for drawing and connecting shapes to represent complex business processes. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Custom UI Overlays](https://awesome-repositories.com/f/user-interface-experience/visual-overlays/custom-ui-overlays.md) — Provides the capability to draw custom HTML UI overlays on top of the editor surface for controls. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Diagram Element Styling](https://awesome-repositories.com/f/user-interface-experience/visual-styling-rules/diagram-element-styling.md) — Defines specialized nodes and lines with unique shapes to meet specific domain requirements. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Diagram Viewport Controls](https://awesome-repositories.com/f/user-interface-experience/2d-panning-controllers/image-pan-and-zoom-controls/plot-pan-and-zoom-controls/diagram-viewport-controls.md) — Includes interactive mechanisms for panning and zooming the diagram viewport to improve layout precision. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Custom Components](https://awesome-repositories.com/f/user-interface-experience/custom-components.md) — Supports the registration and mounting of user-defined frontend components using any frontend framework. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Overlay Components](https://awesome-repositories.com/f/user-interface-experience/overlay-components.md) — Integrates HTML components as floating menus and panels using coordinate transformations on an SVG canvas. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Overlay Positioning Systems](https://awesome-repositories.com/f/user-interface-experience/overlay-positioning-systems.md) — Implements an overlay system that positions standard HTML components precisely on top of an SVG canvas.
- [Overlay UI Composers](https://awesome-repositories.com/f/user-interface-experience/overlay-ui-composers.md) — Composes HTML views over an SVG layer to create interactive context menus and control panels. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Editor Interface Customizations](https://awesome-repositories.com/f/user-interface-experience/text-editors/editor-interface-customizations.md) — Adds HTML components and custom styles to the SVG layer to build control panels and context menus. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Chart Visual Style Customizations](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization/chart-visual-style-customizations.md) — Adjusts the appearance of nodes, lines, anchors, and arrows to align diagrams with branding requirements. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))

### Web Development

- [SVG Canvas Overlays](https://awesome-repositories.com/f/web-development/css-alignment-techniques/overlay-positioning/svg-canvas-overlays.md) — Positions standard HTML components on top of the SVG canvas to create interactive menus and control panels.
- [Node-Based Diagramming Frameworks](https://awesome-repositories.com/f/web-development/node-based-diagramming-frameworks.md) — Provides a framework for building interactive, node-based visual editors using SVG and HTML overlays.
- [Custom Diagram Primitives](https://awesome-repositories.com/f/web-development/web-standards/custom-elements/custom-diagram-primitives.md) — Defines specialized nodes and lines with unique graphics and business data to represent domain concepts. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Visual Builder Elements](https://awesome-repositories.com/f/web-development/web-standards/custom-elements/visual-builder-elements.md) — Defines custom design elements with unique shapes and styles for nodes, lines, anchors, and arrows. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))

### Part of an Awesome List

- [UML Modeling](https://awesome-repositories.com/f/awesome-lists/devtools/uml-modeling.md) — Supports the design of software architecture and database schemas using UML and ER standards.
- [Entity-Relationship Diagram Editors](https://awesome-repositories.com/f/awesome-lists/devtools/visualization-and-diagrams/entity-relationship-diagram-editors.md) — Facilitates the visualization of database structures and entity relationships through an interactive editor.

### Data & Databases

- [Data Adapters](https://awesome-repositories.com/f/data-databases/data-adapters.md) — Provides data adapters to transform diagram data between internal representations and custom external formats. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Data Format Converters](https://awesome-repositories.com/f/data-databases/data-format-converters.md) — Provides utilities for converting internal graph representations into external storage formats for business engine compatibility. ([source](https://cdn.jsdelivr.net/gh/didi/logicflow@master/README.md))
- [Data Adapters](https://awesome-repositories.com/f/data-databases/external-data-connectors/data-adapters.md) — Provides data adapters to translate internal graph representations into external business formats during import and export.