New to Kendo UI for AngularStart a free 30-day trial

DiagramMapping

Updated on Oct 31, 2025

Complete mapping configuration for converting input data to diagram model.

Contains both shape and connection mapping configurations that define how to extract and transform data from the input object into the format required for diagram rendering.

typescript
const diagramMapping: DiagramMapping = {
  shapes: {
    source: 'orgChart.employees',
    map: {
      id: 'empId',
      content: (emp) => ({ text: emp.name, image: emp.photo }),
      x: 'position.x',
      y: 'position.y'
    }
  },
  connections: {
    source: 'orgChart.relationships',
    map: {
      from: 'managerId',
      to: 'employeeId'
    }
  }
};
NameTypeDefaultDescription

connections

ConnectionMapping<any>

shapes

ShapeMapping<any>

Not finding the help you need?
Contact Support