Flowchart Layout in React Diagram

21 Aug 202624 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 connections 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 layout type to Flowchart. If you want to convert the data source into a flowchart layout, you need to inject the DataBinding along with the FlowchartLayout module in the diagram. 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));

//Initialize layout settings for the diagram
const layout = {
    //Sets layout type
    type: 'Flowchart'
};

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

export default function App() {

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

                //Uses layout to auto-arrange nodes on the diagram page
                layout={layout}

                //Configures data source for diagram
                dataSourceSettings={dataSourceSettings}

                //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, LayoutModel, DataSourceModel } 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));

//Initialize layout settings for the diagram
const layout: LayoutModel = {
  //Sets layout type
  type: 'Flowchart'
};

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

export default function App() {

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

        //Uses layout to auto-arrange nodes on the diagram page
        layout={layout}

        //Configures data source for diagram
        dataSourceSettings={dataSourceSettings}

        //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

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

Node fields:

  • name: Text annotation displayed on the node.
  • shape: Node shape type. Refer to the Common Flowchart Symbols section for the list of available shape names (e.g., Terminator, Process, Decision).
  • color: Fill color for the node background.
  • stroke: Border color of the node.
  • strokeWidth: Border thickness in pixels.

Connector fields (applied to the incoming connector from the parent):

  • label: Annotations for the incoming connector.
  • arrowType: Arrowhead type for the incoming connector (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 layout type 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' }
  ];

//Initialize layout settings for the diagram
const layout = {
    //Sets layout type
    type: 'Flowchart'
};

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={layout}

                //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, LayoutModel } 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' }
  ];

//Initialize layout settings for the diagram
const layout: LayoutModel = {
  //Sets layout type
  type: 'Flowchart'
};
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={layout}

        //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.

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

function App() {
  //Sets layout type and the orientation of the layout
  const layout = {
    type: "Flowchart",
    orientation: "TopToBottom"
  };

  return (
    <DiagramComponent
      id="diagram"
      width="100%"
      height="600px"
      layout={layout}
    >
      <Inject services={[DataBinding, FlowchartLayout]} />
    </DiagramComponent>
  );
}

export default App;

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.

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

function App() {
  //Sets layout type and the orientation of the layout
  const layout = {
    type: "Flowchart",
    orientation: "LeftToRight"
  };

  return (
    <DiagramComponent
      id="diagram"
      width="100%"
      height="600px"
      layout={layout}
    >
      <Inject services={[DataBinding, FlowchartLayout]} />
    </DiagramComponent>
  );
}

export default App;

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. Both properties accept a value from the BranchDirection enum.

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' }
];

const 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',
    }
};

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={layout}

                //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, LayoutModel } 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' }
];
const layout: LayoutModel = {
  //Sets layout type
  type: 'Flowchart',
  //Customizes the flowchart layout
  flowchartLayoutSettings: {
    //Sets the yes branch direction
    yesBranchDirection: 'SameAsFlow',
    //Sets the no branch direction
    noBranchDirection: 'LeftInFlow',
  }
};
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={layout}

        //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
LeftInFlow RightInFlow Decision output with left yes and right no branches in vertical layout Decision output with left yes and right no branches in horizontal layout
RightInFlow LeftInFlow Decision output with right yes and left no branches in vertical layout Decision output with right yes and left no branches in horizontal layout
SameAsFlow RightInFlow 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
SameAsFlow LeftInFlow 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
RightInFlow SameAsFlow 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
LeftInFlow SameAsFlow 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
SameAsFlow SameAsFlow Decision output with both branches in same flow direction in vertical layout Decision output with both branches in same flow direction in horizontal layout

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. You can configure custom text values to determine branch classification using the yesBranchValues and noBranchValues properties of the flowchartLayoutSettings class.

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', },
  ];

const 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"]
    }
};

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={layout}

                //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, LayoutModel } 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', },
];

const layout: LayoutModel = {
  //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"]
  }
};
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={layout}

        //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