npm's personal messenger
Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »


5.1.0 • Public • Published

Basic Primitives

JavaScript Diagrams Library - implements organizational and multi-parent diagrams. Archive contains implementations of JavaScript Controls and PDFkit plugins. PDFkit is NodeJS and in browser PDF rendering library. Diagrams visualize nodes using HTML templates combined with HTML5 Canvas and SVG graphics elements. Diagrams work in all major modern browsers Internet Explorer, Chrome, Firefox, Safari including mobile browsers.

Supported Diagrams

  • Hierarchy Visualization
  • Organizational Chart
  • Multi-parent hierarchical chart
  • Family Tree
  • Dependencies Diagram
  • PERT chart
  • Financial Ownership Diagram

Getting Started

Go to to see on-line examples and samples.

First Organizational Diagram Sample

<!DOCTYPE html> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>First organization diagram</title>

    <!-- # include file="../../src.primitives/src.primitives.html"-->
    <script type="text/javascript" src="../../min/primitives.min.js?5000"></script>
    <link href="../../min/primitives.latest.css?5000" media="screen" rel="stylesheet" type="text/css" />

    <script type='text/javascript'>
        var control;
        var timer = null;

        document.addEventListener('DOMContentLoaded', function () {
            var options = new primitives.orgdiagram.Config();

            var items = [
                new primitives.orgdiagram.ItemConfig({
                    id: 0,
                    parent: null,
                    title: "Scott Aasrud",
                    description: "VP, Public Sector",
                    image: "../images/photos/a.png"
                new primitives.orgdiagram.ItemConfig({
                    id: 1,
                    parent: 0,
                    title: "Ted Lucas",
                    description: "VP, Human Resources",
                    image: "../images/photos/b.png"
                new primitives.orgdiagram.ItemConfig({
                    id: 2,
                    parent: 0,
                    title: "Fritz Stuger",
                    description: "Business Solutions, US",
                    image: "../images/photos/c.png"

            options.items = items;
            options.cursorItem = 0;
            options.hasSelectorCheckbox = primitives.common.Enabled.True;

            control = primitives.orgdiagram.Control(document.getElementById("basicdiagram"), options);

    <div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>


Copyright (c) 2013 - 2018 Basic Primitives Inc Non-commercial - Free

Commercial and government licenses:




npm i basicprimitives

Downloadsweekly downloads





last publish


  • avatar
Report a vulnerability