Customizable & Interactive Diagram Maker In JavaScript

Category: Chart & Graph , Javascript , Recommended | October 12, 2020
Author:awslabs
Views Total:55 views
Official Page:Go to website
Last Update:October 12, 2020
License:MIT

Preview:

Customizable & Interactive Diagram Maker In JavaScript

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/.

You Might Be Interested In:


Leave a Reply