简介

演示: http://projectstorm.cloud/react-diagrams

文档（进行中） https://projectstorm.gitbook.io/react-diagrams

文档目前正在编写中，同时也在制定迁移路径。

简介

一个受Blender、Labview和Unreal引擎启发的面向流程和过程的图表库。

• 现代代码库 完全使用Typescript和React编写，该库利用了强大的泛型、先进的软件工程原则，并被分解为多个模块。
• 可定制和可扩展 整个库包括其核心都可以被扩展、重新连接和重新组装，以满足您自身的软件需求。
• HTML节点作为一等公民 该库最初是为了表示高级动态节点而编写的，这些节点由于复杂的输入要求和用户体验要求，难以用SVG表示。
• 为过程设计 该库面向希望在运行时重新连接程序并使其软件更加动态的软件工程师。
• 快速图表编辑 提供的默认设置优先考虑尽可能快速地编辑图表。

图库

使用自定义模型的示例实现：（Dylan的个人代码）

立即使用默认模型开始：

安装

要获得所有功能：

yarn add @projectstorm/react-diagrams

这包括下面列出的所有包（在概念上和大部分情况下的工作方式与5.0版本相同）

更模块化的方法

这个库现在有了更模块化的设计，您可以只导入核心（不包含默认工厂或路由）

yarn add @projectstorm/react-diagrams-core

这是建立在不断发展的react-canvas-core库之上的

yarn add @projectstorm/react-canvas-core

它使用了

yarn add @projectstorm/geometry

当然，您可以添加一些额外的内容：

yarn add @projectstorm/react-diagrams-defaults
yarn add @projectstorm/react-diagrams-routing

如何使用

在运行任何示例之前，请先在根目录运行pnpm build。这个项目是一个monorepo，包括演示在内的包都需要先构建这些包。

查看图表演示

或者

查看演示项目，其中包含ES6和Typescript的示例

或者

查看文档

运行演示

在运行pnpm install和pnpm build之后，您必须运行：cd diagrams-demo-gallery && pnpm run start

从源代码构建

只需在根目录运行pnpm，然后运行pnpm build或pnpm build:prod，它会将转译后的代码和TypeScript定义作为单个文件输出到dist目录中。

使用react-diagrams构建的项目

您是否有使用react-diagrams构建的有趣项目？将其PR到此部分，让其他人看到。