@spiralscout/react-diagram-builder v0.0.1-rc.0

React Visual Block Diagram Builder

Summary

Diagram Builder designed to visualize business logic connections on backend or between microservices with ability to export said connections

Specifications and terminology here

Prerequisites

1. Node LTS 16+
2. Yarn 1.22+
3. Run npx lerna bootstrap to init repository

HOT Reload issues

Diagram engine uses underlying third party library that's not suited too good for hot reloading/refreshing

It's recommended to add /* @refresh reset */ to top-level component that uses diagram model to force re-initialization in case of using react-refresh library. See example in demo project.

Packages

Installation

1. Run yarn add @spiral/react-diagram-builder
2. Install peer dependencies

    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@projectstorm/react-diagrams": "^6.7.0",
    "@emotion/core": "^11.0.0",
    "@emotion/styled": "^11.8.1",
    "dagre": "^0.8.5",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.11",
    "resize-observer-polyfill": "^1.5.1"

Usage

For usage study projectstorm/react-diagrams usage first, since this project is heavily based on that

@spiral/react-diagram-builder provides a handful of alternative defaults to what projectstorm/react-diagrams uses:

• i18n and theming support
• port connection validators based on data types
• static links that can exist coupled with ports
• automatic static links generation when connecting 2 nodes
• data payloads attached to links and ports

Themes And I18N

By default diagrams would use emotion/react based styling, declared in DefaultTheme

If you want to opt out of using emotion, you need to implement own version of DiagramTheme

For example if you use global stylesheets it could look something like this:

import { DiagramTheme } from '@spiralscout/react-diagram-builder';

const myTheme: DiagramTheme = {
  Link: {
    Link: {
      Label: (props: React.FC<JSX.IntrinsicElements['div']>) => <div {...props} className="my-class-name"></div>
      /** Rest of properties */
    }
    /** Rest of properties */
  },
  /** Rest of properties */
};

export const MyApp = () => {
  return <DiagramThemeProvider theme={myTheme}>
    <AppThatUsesDiagrams/>
  </DiagramThemeProvider>;
}

To use I18N override output of Button components like so:

Overriding i18n texts without overriding theme is not supported yet.

import { DiagramTheme } from '@spiralscout/react-diagram-builder';

const myTheme: DiagramTheme = {
  Link: {
    Menu: {
      DeleteButton: (props: React.FC<JSX.IntrinsicElements['div']>) => {
        const i18nContext = useI18n();
        return <div {...props} className="my-class-name">{i18nContext.getLabelFor('link.menu.delete')}</div>
      }
      /** Rest of properties */
    }
    /** Rest of properties */
  },
  /** Rest of properties */
};

export const MyApp = () => {
  return
  <I18NContextProvider>
      <DiagramThemeProvider theme={myTheme}>
        <AppThatUsesDiagrams/>
      </DiagramThemeProvider>
  </I18NContextProvider>;
}

Hot Reload

React hot reload currently breaks diagram state, full page reload is needed.