Vue 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.vue
  • <template>
  • <DxDiagram
  • id="diagram"
  • ref="diagram"
  • >
  • <DxDefaultItemProperties :connector-line-type="'straight'" :style="'stroke-width: 3px'" />
  • <DxNodes
  • ...
  • :text-style-expr="textStyleExpr"
  • />
  • <DxEdges
  • ...
  • :style-expr="styleExpr"
  • />
  • </DxDiagram>
  • </template>
  • <script>
  • import { DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties} from 'devextreme-vue/diagram';
  •  
  • export default {
  • components: {
  • DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties
  • },
  • data() {...},
  • methods: {
  • textStyleExpr() {
  • return 'fill: green';
  • },
  • styleExpr() {
  • return 'stroke: red';
  • },
  • }
  • };
  • </script>