Flowchart Layout in React Diagram Component

21 Oct 202524 minutes to read

The flowchart layout provides a visual representation of processes, workflows, systems, or algorithms in a diagrammatic format. It uses various symbols to depict different actions, with arrows connecting these symbols to indicate the flow or direction of the process. Flowcharts are Essential® tools for illustrating step-by-step sequences, making complex processes easier to understand and communicate.

Common Flowchart Symbols

Different flowchart symbols have specific meanings used to represent various states and actions in flowcharts. The following table describes the most common flowchart symbols used when creating flowcharts.

Symbol Shape name Description
Terminator Symbol for flowchart start and end points Terminator Indicates the beginning and ending of the process.
Data Symbol for input and output operations Data Indicates data input or output for a process.
Process Symbol for operations and data manipulation Process Represents an operation or set of operations and data manipulations.
Decision Symbol for branching points in flowchart Decision Shows a branching point where the decision is made to choose one of the two paths
Document Symbol for single documents in process Document Represents a single document or report in the process.
PreDefined Process Symbol for defined task sequences PreDefinedProcess Represents a sequence of actions that combine to perform a specific task that is defined elsewhere.
Stored Data Symbol for data storage steps StoredData Represents a step where data get stored within a process.
Internal Storage Symbol for internal data storage InternalStorage Represents the internal storage
Direct Data Symbol for searchable data collections DirectData Represents a collection of information that allows searching, sorting, and filtering.
Sequential Data Symbol for sequential data access SequentialData Represents the data that must be accessed sequentially
Sort Symbol for organizing data sequentially Sort Represents a step that organizes items list sequentially
Paper Tape Symbol for data storage process PaperTap Represents a step where data get stored within a process.
Manual Input Symbol for manual data entry ManualInput Represents the manual input of data into a field or step in a process.
Manual Operation Symbol for manual process steps ManualOperation Represents an operation in a process that must be done manually, not automatically.
Preparation Symbol for setup and initialization Preparation Represents a setup or initialization process to another step in the process.
Off Page Reference Symbol for cross-page connectionsl OffPageReference Represents a labeled connector used to link two flowcharts on different pages.
Multi Document Symbol for multiple documents MultiDocument Represents multiple documents or reports in the process.
Card Symbol for data card operations Card Represents a data card or punched card used for data entry or storage
Summing Junction Symbol for logical AND operations SummingJunction Represents the logical AND (merge multiple inputs into a single output).
Or Symbol for logical OR operations Or Represents the logical OR
Merge Symbol for combining processes Merge Represents a step where two or more sub-lists or sub-processes become one.
Extract Symbol for data retrieval operations Extract Represents retrieving or obtaining data from a source for further processing or analysis in a flowchart.
Delay Symbol for process delays Delay Represents the period of delay in a process
Collate Symbol for data gathering operations Collate Represents the process of gathering and arranging data or documents from multiple sources into a structured format.
Annotation Symbol for additional information Annotation Represents additional information, clarifications, about a process or decision point in the flowchart.
Annotation2 Symbol for comments and notes Annotation2 Represents additional information, or comments about a process in the flowchart.
Sequential Access Storage Symbol for sequential storage SequentialAccessStorage Represents information that is stored in a sequence.
Display Symbol for output presentation Display Represents that the information, data, or output is being shown on a screen or printed for the user’s review.
Loop Limit Symbol for loop constraints LoopLimit Represents a maximum number of times a particular process or operation can be repeated within a loop.
Connector Symbol for flow direction Connector Represents a direction of flow from one step to another. It will get created automatically based on the relationship between the parent and child.

Render Flowchart layout with Data Source

To render a flowchart layout, set the layoutType property to Flowchart. The following code example demonstrates how to render a flowchart layout using a data source.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";


//Initializes data source
let data = [
    {
        "id": "1",
        "name": "Start",
        "shape": "Terminator",
        "color": "#6CA0DC"
    },
    {
        "id": "2",
        "name": "Input",
        "parentId": ["1"],
        "shape": "Parallelogram",
        "color": "#6CA0DC"
    },
    {
        "id": "3",
        "name": "Decision?",
        "parentId": ["2"],
        "shape": "Decision",
        "color": "#6CA0DC"
    },
    {
        "id": "4",
        "label": ["No"],
        "name": "Process1",
        "parentId": ["3"],
        "shape": "Process",
        "color": "#6CA0DC"
    },
    {
        "id": "5",
        "label": ["Yes"],
        "name": "Process2",
        "parentId": ["3"],
        "shape": "Process",
        "color": "#6CA0DC"
    },
    {
        "id": "6",
        "name": "Output",
        "parentId": ["5"],
        "shape": "Parallelogram",
        "color": "#6CA0DC"
    },
    {
        "id": "7",
        "name": "Output",
        "parentId": ["4"],
        "shape": "Parallelogram",
        "color": "#6CA0DC"
    },
    {
        "id": "8",
        "name": "End",
        "parentId": ["6", "7"],
        "shape": "Terminator",
        "color": "#6CA0DC"
    }
];

let items = new DataManager(data, new Query().take(7));

export default function App() {

    return (
        <div>
            <DiagramComponent
                id="container"
                width={"100%"}
                height={"550px"}

                //Uses layout to auto-arrange nodes on the diagram page
                layout={{
                    //Sets layout type
                    type: 'Flowchart'
                }}

                //Configures data source for diagram
                dataSourceSettings={{
                    id: 'id',
                    parentId: 'parentId',
                    dataSource: items
                }}

                //Sets the default properties for nodes
                getNodeDefaults={(node) => {
                    node.width = 120; node.height = 50;
                    if (node.shape.shape === 'Decision') {
                        node.height = 80;
                    }
                    return node;
                }}

                //Sets the default properties for connectors
                getConnectorDefaults={(connector) => {
                    connector.type = 'Orthogonal';
                    return connector;
                }}
            >

                {/* Inject necessary services for the diagram */}
                <Inject services={[DataBinding, FlowchartLayout]} />
            </DiagramComponent>
        </div>
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";


//Initializes data source
let data: object[] = [
  {
    "id": "1",
    "name": "Start",
    "shape": "Terminator",
    "color": "#6CA0DC"
  },
  {
    "id": "2",
    "name": "Input",
    "parentId": ["1"],
    "shape": "Parallelogram",
    "color": "#6CA0DC"
  },
  {
    "id": "3",
    "name": "Decision?",
    "parentId": ["2"],
    "shape": "Decision",
    "color": "#6CA0DC"
  },
  {
    "id": "4",
    "label": ["No"],
    "name": "Process1",
    "parentId": ["3"],
    "shape": "Process",
    "color": "#6CA0DC"
  },
  {
    "id": "5",
    "label": ["Yes"],
    "name": "Process2",
    "parentId": ["3"],
    "shape": "Process",
    "color": "#6CA0DC"
  },
  {
    "id": "6",
    "name": "Output",
    "parentId": ["5"],
    "shape": "Parallelogram",
    "color": "#6CA0DC"
  },
  {
    "id": "7",
    "name": "Output",
    "parentId": ["4"],
    "shape": "Parallelogram",
    "color": "#6CA0DC"
  },
  {
    "id": "8",
    "name": "End",
    "parentId": ["6", "7"],
    "shape": "Terminator",
    "color": "#6CA0DC"
  }
];

let items: DataManager = new DataManager(data as JSON[], new Query().take(7));

export default function App() {

  return (
    <div>
      <DiagramComponent
        id="container"
        width={"100%"}
        height={"550px"}

        //Uses layout to auto-arrange nodes on the diagram page
        layout={{
          //Sets layout type
          type: 'Flowchart'
        }}

        //Configures data source for diagram
        dataSourceSettings={{
          id: 'id',
          parentId: 'parentId',
          dataSource: items
        }}

        //Sets the default properties for nodes
        getNodeDefaults={(node: NodeModel) => {
          node.width = 120; node.height = 50;
          if ((node.shape as any).shape === 'Decision') {
            node.height = 80;
          }
          return node;
        }}

        //Sets the default properties for connectors
        getConnectorDefaults={(connector: ConnectorModel) => {
          connector.type = 'Orthogonal';
          return connector;
        }}
      >

        {/* Inject necessary services for the diagram */}
        <Inject services={[DataBinding, FlowchartLayout]} />
      </DiagramComponent>
    </div>
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

EJ2 Flowchart layout diagram

Note: If you want to convert the data source into flowchart layout, you need to inject DataBinding along with FlowchartLayout module in the diagram.

Configuring Data Source with Appearance Settings

In the flowchart layout, you can define the desired shape, style, and label for each node, as well as the decorator type for connectors, directly within the data source. Structure the data source as shown in the example below:

 var Data =  [
        {
            "id": "A",
            "name": "Start",
            "shape": "Terminator",
            "color": "#90EE90",
            "parentId": null,
            "stroke": "#333",
            "strokeWidth": 2
        },
        {
            "id": "B",
            "name": "Process",
            "shape": "Process",
            "color": "#4682B4",
            "parentId": [
                "A"
            ],
            "label":['A-B'],
            "arrowType": "Fletch",
            "stroke": "#333",
            "strokeWidth": 2
        },
    ]

Data Source Field Definitions

  • name: Text annotation displayed on the node.
  • shape: Node shape type (e.g., Terminator, Process, Decision).
  • color: Fill color for the node background.
  • stroke: Border color of the node.
  • strokeWidth: Border thickness in pixels.
  • label: Annotations for incoming connectors.
  • arrowType: Arrowhead type for incoming connectors (e.g., Diamond, Fletch).

This structure enables comprehensive customization of the flowchart’s visual elements based on the provided data source.

Render Flowchart Layout with Nodes and Connectors

The following example demonstrates how to render a flowchart layout using nodes and connectors. To achieve this, you need to define the nodes and connectors collections and assign them to the diagram. Additionally, you need to set the layoutType to Flowchart.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";


  //Initialize nodes for diagram
  let nodes = [
    { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
    { id: '2', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Input' }], style: { fill: '#6CA0DC' } },
    { id: '3', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
    { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
    { id: '5', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
    { id: '6', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
    { id: '7', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
    { id: '8', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
  ];

  //Initialize connectors for diagram
  let connectors = [
    { id: 'connector1', sourceID: '1', targetID: '2' },
    { id: 'connector2', sourceID: '2', targetID: '3' },
    { id: 'connector3', sourceID: '3', targetID: '4', annotations: [{ content: 'No' }] },
    { id: 'connector4', sourceID: '3', targetID: '5', annotations: [{ content: 'Yes' }] },
    { id: 'connector5', sourceID: '5', targetID: '6' },
    { id: 'connector6', sourceID: '4', targetID: '7' },
    { id: 'connector7', sourceID: '6', targetID: '8' },
    { id: 'connector8', sourceID: '7', targetID: '8' }
  ];

export default function App() {

    return (
        <div>
            <DiagramComponent
                id="container"
                width={"100%"}
                height={"550px"}
                nodes={nodes}
                connectors={connectors}

                //Uses layout to auto-arrange nodes on the diagram page
                layout={{
                    //Sets layout type
                    type: 'Flowchart'
                }}

                //Sets the default properties for nodes
                getNodeDefaults={(node) => {
                    node.width = 120; node.height = 50;
                    if (node.shape.shape === 'Decision') {
                        node.height = 80;
                    }
                    return node;
                }}

                //Sets the default properties for connectors
                getConnectorDefaults={(connector) => {
                    connector.type = 'Orthogonal';
                    return connector;
                }}
            >

                {/* Inject necessary services for the diagram */}
                <Inject services={[DataBinding, FlowchartLayout]} />
            </DiagramComponent>
        </div>
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";


  //Initialize nodes for diagram
  let nodes: NodeModel[] = [
    { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
    { id: '2', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Input' }], style: { fill: '#6CA0DC' } },
    { id: '3', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
    { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
    { id: '5', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
    { id: '6', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
    { id: '7', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
    { id: '8', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
  ];

  //Initialize connectors for diagram
  let connectors: ConnectorModel[] = [
    { id: 'connector1', sourceID: '1', targetID: '2' },
    { id: 'connector2', sourceID: '2', targetID: '3' },
    { id: 'connector3', sourceID: '3', targetID: '4', annotations: [{ content: 'No' }] },
    { id: 'connector4', sourceID: '3', targetID: '5', annotations: [{ content: 'Yes' }] },
    { id: 'connector5', sourceID: '5', targetID: '6' },
    { id: 'connector6', sourceID: '4', targetID: '7' },
    { id: 'connector7', sourceID: '6', targetID: '8' },
    { id: 'connector8', sourceID: '7', targetID: '8' }
  ];

export default function App() {

  return (
    <div>
      <DiagramComponent
        id="container"
        width={"100%"}
        height={"550px"}
        nodes={nodes}
        connectors={connectors}
        
        //Uses layout to auto-arrange nodes on the diagram page
        layout={{
          //Sets layout type
          type: 'Flowchart'
        }}

        //Sets the default properties for nodes
        getNodeDefaults={(node: NodeModel) => {
          node.width = 120; node.height = 50;
          if ((node.shape as any).shape === 'Decision') {
            node.height = 80;
          }
          return node;
        }}

        //Sets the default properties for connectors
        getConnectorDefaults={(connector: ConnectorModel) => {
          connector.type = 'Orthogonal';
          return connector;
        }}
      >

        {/* Inject necessary services for the diagram */}
        <Inject services={[DataBinding, FlowchartLayout]} />
      </DiagramComponent>
    </div>
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

Customize Flowchart Layout Orientation

Customize the flow direction of the flowchart using the orientation property of the layout class. The flowchart can flow either vertically from top to bottom or horizontally from left to right. The default orientation is TopToBottom.

TopToBottom Orientation

This orientation arranges elements vertically, flowing from top to bottom. It is commonly used in flowcharts to represent the sequential progression of steps or actions in a process.

//Initialize the diagram
<ejs-diagram #diagram id="diagram" width="100%" height="600px" [layout]="layout"> </ejs-diagram>

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  public layout?: LayoutModel;
  ngOnInit(): void {
    this.layout = {
        //Sets layout type
        type: 'Flowchart',
        //Sets the orientation of the layout
        orientation: 'TopToBottom'
    },
  }
};

Flowchart layout with top to bottom orientation

LeftToRight Orientation

This orientation arranges elements in the layout horizontally, flowing from left to right. It is typically used to represent processes or workflows that move sequentially across the page, emphasizing a linear progression of steps or actions.

//Initialize the diagram
<ejs-diagram #diagram id="diagram" width="100%" height="600px" [layout]="layout"> </ejs-diagram>

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  public layout?: LayoutModel;
  ngOnInit(): void {
    this.layout = {
        //Sets layout type
        type: 'Flowchart',
        //Sets the orientation of the layout
        orientation: 'LeftToRight'
    },
  }
};

Flowchart layout with left to right orientation

Customize the Decision Output Directions

The decision symbol in a flowchart represents a question or condition that leads to different paths based on a binary outcome (Yes/No, True/False). You can customize the output direction of these paths using the yesBranchDirection and noBranchDirection properties of the flowchartLayoutSettings class.

Branch Direction Options

  • LeftInFlow - Arranges the Yes/No branch to the left of the decision symbol.
  • RightInFlow - Arranges the Yes/No branch to the right of the decision symbol.
  • SameAsFlow - Aligns the Yes/No branch in the same direction as the flow of the decision symbol.

The following example shows a flowchart layout with yesBranchDirection set to SameAsFlow and noBranchDirection set to LeftInFlow.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";


//Initialize nodes for diagram
let nodes = [
    { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
    { id: '2', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Input' }], style: { fill: '#6CA0DC' } },
    { id: '3', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
    { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
    { id: '5', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
    { id: '6', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
    { id: '7', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
    { id: '8', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
];

//Initialize connectors for diagram
let connectors = [
    { id: 'connector1', sourceID: '1', targetID: '2' },
    { id: 'connector2', sourceID: '2', targetID: '3' },
    { id: 'connector3', sourceID: '3', targetID: '4', annotations: [{ content: 'No' }] },
    { id: 'connector4', sourceID: '3', targetID: '5', annotations: [{ content: 'Yes' }] },
    { id: 'connector5', sourceID: '5', targetID: '6' },
    { id: 'connector6', sourceID: '4', targetID: '7' },
    { id: 'connector7', sourceID: '6', targetID: '8' },
    { id: 'connector8', sourceID: '7', targetID: '8' }
];

export default function App() {

    return (
        <div>
            <DiagramComponent
                id="container"
                width={"100%"}
                height={"550px"}
                nodes={nodes}
                connectors={connectors}

                //Uses layout to auto-arrange nodes on the diagram page
                layout={{
                    //Sets layout type
                    type: 'Flowchart',

                    //Customizes the flowchart layout
                    flowchartLayoutSettings: {
                        //Sets the yes branch direction
                        yesBranchDirection: 'SameAsFlow',
                        //Sets the no branch direction
                        noBranchDirection: 'LeftInFlow',
                    }
                }}

                //Sets the default properties for nodes
                getNodeDefaults={(node) => {
                    node.width = 120; node.height = 50;
                    if (node.shape.shape === 'Decision') {
                        node.height = 80;
                    }
                    return node;
                }}

                //Sets the default properties for connectors
                getConnectorDefaults={(connector) => {
                    connector.type = 'Orthogonal';
                    return connector;
                }}
            >

                {/* Inject necessary services for the diagram */}
                <Inject services={[DataBinding, FlowchartLayout]} />
            </DiagramComponent>
        </div>
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";


//Initialize nodes for diagram
let nodes: NodeModel[] = [
  { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
  { id: '2', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Input' }], style: { fill: '#6CA0DC' } },
  { id: '3', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
  { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
  { id: '5', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
  { id: '6', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
  { id: '7', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
  { id: '8', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
];

//Initialize connectors for diagram
let connectors: ConnectorModel[] = [
  { id: 'connector1', sourceID: '1', targetID: '2' },
  { id: 'connector2', sourceID: '2', targetID: '3' },
  { id: 'connector3', sourceID: '3', targetID: '4', annotations: [{ content: 'No' }] },
  { id: 'connector4', sourceID: '3', targetID: '5', annotations: [{ content: 'Yes' }] },
  { id: 'connector5', sourceID: '5', targetID: '6' },
  { id: 'connector6', sourceID: '4', targetID: '7' },
  { id: 'connector7', sourceID: '6', targetID: '8' },
  { id: 'connector8', sourceID: '7', targetID: '8' }
];

export default function App() {

  return (
    <div>
      <DiagramComponent
        id="container"
        width={"100%"}
        height={"550px"}
        nodes={nodes}
        connectors={connectors}

        //Uses layout to auto-arrange nodes on the diagram page
        layout={{
          //Sets layout type
          type: 'Flowchart',

          //Customizes the flowchart layout
          flowchartLayoutSettings: {
            //Sets the yes branch direction
            yesBranchDirection: 'SameAsFlow',
            //Sets the no branch direction
            noBranchDirection: 'LeftInFlow',
          }
        }}

        //Sets the default properties for nodes
        getNodeDefaults={(node: NodeModel) => {
          node.width = 120; node.height = 50;
          if ((node.shape as any).shape === 'Decision') {
            node.height = 80;
          }
          return node;
        }}

        //Sets the default properties for connectors
        getConnectorDefaults={(connector: ConnectorModel) => {
          connector.type = 'Orthogonal';
          return connector;
        }}
      >

        {/* Inject necessary services for the diagram */}
        <Inject services={[DataBinding, FlowchartLayout]} />
      </DiagramComponent>
    </div>
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

The following table illustrates the visual behavior of different branch direction combinations:

YesBranchDirection NoBranchDirection TopToBottom LeftToRight
Left In Flow Right In Flow Decision output with left yes and right no branches in vertical layout Decision output with left yes and right no branches in horizontal layout
Right In Flow Left In Flow Decision output with right yes and left no branches in vertical layout Decision output with right yes and left no branches in horizontal layout
Same As Flow Right In Flow Decision output with same flow yes and right no branches in vertical layout Decision output with same flow yes and right no branches in horizontal layout
Same As Flow Left In Flow Decision output with same flow yes and left no branches in vertical layout Decision output with same flow yes and left no branches in horizontal layout
Right In Flow Same As Flow Decision output with right yes and same flow no branches in vertical layout Decision output with right yes and same flow no branches in horizontal layout
Left In Flow Same As Flow Decision output with left yes and same flow no branches in vertical layout Decision output with left yes and same flow no branches in horizontal layout
Same As Flow Same As Flow Decision output with both branches in same flow direction in vertical layout Decision output with both branches in same flow direction in horizontal layout

Note: When both branch directions are set to the same value, the Yes branch takes priority in positioning.

Custom Yes and No Branch Values

The decision symbol produces two output branches: a Yes branch and a No branch. Configure custom text values to determine branch classification using the yesBranchValues property of the flowchartLayoutSettings class, it will be considered a Yes branch. Similarly, if the connector text value matches any value in the noBranchValues.

By default:

  • yesBranchValues contains: “Yes” and “True”.
  • noBranchValues contains: “No” and “False”.

Custom Branch Classification

When a connector’s text value matches any value in the yesBranchValues array, it is classified as a Yes branch. Similarly, when the connector text matches any value in the noBranchValues array, it is classified as a No branch. This enables flexible decision flow control using custom terminology appropriate for your specific use case.

The following example demonstrates how to set custom text values for yes and no branches.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";


//Initialize nodes for diagram
let nodes = [
    { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
    { id: '2', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
    { id: '3', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
    { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
    { id: '5', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
  ];

//Initialize connectors for diagram
let connectors = [
    { id: 'connector1', sourceID: '1', targetID: '2' },
    { id: 'connector2', sourceID: '2', targetID: '3', annotations: [{ content: 'Reject' }] },
    { id: 'connector3', sourceID: '2', targetID: '4', annotations: [{ content: 'Accept' }] },
    { id: 'connector4', sourceID: '4', targetID: '5', },
  ];

export default function App() {

    return (
        <div>
            <DiagramComponent
                id="container"
                width={"100%"}
                height={"550px"}
                nodes={nodes}
                connectors={connectors}

                //Uses layout to auto-arrange nodes on the diagram page
                layout={{
                    //Sets layout type
                    type: 'Flowchart',

                    //Customizes the flowchart layout
                    flowchartLayoutSettings: {
                        //Sets the yes branch values
                        yesBranchValues: ["Yes", "Accept"],
                        //Sets the no branch values
                        noBranchValues: ["No", "Reject"]
                    }
                }}

                //Sets the default properties for nodes
                getNodeDefaults={(node) => {
                    node.width = 120; node.height = 50;
                    if (node.shape.shape === 'Decision') {
                        node.height = 80;
                    }
                    return node;
                }}

                //Sets the default properties for connectors
                getConnectorDefaults={(connector) => {
                    connector.type = 'Orthogonal';
                    return connector;
                }}
            >

                {/* Inject necessary services for the diagram */}
                <Inject services={[DataBinding, FlowchartLayout]} />
            </DiagramComponent>
        </div>
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";


//Initialize nodes for diagram
let nodes: NodeModel[] = [
  { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
  { id: '2', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
  { id: '3', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
  { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
  { id: '5', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
];

//Initialize connectors for diagram
let connectors: ConnectorModel[] = [
  { id: 'connector1', sourceID: '1', targetID: '2' },
  { id: 'connector2', sourceID: '2', targetID: '3', annotations: [{ content: 'Reject' }] },
  { id: 'connector3', sourceID: '2', targetID: '4', annotations: [{ content: 'Accept' }] },
  { id: 'connector4', sourceID: '4', targetID: '5', },
];

export default function App() {

  return (
    <div>
      <DiagramComponent
        id="container"
        width={"100%"}
        height={"550px"}
        nodes={nodes}
        connectors={connectors}

        //Uses layout to auto-arrange nodes on the diagram page
        layout={{
          //Sets layout type
          type: 'Flowchart',

          //Customizes the flowchart layout
          flowchartLayoutSettings: {
            //Sets the yes branch values
            yesBranchValues: ["Yes", "Accept"],
            //Sets the no branch values
            noBranchValues: ["No", "Reject"]
          }
        }}

        //Sets the default properties for nodes
        getNodeDefaults={(node: NodeModel) => {
          node.width = 120; node.height = 50;
          if ((node.shape as any).shape === 'Decision') {
            node.height = 80;
          }
          return node;
        }}

        //Sets the default properties for connectors
        getConnectorDefaults={(connector: ConnectorModel) => {
          connector.type = 'Orthogonal';
          return connector;
        }}
      >

        {/* Inject necessary services for the diagram */}
        <Inject services={[DataBinding, FlowchartLayout]} />
      </DiagramComponent>
    </div>
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);

Flowchart layout with custom yes and no branch values