This is an NPM package of Nimblestory for viewing Smart Diagram data in external applications.

Prerequisites

Getting Started

First, we need to get the latest version of the package to the project

npm install @nimblestory/diagram-viewer@latest

Before we start importing the package we have to make sure that the styles are included in the application.

import '@nimblestory/diagram-viewer/lib/styles/index.css';

This imports styles for the components and required packages used for styling (such as the Ant Design library and React Flow). Now that we have the styles ready we can import the player.

import DiagramViewer from '@nimblestory/diagram-viewer'; // this will work depending on the framework usage
// OR
const DiagramViewer = dynamic(() => import('@nimblestory/diagram-viewer'), { ssr: false }); // next/dynamic

Now that we have the package imported we can create a confing to supply it with. The DiagramViewer accepts these parameters:

diagramData: Diagram | undefined; // Diagram data - can be undefined due to async loading of data