antonioru / beautiful-react-diagrams

💎 A collection of lightweight React components and hooks to build diagrams with ease 💎

A tiny collection of lightweight React components for building diagrams with ease

🌟 Live playground here 🌟

💡 Why?

Javascript diagramming libraries are often difficult to integrate in React projects.
Different patterns not always fit the React nature and having a component's state in in sync with an external diagramming library might be quite difficult especially when the latter had been built in a different paradigm (such as MVC, for example).

For this reason we created beautiful-react-diagrams an easy-to-customise functional diagramming library to build diagrams with ease.

🎓 Principles

• Lightweights: import nothing but a single lightweight javascript.
• Controlled components: exports controlled components only.
• Renderers: the involved components can be easily replaced with your own by using the renderer props.
• Easy to style: built using CSS vars only.

☕️ Features

• Concise API
• Small and lightweight
• Easy to use
• Easy to customise

🌟 Live playground here 🌟

Contributing

Contributions are very welcome and wanted.

To submit your custom pull request, please make sure your read our CONTRIBUTING guidelines.

Before submitting a new pull request, please make sure:

1. You have updated the package.json version and reported your changes into the CHANGELOG file
2. make sure you run npm run lint, npm build and then npm test before submitting your merge request.
3. make sure you've added the documentation of your changes.
4. if you've changed the signature of a component, please make sure you've updated the index.d.ts file.

Versioning

This library follows the semver versioning standard. Pre-release commits on the master branch, including merge commits, lead to automated publication to NPM under the next tag. Pre-release version numbers must follow the <major>.<minor>.<patch>-<tag>.<number>, such as 5.1.0-rc.0.

---

This library logo has been created using images published by the user Freepik on www.flaticon.com

beautiful-react-diagrams's Issues

Zoom In / Out

Hello

Thanks for the great lib!
is there a way to have a Zoom in / Zoom out feature with the existing lib or is is something new that should be developed as a new feature?

I am interested in

• Adding a Zoom in / out buttons to my canvas
• Activating Zoom in / out with the mouse scroll

Thanks in advance for your help :)
Hicham

Integrate type tests (typescript) with the CI

The tests currently run by the CI don't include the type ones (typescript)

Solution
Integrate the typescript tests into the CI

Node Grouping & Nested nodes

Would be great to see the ability to define nested nodes, and group nodes together.

This may be heavily dependent on auto-layout.

How to dynamically add ports?

Please help me how to dynamically add ports to a node?

`Encountered two children with same key`

Hello. First of all, very nice project! After following the demonstrations in the documentation in JavaScript, I decided to try using the library with TypeScript. In my project, it is possible to add nodes with a button. We implement the TS types in our own object (CustomNode and CustomSchema that holds CustomNode instead of Node). We also use a custom renderer to display the nodes.

The our Node.id value is generated with uuid to make sure it is unique. The Port.id value is based on the same uuid, like '<node.id>-output-1'. The function that is triggered when button is pressed to make a new node makes a new node object instance and adds it to schema using addNode() method that we get from useSchema().

When we make a first node with button, nothing bad happens, we can drag it around and it is still fine. When we add a second node, immediately we get this error:

After adding the second node, dragging any node around or trying to link them repeats the same error continuously (complaining about the key of the second node). The links do form though and the function of our program is unaffected, only slows down performance significantly. The order of creation also does not matter; the first one works fine.

I tried adding a uuid key to the outer-most div in our custom renderer, but that does not fix it (the screenshot is without the uuid in div). Thank you for your help.

Add support for dragging an existing wire from one input port to another

Is your feature request related to a problem? Please describe.
Drag an existing link to a different port.

Describe the solution you'd like
If you have nodes A, B and C.

1. Link A to B
2. Click on the port at B to start dragging the same wire to C.

To achieve this right now, you have to delete the existing wire and create a new one.

Describe alternatives you've considered
This might conflict with the existing behavior of drawing multiple wires from the same port.

Improve performances

Is your feature request related to a problem? Please describe.
The Diagram component performs few non-necessary re-renders, solving this would drastically improve the component performance.
Also, the Context is used to keep track of the position of the Nodes and Ports by using directly the HTML element but this is not really needed and can be improved.

Describe the solution you'd like
A re-factory of few parts is needed

Missing icons in 0.5.0

Describe the bug
Error using 0.5 due to missing icons

./node_modules/beautiful-react-diagrams/styles.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/beautiful-react-diagrams/styles.css)
Module not found: Can't resolve './icons/zoomIn.png' in 'node_modules\beautiful-react-diagrams'

To Reproduce
Steps to reproduce the behavior:

• Install 0.5 and use it

Expected behavior
No error should happen

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows (VS)
• Browser: Edge (Chromium)
• Version: 0.5.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Draggable canvas

Is your feature request related to a problem? Please describe.

At the moment the Diagram "canvas" (aka the diagram wrapping div) is not draggable, as a result if a diagram is bigger than its wrapping canvas, some nodes might be not entirely visible unless the developer makes the canvas bigger.
The issue is critical in dynamic diagrams where the size of the diagram is not previously known

Describe the solution you'd like
A draggable canvas should solve the problem so that the user is able to drag the canvas to show/hide nodes

Link Customization

**Is your feature request related to a problem?

The documentation shows how to customize nodes and it works brilliantly. I would also like to modify links, such as changing the fill color, adding an on-hover tool tip to display information etc.

Describe the solution you'd like

Include an example on how to modify links in documentation.

Describe alternatives you've considered

I tried modifying the original code but had little success.

Additional context

Thank you for this library! It is absolutely brilliant and easy to use. A few more examples can help beginners like me.

Linking lines are broken after page resize

Better implementation of zoom/panning in the next version (0.6.0)

Describe the bug

Hello everyone,
we have recently published the version 0.5.0 of 'beautiful-react-diagrams', this version introduces the new pan/zoom functionality.
Unfortunately, we also introduced a bug that causes to miscalculate the position of nodes with ports and links between them, some nodes are thrown out of the visibile screen and in some other cases it makes the Diagram rather unusable.
We apologise for this inconvenience.

Today we will try to release a new version (presumably the 0.5.1) that will roll back to the previous one, so that the bug will not be on NPM and possibly on other projects

This will also give us more time to work on the 0.6.0.

The 0.6.0 will have a better implementation of the zoom/panning provided by a new brand new component, called Canvas, to wrap the Diagram(s).
This next version will also have a useCanvasState hook to help with the Canvas component states and a component for the zoom controls called CanvasController.

The new API will look like this:

import Diagram, { Canvas, createSchema, useSchema, useCanvasState, CanvasControls } from 'beautiful-react-diagrams';
// the diagram model
const initialSchema = createSchema({
  nodes: [
    { id: 'node-1', content: 'Hey Jude', coordinates: [312, 27], },
    { id: 'node-2', content: 'Don\'t', coordinates: [330, 90], },
    { id: 'node-3', content: 'be afraid', coordinates: [100, 320], },
    { id: 'node-4', content: 'let me down', coordinates: [306, 332], },
    { id: 'node-5', content: 'make it bad', coordinates: [515, 330], },
  ],
  links: [
    { input: 'node-1',  output: 'node-2' },
    { input: 'node-2',  output: 'node-3' },
    { input: 'node-2',  output: 'node-4' },
    { input: 'node-2',  output: 'node-5' },
  ]
});
const DiagramExample = () => {
  const [canvasState, handlers] = useCanvasState(); // creates canvas state
  const [schema, { onChange }] = useSchema(initialSchema); // creates diagrams schema
  return (
    <div style={{ height: '30rem' }}>
      <Canvas {...canvasState} {...handlers}>
        <Diagram schema={schema} onChange={onChange} />
        <CanvasControls />
      </Canvas>
    </div>
  );
};
<DiagramExample />

Furthermore, the next version will solve the following bug:

#69

Add CSS color to individual flow lines

Awesome diagrams, they are so useful.

Looking through the src Link.js, it doesn't appear to be any way to pass down the CSS to the proper link or add/select them by individual ID.

<g className={classList}>
      <path d={path} className="bi-link-ghost" onDoubleClick={onDoubleClick} />
      <path d={path} ref={pathRef} className="bi-link-path" onDoubleClick={onDoubleClick} />
      {link.label && labelPosition && (<LinkLabel position={labelPosition} label={link.label} />)}
    </g>

Is it possible to add an attribute to individual lines to color them? Something like

 [
{ input: 'node-1',  output: 'node-2', label: 'Link 1', color: 'red', readonly: true },
{ input: 'node-1',  output: 'node-3', label: 'Link 2', color: '#008000', readonly: true }
]

Setting onSegmentConnect on custom renderer breaks linking

Describe the bug
A clear and concise description of what the bug is.

I try to set "onSegmentConnect" on custom renderer, but even an empty function breaks the segment connection functionality. The segment remains unconnected.

To Reproduce
Add this to a custom renderer to render the output ports and try to capture the onSegmentConnect event.
{outputs.map((port) =>
React.cloneElement(port, {
onSegmentConnect: (targetPort, id, type) => {
},
style: {
width: "25px",
height: "25px",
background: "#99A4DC",
marginBottom: "15px",
},
})

Expected behavior
The segment should connect normally and not stay dashed and unconnected.

Screenshots

Desktop (please complete the following information):

• OS: macOs
• Browser: chrome
• Version: 88.0.4324.96

Support for Touch Events

Is your feature request related to a problem? Please describe.
I can't use it on the iPad (can not drag nodes or connections).

Describe the solution you'd like
It looks like the library does not support Touch Events

Scrollbar blindness in sidebar

Describe the bug
The sidebar has overflow: scroll causing scrollbars always to be visible on Windows

To Reproduce
Steps to reproduce the behavior:

1. Go to documentation using Windows

Expected behavior
There should not be scrollbars before the content overflows

Screenshots

Desktop:

• OS: Win10
• Browser Firefox
• Version 83.0b10 (64-bit)

Additional context
Can be fixed by setting overflow: auto instead

Nodes autolayout

Is your feature request related to a problem? Please describe.
At the moment, the developer shall define the nodes' coordinates to provide a valid schema, unfortunately this is not always ideal (and might result quite tedious for the developer) it would be nice to have an auto-layout feature .

Describe the solution you'd like

A prop to define if a Diagram is "autolayout"

<Diagram schema={...}  autolayout />

And a function to programmatically re-organise the layout exported from the useSchema hook

const [schema, { autolayout }] = useSchema(); 

Is it possible to pass in the links array to the render?

Thanks for a great library!

I'm trying to update the rendered nodes using values from incoming connections. Can I get access to the links or the schema from inside the renderer?

Thanks!

Unidirectional Dragging

Describe the solution you'd like
I'm creating a data import tool that will allow users to import CSV data from somewhere else that might not necessarily have the same headers, or that might need to transform their data somehow before it can be imported. I'm using beautiful-react-digrams to create a visual interface for defining the mapping of the source data fields to the destination data fields. The source and destination fields should be fixed on the left and right side of the Diagram Canvas respecitvely, but their vertical order can be changed.

For this I'd like to be able to restrict the dragging on the node objects to the 'Y' axis.

Describe alternatives you've considered
I could re-implement the drag functionality in my custom node render components, but then I'd have to import the internal_hook useDrag which seems sort of hackish. Also, since I'm copying the code pretty much directly from DiagramNode.js, it seems redundant.

Additional context
I forked this repo and created a PR in the forked repo with the implementation of this feature: https://github.com/mstone121/beautiful-react-diagrams/pull/1

Typescript with custom Nodes

Describe the bug
Type definition for ports doesn't extends React.DetailedReactHTMLElement which makes createSchema throw error

To Reproduce

import { createSchema } from "beautiful-react-diagrams";
import React from "react";

const CustomNode = (props: {
  inputs?: React.DetailedReactHTMLElement<any, any>[];
}) => {
  const { inputs } = props;

  return (
    <div style={{ background: "#717EC3", borderRadius: "10px" }}>
      <div style={{ padding: "10px", color: "white" }}>Custom Node</div>
      <div style={{ marginTop: "20px" }}>
        {inputs?.map((port) =>
          React.cloneElement(port, {
            style: { width: "50px", height: "25px", background: "#1B263B" }
          })
        )}
      </div>
    </div>
  );
};

createSchema({
  nodes: [
    {
      id: "node-1",
      content: "Node 1",
      coordinates: [150, 60],
      outputs: [{ id: "port-1", alignment: "right" }]
    },
    {
      id: "node-custom",
      coordinates: [250, 60],
      render: CustomNode, // <-- ERROR
      inputs: [{ id: "custom-port-1", alignment: "left" }]
    }
  ]
});

Expected behavior
not to throw error

Screenshots

Additional context
live preview:
https://codesandbox.io/s/beautiful-react-diagram-ts-error-vxw5h

Not able to render new nodes from outside the component

First of all I wanna say that those diagrams are truly 'beautiful'!
Then I wanna warn you that it is not possible to edit the content of the Diagram from outside the component. For example I added a button to add a new Node in the canvas and even if the schema gets updated the canvas does not change until I make something on the canvas itself (for example moving an already present node or trying to attach some links).
I hope I am completely stupid and there is a simple way to do it.
Nice work and thank you!

Broken link for "gh-pages"

Describe the bug
A clear and concise description of what the bug is.
I guess the username has been changed, it would be better if you can fix the gh-pages link to this one.

To Reproduce
Steps to reproduce the behavior: NA

z-index of a node dragging is higher than others

Example:

Node 4 is higher than node 3, and 3 is higher than 2.
So how i can control the z-index when node 2 is dragging, or when I'm click on Node 2 and node 2 have z-index higher than other.

• Hope you can understand my idea. My English grammar is not good 😊

100% code coverage

The current code coverage is poorly around 40%, it would be nice to have a 100% score and I'd love to have some help in doing so.
Please feel free to open any PR.

useSchema should export a "disconnect" function to programmatically disconnect two linked nodes

Given that useSchema currently exports a connect function to connects two different nodes and a removeNode function to remove a given node, it should also export a disconnect function to programmatically disconnect two linked nodes without removing them.
At the moment the only way to do so, is to change the schema directly.

Hi , how to have port name ?

how to have the port name in output/input ?

inputs: [
        { id: "custom-port-1", alignment: "left", label: "one" },
        { id: "custom-port-2", alignment: "left", label: "two" },
      ],   

Linking Nodes - 1:1 relation

Is your feature request related to a problem? Please describe.
I'd like to use this awesome library but I didn't find the option to make 1:1 relation of links
Now you can connect 1 node with n other nodes.

Describe the solution you'd like
When a node is connected with another one, the port should be disabled (so that it doesn’t connect with another node) until the blocks are disconnected.

add label to connect input argumants

Is your feature request related to a problem? Please describe.
when i tray to use uncontrolled diagram i figure out that there is no way to add label to path because the connect method just take inputId and outputId

I tray to use state and manually fix that but control this component with state is very hard

Wrong link position after custom Css `scale` then window resize when using `ports` ?

Describe the bug
A clear and concise description of what the bug is.
Th link positions is wrong after custom Css scale and then window resize when using ports ?

To Reproduce
Steps to reproduce the behavior:

1. Open the Port demo https://beautifulinteractions.github.io/beautiful-react-diagrams/#/Ports
2. Set css transform: scale(1.5) to the DOM element with bi bi-diagram className.
3. Resize the window then.
4. See error

Expected behavior
A clear and concise description of what you expected to happen.
The path will follow with the special port.

Screenshots
If applicable, add screenshots to help explain your problem.

https://ibb.co/88V6w1K

Desktop (please complete the following information):

• OS: iMac (Retina 5K, 27-inch, 2017)
• Browser: chrome latest
• Version: latest

Additional context
Add any other context about the problem here.

Link should be controlled as well

Describe the bug

According to the docs: "Controlled components: exports controlled components only."

To Reproduce
Try to set a Link's path

Expected behavior
Each link should have a path key.

Additional context

With controlled links, it would be trivial to create auto-layout with better path choices (ex. DagreJS)

Few interesting features

Is your feature request related to a problem? Please describe.
Hi, few features that I cannot find:

1. Drag n Drop
2. Current "selected" node/link
3. Pinning links to positions

Do they exist or should I implement them myself?
Do you plan on adding them in the near future?

Describe the solution you'd like

1. Having some general drop reaction
2. Highlight and trigger event on node/link click
3. Clicking on a link creates a pin

Describe alternatives you've considered
Looked in the live-demo. is there another source of documentation?

Additional context
Any suggestions on how to implement the above as "plugin"s for the basic node?

Import Type definition for custom Node ?

hey guys how i import the type for your node in custom render?
I test all what i know but am not able to find a ways !

Diagram seem not export Node type !

Actually the only hack i found and make success to get Intelisence types, is by add a default parameter

const CustomNode = (props = createSchema({}).nodes[0]) => {
	const { inputs } = props;

but am not fan with this ugly way !! , am search a way to add type in documentation

Any suggest ?, this React plugin look crazy congrat !
I'm just not a fan to code blinded. :)

maybe allow something like this for avoid <Any>?

/** custom renderer for Diagram Node
 * @param {Diagram['Node']} props - Current Node
*/
const CustomNode = (props) => { ...

[BUG] Output Port not going to the right side as requested

Hello,

When creating a custom node I can't get to lock the output port on the right side of the node. I am sure this is a silly mistake and I should have missed something.
Here is a pastebin with my code : https://pastebin.com/nBwFNciw

Thanks for your help =D

Edit : with your own demo code with "right" instead of "left" it doesn't work too :)

Removing linked node cause 'undefined entity' error

Describe the bug
When removing a node linked to another one, the library rise an 'undefined entity' error.

To Reproduce
Steps to reproduce the behaviour:

1. Create a schema with different nodes, having a button to remove the node itself.
2. Link one node to another one
3. Remove one of the two linked nodes
4. See error

Expected behavior
Removing a linked node shouldn't cause the application to stop working properly.

Child Nodes receive an outdated version of the schema.

I'm not sure if it is the correct way but I want to use custom node renderer like child component. I want to manipulate schema object when I click on custom node. But I'm just getting (probably) a copy of schema state for each node.

If I try the code below and add a few nodes, on each click I see different length of schema.nodes? How can I get "correct" schema?

import Diagram from 'beautiful-react-diagrams';

const CustomNode = (props) => {
    const {
        inputs
    } = props;
    const {
        onClick
    } = props.data;

    return ( <
        div style = {
            {
                background: '#717EC3',
                borderRadius: '10px'
            }
        }
        onClick = {
            onClick
        } >
        <
        div style = {
            {
                padding: '10px',
                color: 'white'
            }
        } >
        Custom Node <
        /div> <
        div style = {
            {
                marginTop: '20px'
            }
        } > {
            inputs.map((port) => React.cloneElement(port, {
                style: {
                    width: '50px',
                    height: '25px',
                    background: '#1B263B'
                }
            }))
        } <
        /div> <
        /div>
    );
};

const initialSchema = {
    nodes: [{
            id: 'node-1',
            content: 'Node 1',
            coordinates: [150, 60],
            outputs: [{
                id: 'port-1',
                alignment: 'right'
            }],
        },
        {
            id: 'node-custom',
            coordinates: [250, 60],
            render: CustomNode,
            inputs: [{
                id: 'custom-port-1',
                alignment: 'left'
            }],
        },
    ]
};

const UncontrolledDiagram = () => {
    // create diagrams schema
    const [schema, setSchema] = React.useState(initialSchema);

    const showInfo = () => {
        console.log(schema.nodes.length);
    }

    const addNode = () => {
        const node = {
            id: Math.random().toString(),
            coordinates: [250, 60],
            render: CustomNode,
            data: {
                onClick: showInfo,
            },
            inputs: [{
                id: 'custom-port-1',
                alignment: 'left'
            }],
        }
        setSchema({
            ...schema,
            nodes: [...schema.nodes, node]
        });
    }

    return ( <
        div style = {
            {
                height: '22.5rem'
            }
        } >
        <
        button onClick = {
            () => addNode()
        } > Add < /button> <
        Diagram schema = {
            schema
        }
        onChange = {
            setSchema
        }
        /> <
        /div>
    );
};

<
UncontrolledDiagram / >

Scrolling canvas to allow nodes outside the visible screen

Hi

quick question, is there a way to define a drawing area larger than the one fitting the screen
from what I see, the drawing area is currently limited and we can't have nodes outside the visible screen

maybe this is something doable with css or a canvas option?

Regards
Hicham

Interactive elements should be focusable

Describe the bug
While going through the Code in index-tests.tsx I found this particular block of Code:

      render: ({ content, data }) => (
        <div
          onDoubleClick={data?.onDoubleClick}
          role='button'
          style={{ padding: '15px', background: 'purple' }}
        >
          {content}
        </div>

Here the Interactive elements should be focusable. According to this resource :

Buttons are interactive controls and thus focusable. If the button role is 
added to an element that is not focusable by itself (such as <span>, 
<div> or <p>) then, the tabindex attribute has to be used to make the button focusable.

This can be fixed by using the tabIndex as per my best knowledge.

Module not found: Can't resolve 'beautiful-react-diagrams/styles.css'

I was installation with npm. After that, i'm import style to root src/index.js : import 'beautiful-react-diagrams/styles.css';

and issues:
Module not found: Can't resolve 'beautiful-react-diagrams/styles.css' in 'D:\Study\React\mastering-dnd\src'

Potential Bug Risks and Anti-Patterns

Description

I ran DeepSource Static Code Analysis upon the Project, the results for which are available here.

The Static Code Analysis Tool found potential bugs and anti-patterns in the Code, that can be detrimental at a later point of time with respect to the Project. Some of the notable issues are:

• Missing props validation in a React component definition
• Unused and Undeclared Variables
• Use of console statements on Browser
• Use of Alert, Confirm and Prompt
• Restrict file extensions that may contain JSX

Attempted import error: 'createSchema', 'useSchema' is not exported from 'beautiful-react-diagrams'

Im read the part Customisation in document
https://antonioru.github.io/beautiful-react-diagrams/#/Customisation

version: [email protected]

Code is:

import Diagram, { createSchema, useSchema } from "beautiful-react-diagrams";

and issues:

Attempted import error: 'createSchema' is not exported from 'beautiful-react-diagrams'

Attempted import error: 'useSchema ' is not exported from 'beautiful-react-diagrams'

i was temporary fixed it by add the /index to import: "beautiful-react-diagrams/index"

Directed links

Is your feature request related to a problem? Please describe.
Link are undirected, it would be nice feature to have option for directed links.

Describe the solution you'd like
An arrow (or user-defined component ideally, with an arrow as default) on the 'end' side of link displayed when an option (isDirected for example) is set to true when defining link.

Live Playground Link in README.MD broken

Title is self explanatory. Clicking the link leads to a 404 Not Found message from github.

How can I connect parent node directly with child node when created.

I want that, when I click on Add node button, the new node rendered on the screen should directly be connected to the parent node. How I can achieve this, Could you please help!

How to make a custom node draggable only by its header?

• Im had build a custom node, by default of lib, the node is can drag by click anywhere in node
• But i want only the header of node(*) is can drag for move node around.
• How can i do that, or maybe is it feature request? 😊

(*) header of node is div that has blue color (Average Humidity, Table)

Content render issue

If we specify the width and height for the diagram parent div then it doesn't render the content outside of viewport means the connection line (Link) that are in the overflow of that div. Then if you scroll to left / down there is no connection line (Link)

How to add `className` and `readonly` to link with `connect` function?

Is your feature request related to a problem? Please describe.

The connect function only can connect to portId, but can't custom the extra information.

Describe the solution you'd like

I can add className and readonly to link with connect function.

Describe alternatives you've considered

Additional context

Showing Direction of link

How to show the direction of the link continuously instead of just showing it on hover?

Constrain connections between ports?

Is it possible to specify that certain input ports can connect only to certain output ports (and vice versa)? For example, if I had "red" and "green" output ports, and also "red" and "green" input ports, is it possible to only allow a connection dragged from the "red" output to attach to a "red" input port? Also, is there a way to provide feedback when dragging a connection over a port, e.g. to indicate that the connection is allowed/disallowed?

Direction of link flow

First of all....congratulations for the awesome library. I've seen a few, but this is the easiest and quickest to understand and work with. The examples are also very good! Well done.

Is your feature request related to a problem? Please describe.
The direction of the "information flow" animation I expected it would be from an output port of one node, to an input port of another. When connecting the nodes though, the schema object for the link shows that this is not the case (i.e. the link direction seems to flow from output to input instead). For example, in the customisation example https://beautifulinteractions.github.io/beautiful-react-diagrams/#/Customisation you will note that when you connect the ports, when you hover, the information goes from right to left, i.e. goes the opposite direction that I would expect.

Describe the solution you'd like
Inspecting the schema object, it seems that the input and output seem to be swapped when set? (that means that the input, output of the link should be the other way around or the CSS attributed to each case should we swapped around).

Describe alternatives you've considered
I've used a useEffect on schema.links to track the last added link and swapped the input/output in the schema object directly. This confirmed that the input/output stored in the schema must be the other way around. I could swap the CSS around, but I can't work it out (yet).

Additional context
nothing to add....other than well done again!

Error: Invalid hook call on clean install

Describe the bug
After cloning the most recent version, I'm getting the following error in the browser, perhaps related to the dependency beautiful-react-ui:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
   in Unknown
   in Unknown (created by CustomSidebar)
   in CustomSidebar (created by TableOfContents)
   in TableOfContents (created by StyleGuide)
   in div (created by StyleGuideRenderer)
   in div (created by StyleGuideRenderer)
   in StyleGuideRenderer (created by Styled(StyleGuide))
   in Styled(StyleGuide) (created by StyleGuide)
   in StyleGuide
   This may be due to an error in a component you are overriding, or a bug in React Styleguidist.

If you believe this is a bug, please submit an issue.

To Reproduce
Steps to reproduce the behavior:

1. Create a new clone of the repo, install deps and run
2. Open in browser

Expected behavior
Should run in browser

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• Mac OS Catalina
• Chrome 86.0.4240.198