Customizable & Interactive Diagram Maker In JavaScript

Preview:

Description:

A fully customizable, interactive, and extensible diagram maker library that supports any framework such as React, Vue, etc.

More Features:

• Framework and data format agnostic.
• Declarative Interface.
• Bundled Types.
• Canvas panning & zooming
• Node/Panel/Edge dragging.
• Keyboard interactions.
• Context menus.
• Drag & Select modes.

Basic Usage:

1. Install the package 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 new instance of the diagram maker and pass the following parameters:

• Container: The container to hold the diagram
• Configuration: Configurations
• Parameters: Optional 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;
  };
}

5. For guidance on how to build and config the diagram, see https://awslabs.github.io/diagram-maker/usage/.