LogicFlow README

The project's README from github.com/didi/LogicFlow. As one markdown file: README.md.

LogicFlow logo

Version Download LICENSE

简体中文 | English

LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制,方便我们快速在业务系统内满足类流程图的需求。

核心能力

安装

# npm
$ npm install @logicflow/core @logicflow/extension --save

# yarn
$ yarn add @logicflow/core @logicflow/extension

# pnpm
$ pnpm add @logicflow/core @logicflow/extension

AI 编程支持

LogicFlow 为 AI 编程工具提供了随 npm 包发布的本地文档。@logicflow/[email protected] 及以上版本会包含这些文档。安装或升级后,可以把下面这段提示词复制给你的 AI Agent,让它在实现 LogicFlow 功能前先查官方文档。

更多说明请查看 AI 编程支持。

<!-- BEGIN:logicflow-agent-rules -->
# LogicFlow Agent Rules

LogicFlow documentation is available at:

- `node_modules/@logicflow/core/dist/docs/`

Package roles:

- `@logicflow/core`: core graph editor runtime, including canvas, nodes, edges, models, events, rendering, themes, and basic interactions.
- `@logicflow/extension`: official plugins for common product features.
- `@logicflow/layout`: official layout plugins for automatic graph layout.

The docs for `@logicflow/extension` and `@logicflow/layout` are included under:

- `node_modules/@logicflow/core/dist/docs/tutorial/extension/`

Before implementing any LogicFlow feature, check the local docs first to see whether LogicFlow already provides a built-in, extension, or layout capability. If it does, prefer the documented official capability instead of reimplementing it from scratch.

If an official package is needed but not installed, ask the user before installing it.
<!-- END:logicflow-agent-rules -->

快速上手

<!-- LogicFlow 容器 DOM-->
<div id="container"></div>;
// 准备数据
const data = {
  // 节点
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: '矩形节点',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: '圆形节点',
    },
  ],
  // 边
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21',
    },
  ],
};
// 渲染画布
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});

lf.render(data);

相关文档

官方文档


本地开发

# 安装项目依赖(prepare 会自动跑 build:all)
$ pnpm install

# 终端 1:监听 packages,热更新 es/lib
$ pnpm run dev

# 终端 2:启动 demo
$ cd examples/feature-examples && pnpm dev

参与共建

如果希望参与到 LogicFlow 的开发中,请遵从我们的贡献指南。如果你贡献度足够活跃,你可以申请成为社区协作者。

Contributors

Star History

Star History Chart

开源协议

该项目的代码和文档基于 Apache-2.0 License 开源协议。

LogicFlow (didi/LogicFlow)

Searching Database…

11.7K ·GitHub
Что это такое?LogicFlow — это опенсорсный фреймворк для редактирования блок-схем: он даёт все нужные для блок-схем взаимодействия и функции редактирования, а также гибкую настройку узлов и плагины, так что вы можете добавить редактирование блок-схем в свою бизнес-систему.
Это библиотека, которую я подключаю к своему веб-приложению, или отдельный сайт для диаграмм вроде draw.io?Это фронтенд-фреймворк, который вы встраиваете в своё веб-приложение, а не готовый онлайн-инструмент — компонент для редактирования диаграмм на TypeScript, созданный для добавления функциональности блок-схем в бизнес-системы.
Как добавить его в проект?Установите пакет @logicflow/core из npm и следуйте официальному руководству по быстрому старту в документации.
Какие диаграммы, кроме обычных блок-схем, он умеет?Он подходит для самых разных задач редактирования графов — автор называет интеллект-карты, ER-диаграммы, UML и рабочие процессы как то, что можно построить на его настраиваемой системе узлов.
Можно ли использовать его в коммерческих целях, и он бесплатный?Да — код и документация проекта распространяются по лицензии Apache-2.0, поэтому фреймворк можно использовать бесплатно, в том числе в коммерческих продуктах.
Он рендерит через SVG или canvas?SVG — LogicFlow построен на SVG и использует подход MVVM, поэтому диаграммы остаются обычными DOM-элементами, которые можно стилизовать.
What are similar projects?rete, xyflow, mind-map, drawio-skill, chartdb, rataflow, G6, charts
Creator
didi
Size
255 MB
Stars
11.7K
Age
5y
Commits · 90 Days