React Diagram - Default Shape and Connector Settings

The Diagram component allows you to specify default settings for its items in the following ways:

  • Specify settings contained in the defaultItemProperties property.
  • Specify data-binding expressions contained in the edges and nodes properties to define common settings for data-bound edges and nodes.
App.js
  • import Diagram, { Nodes, Edges, DefaultItemProperties} from 'devextreme-react/diagram';
  • // ...
  • render() {
  • return (
  • <Diagram id="diagram">
  • <DefaultItemProperties connectorLineType="straight"/>
  • <Nodes ... textStyleExpr={this.itemTextStyleExpr} />
  • <Edges ... styleExpr={this.itemStyleExpr}/>
  • </Diagram>
  • );
  • }
  • itemTextStyleExpr(obj) {
  • return { 'fill': 'green' };
  • }
  • itemStyleExpr(obj) {
  • return { 'stroke': 'red' };
  • }