Installing Diagram

To start charting with Diagram, you need to:

Include the necessary JS and CSS files into your HTML file
Call the object constructor.

Files to Include

You need to include 4 files on a page:

<html>
 <head>
  <!-- Webix Library -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <link rel="stylesheet" href="codebase/webix.css" type="text/css">
 
  <!-- Diagram -->
  <script type="text/javascript" src="codebase/diagram.js"></script>
  <link rel="stylesheet" href="codebase/diagram.css" type="text/css">
 </head>
</html>

Read the next chapter to learn how to initialize and configure Diagram.

Running Package Samples Locally

After downloading Diagram there are 3 ways to run package samples locally. The simplest one is to navigate to the root directory and open the samples folder. Find the desired file and open it with a double-click. The sample will be opened in a new browser tab.

Running samples on a local server

You can run package samples on a local server (e.g Apache). Set the Diagram folder as the root directory of the local server and launch the server. In general a local server runs at localhost.

Running samples on a development server

To be able to modify samples and see the corresponding changes you should run them on a development server. Go to the Diagram root directory, install the necessary dependencies and start the server as:

// navigate to the root directory
cd diagram
 
// install dependencies
yarn install //or npm install
 
// start dev server
yarn server //or npm run server