React Diagram - Shapes with Base Type

The Diagram component allows you to bind a customShapes collection to a data source. In this demo, the collection is bound to an array of employee objects. The Diagram creates a shape for every employee data item in the data source and adds the shapes to the "employees" category.

The toolbox property allows you to add custom categories to a data toolbox.

Users can drag data items from the toolbox and drop them onto a canvas to create a diagram.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

​x
 
import React, { useEffect, useRef } from 'react';
import Diagram, { CustomShape, Group, Toolbox, DiagramRef } from 'devextreme-react/diagram';import service from './data.ts';import 'whatwg-fetch';​const employees = service.getEmployees();​export default function App() {  const diagramRef = useRef<DiagramRef>();​  useEffect(() => {    const diagram = diagramRef.current.instance();    fetch('data/diagram-employees.json')      .then((response) => response.json())      .then((json) => {        diagram.import(JSON.stringify(json));      })      .catch(() => {        throw new Error('Data Loading Error');      });  }, []);​  return (    <Diagram id="diagram" ref={diagramRef}>      {employees.map((employee, index) => (        <CustomShape          category="employees"          type={`employee${employee.ID}`}          baseType="rectangle"          defaultText={employee.Full_Name}          allowEditText={false}          key={index}        />      ))}      <Toolbox>        <Group category={'employees' as any} title="Employees" displayMode="texts" />      </Toolbox>    </Diagram>  );}​

xxxxxxxxxx
 
import React, { useEffect, useRef } from 'react';
import Diagram, { CustomShape, Group, Toolbox } from 'devextreme-react/diagram';import service from './data.js';import 'whatwg-fetch';​const employees = service.getEmployees();export default function App() {  const diagramRef = useRef();  useEffect(() => {    const diagram = diagramRef.current.instance();    fetch('data/diagram-employees.json')      .then((response) => response.json())      .then((json) => {        diagram.import(JSON.stringify(json));      })      .catch(() => {        throw new Error('Data Loading Error');      });  }, []);  return (    <Diagram      id="diagram"      ref={diagramRef}    >      {employees.map((employee, index) => (        <CustomShape          category="employees"          type={`employee${employee.ID}`}          baseType="rectangle"          defaultText={employee.Full_Name}          allowEditText={false}          key={index}        />      ))}      <Toolbox>        <Group          category="employees"          title="Employees"          displayMode="texts"        />      </Toolbox>    </Diagram>  );}​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';​import App from './App.tsx';​ReactDOM.render(  <App />,  document.getElementById('app'),);​

xxxxxxxxxx
 
const employees = [{
  ID: 1,  Head_ID: 0,  Full_Name: 'John Heart',  Prefix: 'Mr.',  Title: 'CEO',  City: 'Los Angeles',  State: 'California',  Email: 'jheart@dx-email.com',  Skype: 'jheart_DX_skype',  Mobile_Phone: '(213) 555-9392',  Birth_Date: '1964-03-16',  Hire_Date: '1995-01-15',}, {  ID: 2,  Head_ID: 1,  Full_Name: 'Samantha Bright',  Prefix: 'Dr.',  Title: 'COO',  City: 'Los Angeles',  State: 'California',  Email: 'samanthab@dx-email.com',  Skype: 'samanthab_DX_skype',  Mobile_Phone: '(213) 555-2858',  Birth_Date: '1966-05-02',  Hire_Date: '2004-05-24',}, {  ID: 3,  Head_ID: 1,  Full_Name: 'Arthur Miller',  Prefix: 'Mr.',  Title: 'CTO',  City: 'Denver',  State: 'Colorado',  Email: 'arthurm@dx-email.com',  Skype: 'arthurm_DX_skype',  Mobile_Phone: '(310) 555-8583',  Birth_Date: '1972-07-11',  Hire_Date: '2007-12-18',}, {  ID: 4,  Head_ID: 1,  Full_Name: 'Robert Reagan',  Prefix: 'Mr.',  Title: 'CMO',  City: 'Bentonville',  State: 'Arkansas',  Email: 'robertr@dx-email.com',  Skype: 'robertr_DX_skype',  Mobile_Phone: '(818) 555-2387',  Birth_Date: '1974-09-07',  Hire_Date: '2002-11-08',}, {  ID: 5,  Head_ID: 1,  Full_Name: 'Greta Sims',  Prefix: 'Ms.',  Title: 'HR Manager',  City: 'Atlanta',  State: 'Georgia',  Email: 'gretas@dx-email.com',  Skype: 'gretas_DX_skype',  Mobile_Phone: '(818) 555-6546',  Birth_Date: '1977-11-22',  Hire_Date: '1998-04-23',}, {  ID: 6,  Head_ID: 3,  Full_Name: 'Brett Wade',  Prefix: 'Mr.',  Title: 'IT Manager',  City: 'Reno',  State: 'Nevada',  Email: 'brettw@dx-email.com',  Skype: 'brettw_DX_skype',  Mobile_Phone: '(626) 555-0358',  Birth_Date: '1968-12-01',  Hire_Date: '2009-03-06',}, {  ID: 7,  Head_ID: 5,  Full_Name: 'Sandra Johnson',  Prefix: 'Mrs.',  Title: 'Controller',  City: 'Beaver',  State: 'Utah',  Email: 'sandraj@dx-email.com',  Skype: 'sandraj_DX_skype',  Mobile_Phone: '(562) 555-2082',  Birth_Date: '1974-11-15',  Hire_Date: '2005-05-11',}, {  ID: 8,  Head_ID: 4,  Full_Name: 'Ed Holmes',  Prefix: 'Dr.',  Title: 'Sales Manager',  City: 'Malibu',  State: 'California',  Email: 'edwardh@dx-email.com',  Skype: 'edwardh_DX_skype',  Mobile_Phone: '(310) 555-1288',  Birth_Date: '1973-07-14',  Hire_Date: '2005-06-19',}, {  ID: 9,  Head_ID: 3,  Full_Name: 'Barb Banks',  Prefix: 'Mrs.',  Title: 'Support Manager',  City: 'Phoenix',  State: 'Arizona',  Email: 'barbarab@dx-email.com',  Skype: 'barbarab_DX_skype',  Mobile_Phone: '(310) 555-3355',  Birth_Date: '1979-04-14',  Hire_Date: '2002-08-07',}, {  ID: 10,  Head_ID: 2,  Full_Name: 'Kevin Carter',  Prefix: 'Mr.',  Title: 'Shipping Manager',  City: 'San Diego',  State: 'California',  Email: 'kevinc@dx-email.com',  Skype: 'kevinc_DX_skype',  Mobile_Phone: '(213) 555-2840',  Birth_Date: '1978-01-09',  Hire_Date: '2009-08-11',}, {  ID: 11,  Head_ID: 5,  Full_Name: 'Cindy Stanwick',  Prefix: 'Ms.',  Title: 'HR Assistant',  City: 'Little Rock',  State: 'Arkansas',  Email: 'cindys@dx-email.com',  Skype: 'cindys_DX_skype',  Mobile_Phone: '(818) 555-6655',  Birth_Date: '1985-06-05',  Hire_Date: '2008-03-24',}, {  ID: 12,  Head_ID: 8,  Full_Name: 'Sammy Hill',  Prefix: 'Mr.',  Title: 'Sales Assistant',  City: 'Pasadena',  State: 'California',  Email: 'sammyh@dx-email.com',  Skype: 'sammyh_DX_skype',  Mobile_Phone: '(626) 555-7292',  Birth_Date: '1984-02-17',  Hire_Date: '2012-02-01',}, {  ID: 13,  Head_ID: 10,  Full_Name: 'Davey Jones',  Prefix: 'Mr.',  Title: 'Shipping Assistant',  City: 'Pasadena',  State: 'California',  Email: 'davidj@dx-email.com',  Skype: 'davidj_DX_skype',  Mobile_Phone: '(626) 555-0281',  Birth_Date: '1983-03-06',  Hire_Date: '2011-04-24',}, {  ID: 14,  Head_ID: 10,  Full_Name: 'Victor Norris',  Prefix: 'Mr.',  Title: 'Shipping Assistant',  City: 'Little Rock',  State: 'Arkansas',  Email: 'victorn@dx-email.com',  Skype: 'victorn_DX_skype',  Mobile_Phone: '(213) 555-9278',  Birth_Date: '1986-07-23',  Hire_Date: '2012-07-23',}, {  ID: 15,  Head_ID: 10,  Full_Name: 'Mary Stern',  Prefix: 'Ms.',  Title: 'Shipping Assistant',  City: 'Beaver',  State: 'Utah',  Email: 'marys@dx-email.com',  Skype: 'marys_DX_skype',  Mobile_Phone: '(818) 555-7857',  Birth_Date: '1982-04-08',  Hire_Date: '2012-08-12',}, {  ID: 16,  Head_ID: 10,  Full_Name: 'Robin Cosworth',  Prefix: 'Mrs.',  Title: 'Shipping Assistant',  City: 'Los Angeles',  State: 'California',  Email: 'robinc@dx-email.com',  Skype: 'robinc_DX_skype',  Mobile_Phone: '(818) 555-0942',  Birth_Date: '1981-06-12',  Hire_Date: '2012-09-01',}, {  ID: 17,  Head_ID: 9,  Full_Name: 'Kelly Rodriguez',  Prefix: 'Ms.',  Title: 'Support Assistant',  City: 'Boise',  State: 'Idaho',  Email: 'kellyr@dx-email.com',  Skype: 'kellyr_DX_skype',  Mobile_Phone: '(818) 555-9248',  Birth_Date: '1988-05-11',  Hire_Date: '2012-10-13',}, {  ID: 18,  Head_ID: 9,  Full_Name: 'James Anderson',  Prefix: 'Mr.',  Title: 'Support Assistant',  City: 'Atlanta',  State: 'Georgia',  Email: 'jamesa@dx-email.com',  Skype: 'jamesa_DX_skype',  Mobile_Phone: '(323) 555-4702',  Birth_Date: '1987-01-29',  Hire_Date: '2012-10-18',}, {  ID: 19,  Head_ID: 9,  Full_Name: 'Antony Remmen',  Prefix: 'Mr.',  Title: 'Support Assistant',  City: 'Boise',  State: 'Idaho',  Email: 'anthonyr@dx-email.com',  Skype: 'anthonyr_DX_skype',  Mobile_Phone: '(310) 555-6625',  Birth_Date: '1986-02-19',  Hire_Date: '2013-01-19',}, {  ID: 20,  Head_ID: 8,  Full_Name: 'Olivia Peyton',  Prefix: 'Mrs.',  Title: 'Sales Assistant',  City: 'Atlanta',  State: 'Georgia',  Email: 'oliviap@dx-email.com',  Skype: 'oliviap_DX_skype',  Mobile_Phone: '(310) 555-2728',  Birth_Date: '1981-06-03',  Hire_Date: '2012-05-14',}, {  ID: 21,  Head_ID: 6,  Full_Name: 'Taylor Riley',  Prefix: 'Mr.',  Title: 'Network Admin',  City: 'San Jose',  State: 'California',  Email: 'taylorr@dx-email.com',  Skype: 'taylorr_DX_skype',  Mobile_Phone: '(310) 555-7276',  Birth_Date: '1982-08-14',  Hire_Date: '2012-04-14',}, {  ID: 22,  Head_ID: 6,  Full_Name: 'Amelia Harper',  Prefix: 'Mrs.',  Title: 'Network Admin',  City: 'Los Angeles',  State: 'California',  Email: 'ameliah@dx-email.com',  Skype: 'ameliah_DX_skype',  Mobile_Phone: '(213) 555-4276',  Birth_Date: '1983-11-19',  Hire_Date: '2011-02-10',}, {  ID: 23,  Head_ID: 6,  Full_Name: 'Wally Hobbs',  Prefix: 'Mr.',  Title: 'Programmer',  City: 'Chatsworth',  State: 'California',  Email: 'wallyh@dx-email.com',  Skype: 'wallyh_DX_skype',  Mobile_Phone: '(818) 555-8872',  Birth_Date: '1984-12-24',  Hire_Date: '2011-02-17',}, {  ID: 24,  Head_ID: 6,  Full_Name: 'Brad Jameson',  Prefix: 'Mr.',  Title: 'Programmer',  City: 'San Fernando',  State: 'California',  Email: 'bradleyj@dx-email.com',  Skype: 'bradleyj_DX_skype',  Mobile_Phone: '(818) 555-4646',  Birth_Date: '1988-10-12',  Hire_Date: '2011-03-02',}, {  ID: 25,  Head_ID: 6,  Full_Name: 'Karen Goodson',  Prefix: 'Miss',  Title: 'Programmer',  City: 'South Pasadena',  State: 'California',  Email: 'kareng@dx-email.com',  Skype: 'kareng_DX_skype',  Mobile_Phone: '(626) 555-0908',  Birth_Date: '1987-04-26',  Hire_Date: '2011-03-14',}, {  ID: 26,  Head_ID: 5,  Full_Name: 'Marcus Orbison',  Prefix: 'Mr.',  Title: 'Travel Coordinator',  City: 'Los Angeles',  State: 'California',  Email: 'marcuso@dx-email.com',  Skype: 'marcuso_DX_skype',  Mobile_Phone: '(213) 555-7098',  Birth_Date: '1982-03-02',  Hire_Date: '2005-05-19',}];​export default {  getEmployees() {    return employees;  },};​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,    jsx: 'react',  },  meta: {    'react': {      'esModule': true,    },    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'react': 'npm:react@17.0.2/umd/react.development.js',    'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',    'prop-types': 'npm:prop-types/prop-types.js',    'whatwg-fetch': 'npm:whatwg-fetch@2.0.4/fetch.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',    // SystemJS plugins    'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',    'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';import App from './App.js';​ReactDOM.render(<App />, document.getElementById('app'));​

xxxxxxxxxx
 
const employees = [
  {    ID: 1,    Head_ID: 0,    Full_Name: 'John Heart',    Prefix: 'Mr.',    Title: 'CEO',    City: 'Los Angeles',    State: 'California',    Email: 'jheart@dx-email.com',    Skype: 'jheart_DX_skype',    Mobile_Phone: '(213) 555-9392',    Birth_Date: '1964-03-16',    Hire_Date: '1995-01-15',  },  {    ID: 2,    Head_ID: 1,    Full_Name: 'Samantha Bright',    Prefix: 'Dr.',    Title: 'COO',    City: 'Los Angeles',    State: 'California',    Email: 'samanthab@dx-email.com',    Skype: 'samanthab_DX_skype',    Mobile_Phone: '(213) 555-2858',    Birth_Date: '1966-05-02',    Hire_Date: '2004-05-24',  },  {    ID: 3,    Head_ID: 1,    Full_Name: 'Arthur Miller',    Prefix: 'Mr.',    Title: 'CTO',    City: 'Denver',    State: 'Colorado',    Email: 'arthurm@dx-email.com',    Skype: 'arthurm_DX_skype',    Mobile_Phone: '(310) 555-8583',    Birth_Date: '1972-07-11',    Hire_Date: '2007-12-18',  },  {    ID: 4,    Head_ID: 1,    Full_Name: 'Robert Reagan',    Prefix: 'Mr.',    Title: 'CMO',    City: 'Bentonville',    State: 'Arkansas',    Email: 'robertr@dx-email.com',    Skype: 'robertr_DX_skype',    Mobile_Phone: '(818) 555-2387',    Birth_Date: '1974-09-07',    Hire_Date: '2002-11-08',  },  {    ID: 5,    Head_ID: 1,    Full_Name: 'Greta Sims',    Prefix: 'Ms.',    Title: 'HR Manager',    City: 'Atlanta',    State: 'Georgia',    Email: 'gretas@dx-email.com',    Skype: 'gretas_DX_skype',    Mobile_Phone: '(818) 555-6546',    Birth_Date: '1977-11-22',    Hire_Date: '1998-04-23',  },  {    ID: 6,    Head_ID: 3,    Full_Name: 'Brett Wade',    Prefix: 'Mr.',    Title: 'IT Manager',    City: 'Reno',    State: 'Nevada',    Email: 'brettw@dx-email.com',    Skype: 'brettw_DX_skype',    Mobile_Phone: '(626) 555-0358',    Birth_Date: '1968-12-01',    Hire_Date: '2009-03-06',  },  {    ID: 7,    Head_ID: 5,    Full_Name: 'Sandra Johnson',    Prefix: 'Mrs.',    Title: 'Controller',    City: 'Beaver',    State: 'Utah',    Email: 'sandraj@dx-email.com',    Skype: 'sandraj_DX_skype',    Mobile_Phone: '(562) 555-2082',    Birth_Date: '1974-11-15',    Hire_Date: '2005-05-11',  },  {    ID: 8,    Head_ID: 4,    Full_Name: 'Ed Holmes',    Prefix: 'Dr.',    Title: 'Sales Manager',    City: 'Malibu',    State: 'California',    Email: 'edwardh@dx-email.com',    Skype: 'edwardh_DX_skype',    Mobile_Phone: '(310) 555-1288',    Birth_Date: '1973-07-14',    Hire_Date: '2005-06-19',  },  {    ID: 9,    Head_ID: 3,    Full_Name: 'Barb Banks',    Prefix: 'Mrs.',    Title: 'Support Manager',    City: 'Phoenix',    State: 'Arizona',    Email: 'barbarab@dx-email.com',    Skype: 'barbarab_DX_skype',    Mobile_Phone: '(310) 555-3355',    Birth_Date: '1979-04-14',    Hire_Date: '2002-08-07',  },  {    ID: 10,    Head_ID: 2,    Full_Name: 'Kevin Carter',    Prefix: 'Mr.',    Title: 'Shipping Manager',    City: 'San Diego',    State: 'California',    Email: 'kevinc@dx-email.com',    Skype: 'kevinc_DX_skype',    Mobile_Phone: '(213) 555-2840',    Birth_Date: '1978-01-09',    Hire_Date: '2009-08-11',  },  {    ID: 11,    Head_ID: 5,    Full_Name: 'Cindy Stanwick',    Prefix: 'Ms.',    Title: 'HR Assistant',    City: 'Little Rock',    State: 'Arkansas',    Email: 'cindys@dx-email.com',    Skype: 'cindys_DX_skype',    Mobile_Phone: '(818) 555-6655',    Birth_Date: '1985-06-05',    Hire_Date: '2008-03-24',  },  {    ID: 12,    Head_ID: 8,    Full_Name: 'Sammy Hill',    Prefix: 'Mr.',    Title: 'Sales Assistant',    City: 'Pasadena',    State: 'California',    Email: 'sammyh@dx-email.com',    Skype: 'sammyh_DX_skype',    Mobile_Phone: '(626) 555-7292',    Birth_Date: '1984-02-17',    Hire_Date: '2012-02-01',  },  {    ID: 13,    Head_ID: 10,    Full_Name: 'Davey Jones',    Prefix: 'Mr.',    Title: 'Shipping Assistant',    City: 'Pasadena',    State: 'California',    Email: 'davidj@dx-email.com',    Skype: 'davidj_DX_skype',    Mobile_Phone: '(626) 555-0281',    Birth_Date: '1983-03-06',    Hire_Date: '2011-04-24',  },  {    ID: 14,    Head_ID: 10,    Full_Name: 'Victor Norris',    Prefix: 'Mr.',    Title: 'Shipping Assistant',    City: 'Little Rock',    State: 'Arkansas',    Email: 'victorn@dx-email.com',    Skype: 'victorn_DX_skype',    Mobile_Phone: '(213) 555-9278',    Birth_Date: '1986-07-23',    Hire_Date: '2012-07-23',  },  {    ID: 15,    Head_ID: 10,    Full_Name: 'Mary Stern',    Prefix: 'Ms.',    Title: 'Shipping Assistant',    City: 'Beaver',    State: 'Utah',    Email: 'marys@dx-email.com',    Skype: 'marys_DX_skype',    Mobile_Phone: '(818) 555-7857',    Birth_Date: '1982-04-08',    Hire_Date: '2012-08-12',  },  {    ID: 16,    Head_ID: 10,    Full_Name: 'Robin Cosworth',    Prefix: 'Mrs.',    Title: 'Shipping Assistant',    City: 'Los Angeles',    State: 'California',    Email: 'robinc@dx-email.com',    Skype: 'robinc_DX_skype',    Mobile_Phone: '(818) 555-0942',    Birth_Date: '1981-06-12',    Hire_Date: '2012-09-01',  },  {    ID: 17,    Head_ID: 9,    Full_Name: 'Kelly Rodriguez',    Prefix: 'Ms.',    Title: 'Support Assistant',    City: 'Boise',    State: 'Idaho',    Email: 'kellyr@dx-email.com',    Skype: 'kellyr_DX_skype',    Mobile_Phone: '(818) 555-9248',    Birth_Date: '1988-05-11',    Hire_Date: '2012-10-13',  },  {    ID: 18,    Head_ID: 9,    Full_Name: 'James Anderson',    Prefix: 'Mr.',    Title: 'Support Assistant',    City: 'Atlanta',    State: 'Georgia',    Email: 'jamesa@dx-email.com',    Skype: 'jamesa_DX_skype',    Mobile_Phone: '(323) 555-4702',    Birth_Date: '1987-01-29',    Hire_Date: '2012-10-18',  },  {    ID: 19,    Head_ID: 9,    Full_Name: 'Antony Remmen',    Prefix: 'Mr.',    Title: 'Support Assistant',    City: 'Boise',    State: 'Idaho',    Email: 'anthonyr@dx-email.com',    Skype: 'anthonyr_DX_skype',    Mobile_Phone: '(310) 555-6625',    Birth_Date: '1986-02-19',    Hire_Date: '2013-01-19',  },  {    ID: 20,    Head_ID: 8,    Full_Name: 'Olivia Peyton',    Prefix: 'Mrs.',    Title: 'Sales Assistant',    City: 'Atlanta',    State: 'Georgia',    Email: 'oliviap@dx-email.com',    Skype: 'oliviap_DX_skype',    Mobile_Phone: '(310) 555-2728',    Birth_Date: '1981-06-03',    Hire_Date: '2012-05-14',  },  {    ID: 21,    Head_ID: 6,    Full_Name: 'Taylor Riley',    Prefix: 'Mr.',    Title: 'Network Admin',    City: 'San Jose',    State: 'California',    Email: 'taylorr@dx-email.com',    Skype: 'taylorr_DX_skype',    Mobile_Phone: '(310) 555-7276',    Birth_Date: '1982-08-14',    Hire_Date: '2012-04-14',  },  {    ID: 22,    Head_ID: 6,    Full_Name: 'Amelia Harper',    Prefix: 'Mrs.',    Title: 'Network Admin',    City: 'Los Angeles',    State: 'California',    Email: 'ameliah@dx-email.com',    Skype: 'ameliah_DX_skype',    Mobile_Phone: '(213) 555-4276',    Birth_Date: '1983-11-19',    Hire_Date: '2011-02-10',  },  {    ID: 23,    Head_ID: 6,    Full_Name: 'Wally Hobbs',    Prefix: 'Mr.',    Title: 'Programmer',    City: 'Chatsworth',    State: 'California',    Email: 'wallyh@dx-email.com',    Skype: 'wallyh_DX_skype',    Mobile_Phone: '(818) 555-8872',    Birth_Date: '1984-12-24',    Hire_Date: '2011-02-17',  },  {    ID: 24,    Head_ID: 6,    Full_Name: 'Brad Jameson',    Prefix: 'Mr.',    Title: 'Programmer',    City: 'San Fernando',    State: 'California',    Email: 'bradleyj@dx-email.com',    Skype: 'bradleyj_DX_skype',    Mobile_Phone: '(818) 555-4646',    Birth_Date: '1988-10-12',    Hire_Date: '2011-03-02',  },  {    ID: 25,    Head_ID: 6,    Full_Name: 'Karen Goodson',    Prefix: 'Miss',    Title: 'Programmer',    City: 'South Pasadena',    State: 'California',    Email: 'kareng@dx-email.com',    Skype: 'kareng_DX_skype',    Mobile_Phone: '(626) 555-0908',    Birth_Date: '1987-04-26',    Hire_Date: '2011-03-14',  },  {    ID: 26,    Head_ID: 5,    Full_Name: 'Marcus Orbison',    Prefix: 'Mr.',    Title: 'Travel Coordinator',    City: 'Los Angeles',    State: 'California',    Email: 'marcuso@dx-email.com',    Skype: 'marcuso_DX_skype',    Mobile_Phone: '(213) 555-7098',    Birth_Date: '1982-03-02',    Hire_Date: '2005-05-19',  },];export default {  getEmployees() {    return employees;  },};​

xxxxxxxxxx
 
{
    "page": {        "width": 8391,        "height": 11907,        "pageWidth": 8391,        "pageHeight": 11906,        "pageLandscape": false,        "gridSize": 180,        "snapToGrid": true    },    "connectors": [        {            "key": "4",            "locked": false,            "zIndex": 0,            "points": [                {                    "x": 4140,                    "y": 1800                },                {                    "x": 4140,                    "y": 2880                }            ],            "beginItemKey": "0",            "beginConnectionPointIndex": 2,            "endItemKey": "1",            "endConnectionPointIndex": 0        },        {            "key": "5",            "locked": false,            "zIndex": 0,            "points": [                {                    "x": 4140,                    "y": 1800                },                {                    "x": 1620,                    "y": 2880                }            ],            "beginItemKey": "0",            "beginConnectionPointIndex": 2,            "endItemKey": "2",            "endConnectionPointIndex": 0        },        {            "key": "6",            "locked": false,            "zIndex": 0,            "points": [                {                    "x": 4140,                    "y": 1800                },                {                    "x": 6660,                    "y": 2880                }            ],            "beginItemKey": "0",            "beginConnectionPointIndex": 2,            "endItemKey": "3",            "endConnectionPointIndex": 0        }    ],    "shapes": [        {            "key": "0",            "locked": false,            "zIndex": 0,            "type": "employee1",            "x": 3420,            "y": 720,            "width": 1440,            "height": 1080        },        {            "key": "1",            "locked": false,            "zIndex": 0,            "type": "employee2",            "x": 3420,            "y": 2880,            "width": 1440,            "height": 1080        },        {            "key": "2",            "locked": false,            "zIndex": 0,            "type": "employee3",            "x": 900,            "y": 2880,            "width": 1440,            "height": 1080        },        {            "key": "3",            "locked": false,            "zIndex": 0,            "type": "employee4",            "x": 5940,            "y": 2880,            "width": 1440,            "height": 1080        }    ]}

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx
 
#diagram {
  height: 725px;}​