Feature Overview

This is an overview example of what’s possible with React Flow. Below you can see features like: built-in node and edge types, sub flows, NodeToolbar, NodeResizer components. On the bottom you see the Controls and the MiniMap components.


import { memo } from 'react';
 
function AnnotationNode({ data }) {
  return (
    <>
      <div className='annotation-content'>
        <div className='annotation-level'>{data.level}.</div>
        <div>{data.label}</div>
      </div>
      {data.arrowStyle && (
        <div className="annotation-arrow" style={data.arrowStyle}>
          ⤹
        </div>
      )}
    </>
  );
}
 
export default memo(AnnotationNode);