A JavaScript Library to Display an Interactive Editor for Any Graph

Diagram Maker is a library to display an interactive editor for any graph-like data. This plugin fully customizable, interactive, and extensible graphic maker library that supports any framework like React, Vue, etc.

Read more about the library’s features here.

How to make use of it:

1. Install the package deal with NPM.

# Yarn
$ yarn add diagram-maker

# NPM
$ npm i diagram-maker --save

2. Import the DiagramMaker as an ES module.

import { DiagramMaker } from 'diagram-maker';

3. Create a brand new instance of the diagram maker and cross the next parameters:

const diagramMaker = new DiagramMaker(
      container,
      config,
      optionalParams
);

4. Available configurations.

export interface DiagramMakerConfig<NodeType, EdgeType> {
  /**
   * Optional configuration for diagram maker
   */
  options?: {
    /**
     * Connector placement. Determines how the edges are rendered.
     * Also renders default connectors for some placement types.
     * Defaults to CENTERED placement.
     */
    connectorPlacement?: ConnectorPlacementType;
    /**
     * Show an arrowhead at the destination end of the edge.
     * Defaults to false.
     */
    showArrowhead?: boolean;
  };
  /**
   * Render Callbacks for rendering nodes, potential nodes, edges, panels,
   * context menus, etc.
   */
  renderCallbacks: RenderCallbacks<NodeType, EdgeType>;
  /**
   * Action interceptor. Before any action is dispatched to the store,
   * you may intercept and modify it or cancel it entirely.
   * Please keep in mind that in case you implement an interceptor,
   * you're responsible for dispatching the action.
   *
   * @example <caption>Logging an action</caption>
   * const log = (action, dispatch, getState) => {
   *   console.log(action);
   *   dispatch(action);
   * };
   */
  actionInterceptor?: ActionInterceptor<NodeType, EdgeType>;
  /**
   * Node Type Configuration. Optional.
   * Useful for specifying overrides for connector placement or visible connectors.
   * Also, useful for providing for size for potential nodes being dragged using the same type.
   * Is required when using boundary connector placement to provide shapes for different
   * node types.
   */
  nodeTypeConfig?: {
    [typeId: string]: DiagramMakerNodeTypeConfiguration;
  };
}

Customizable & Interactive Diagram Maker, Diagram Maker Plugin/Github