Swimlane is a type of diagram nodes,which is typically used to visualize the relationship between a business process and the department responsible for it by focusing on the logical relationships between activities.
To create a swimlane,the type of shape should be set as swimlane
.By Default swimlane’s are arranged vertically.
The following code example illustrates how to define a swimlane object.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
// Set the node type as swimlane
type: 'SwimLane',
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
// Set the node type as swimlane
type: 'SwimLane',
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
Header was the primary element for swimlanes. The header
property of swimlane allows you to define its textual description and to customize its appearance.
Note: By using this header,the swimlane interaction will be performed,like selection, dragging,etc.
The following code example illustrates how to define a swimlane header.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
The height and width of swimlane header can be customized with width
and height
properties of swimlane header. set fill color of header by using the style
property. The orientation of swimlane can be customized with the orientation
property of the header.
Note: By default the swimlane orientation has Horizontal.
The following code example illustrates how to customize the swimlane header.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// customize the swimlane header
header: {
annotation: { content: 'SALES PROCESS FLOW CHART', },
height: 70, style: { fontSize: 11 }, style: { fill: 'pink' },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// customize the swimlane header
header: {
annotation: { content: 'SALES PROCESS FLOW CHART', },
height: 70, style: { fontSize: 11 }, style: { fill: 'pink' },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
You can customize the swimlane header style and text properties dynamically. The following code illustrates how to dynamically customize the lane header.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'SALES PROCESS FLOW CHART', },
height: 70, style: { fontSize: 11 }, style: { fill: 'pink' },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
let diagramInstance;
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
// change the swimlane header style dynamically
diagramInstance.nodes[0].shape.header.style.fill = 'red';
diagramInstance.dataBind();
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'SALES PROCESS FLOW CHART', },
height: 70, style: { fontSize: 11 }, style: { fill: 'pink' },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
let diagramInstance: DiagramComponent;
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={node}
created = { () => {
// change the swimlane header style dynamically
diagramInstance.nodes[0].shape.header.style.fill = 'red'
diagramInstance.dataBind();
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
Diagram provides the support to edit swimlane headers at runtime. We achieve the header editing by double click event. Double clicking the header label will enables the editing of that.
The following image illustrates how to edit the swimlane header.
Lane is a functional unit or a responsible department of a business process that helps to map a process within the functional unit or in between other functional units.
The number of lanes
can be added to swimlane. The lanes are automatically stacked inside swimlane based on the order they are added.
id
is used to define the name of the lane and its further used to find the lane at runtime and do any customization.addInfo
property of the lane.The following code example illustrates how to define a swimlane with lane.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
// initialize the lane of swimlane
lanes: [
{
id: 'stackCanvas1',
// set the lane height
height: 100,
// set the lane info
addInfo: { name: 'lane1' }
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
// initialize the lane of swimlane
lanes: [
{
id: 'stackCanvas1',
// set the lane height
height: 100,
// set the lane info
addInfo:{name:'lane1'}
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
header
property of lane allows you to textually describe the lane and to customize the appearance of the description.The following code example illustrates how to define a lane header.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
// Intialize lane to swimlane
lanes: [
{
id: 'stackCanvas1',
height: 100,
// Intialize header to lane
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
// Text(label) added to the node
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
// Intialize lane to swimlane
lanes: [
{
id: 'stackCanvas1',
height: 100,
// Intialize header to lane
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
// Text(label) added to the node
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
width
and height
properties of the lane.style
properties.The following code example illustrates how to customize the lane header.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
// customization of lane header
header: {
annotation: { content: 'Online Consumer' }, width: 30,
style: { fontSize: 11 }, style: { fill: 'red' }
},
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
// customization of lane header
header: {
annotation: { content: 'Online Consumer' }, width: 30,
style: { fontSize: 11 },style: { fill: 'red' }
},
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
You can customize the lane header style and text properties dynamically. The following code illustrates how to dynamically customize the lane header.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'SALES PROCESS FLOW CHART', },
height: 70, style: { fontSize: 11 }, style: { fill: 'pink' },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
let diagramInstance;
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
// Dynamically change the lane header
let lane = diagramInstance.nodes[0];
lane.shape.lanes[0].header.style.fill = 'blue';
diagramInstance.dataBind();
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'SALES PROCESS FLOW CHART', },
height: 70, style: { fontSize: 11 }, style: { fill: 'pink' },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
let diagramInstance: DiagramComponent;
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={node}
created = { () => {
// Dynamically change the lane header
let lane : nodeModel = diagramInstance.nodes[0];
lane.shape.lanes[0].header.style.fill ='blue';
diagramInstance.dataBind();
} }
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
You can add the a lane at runtime by using the client side API method called addLanes
. The following code illustrates how to dynamically add lane to swimlane.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,
},
],
},
],
phases: [
{
id: 'phase1', offset: 120,
header: { annotation: { content: 'Phase' } }, style: { fill: 'red' }
}, {
id: 'phase2', offset: 200,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
let diagramInstance;
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
// Dynamically add the lane
let lane = [{ id: "lane1", height: 100 }];
diagramInstance.addLanes(diagramInstance.nodes[0], lane, 1);
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,
},
],
},
],
phases: [
{
id: 'phase1', offset: 120,
header: { annotation: { content: 'Phase' } },style:{fill:'red'}
},{
id: 'phase2', offset: 200,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
let diagramInstance: DiagramComponent;
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={node}
created = { () => {
// Dynamically add the lane
let lane = [{id:"lane1",height:100}];
diagramInstance.addLanes(diagramInstance.nodes[0],lane,1);
} }
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
To add nodes to lane,you should add children
collection of the lane.
The following code example illustrates how to add nodes to lane.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
// Set the children of lane
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,
},
],
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
// Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
// Set the children of lane
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,
},
],
},
],
phases: [
{
id: 'phase1', offset: 170,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
You can disable swimlane lane swapping by using the property called canMove
.
The following code illustrates how to disable swimlane lane swapping.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100, canMove: false
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120, canMove: false
},
],
},
],
phases: [
{
id: 'phase1', offset: 120,
header: { annotation: { content: 'Phase' } }, style: { fill: 'red' }
}, {
id: 'phase2', offset: 200,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
let diagramInstance;
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
let lane = [{ id: "lane1", height: 100, canMove: false }];
diagramInstance.addLanes(diagramInstance.nodes[0], lane, 1);
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,canMove: false
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,canMove: false
},
],
},
],
phases: [
{
id: 'phase1', offset: 120,
header: { annotation: { content: 'Phase' } },style:{fill:'red'}
},{
id: 'phase2', offset: 200,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
let diagramInstance: DiagramComponent;
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={node}
created = { () => {
let lane = [{id:"lane1",height:100,canMove: false}];
diagramInstance.addLanes(diagramInstance.nodes[0],lane,1);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
Diagram provides the support to edit Lane headers at runtime. We achieve the header editing by double click event. Double clicking the header label will enables the editing of that.
The following image illustrates how to edit the lane header.
Phase are the subprocess which will split each lane as horizontally or vertically based on the swimlane orientation. The multiple number of Phase
can be added to swimlane.
The following code example illustrates how to add phase at swimlane.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,
},
],
},
],
// Set phase to swimlane
phases: [
{
id: 'phase1', offset: 120,
header: { annotation: { content: 'Phase' } }
}, {
id: 'phase2', offset: 200,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,
},
],
},
],
// Set phase to swimlane
phases: [
{
id: 'phase1', offset: 120,
header: { annotation: { content: 'Phase' } }
},{
id: 'phase2', offset: 200,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
You can add the a phase at runtime by using client side API method called addPhases
. The following code example illustrates how to add phase at run time.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [
{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: {
content: 'ONLINE PURCHASE STATUS',
style: { fill: 'transparent' },
},
height: 50,
style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' },
width: 50,
style: { fontSize: 11 },
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 },
},
],
margin: { left: 60, top: 30 },
height: 40,
width: 100,
},
{
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 },
},
],
margin: { left: 200, top: 20 },
height: 60,
width: 120,
},
],
},
],
phases: [
{
id: 'phase1',
offset: 120,
header: { annotation: { content: 'Phase' } },
style: { fill: 'red' },
},
{
id: 'phase2',
offset: 200,
header: { annotation: { content: 'Phase' } },
},
],
phaseSize: 20,
},
offsetX: 300,
offsetY: 200,
height: 200,
width: 350,
},
];
let diagramInstance;
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
let phase = [
{
id: 'phase3',
offset: 220,
header: { annotation: { content: 'Phase' } },
},
];
diagramInstance.addPhases(diagramInstance.nodes[0], phase);
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [
{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: {
content: 'ONLINE PURCHASE STATUS',
style: { fill: 'transparent' },
},
height: 50,
style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' },
width: 50,
style: { fontSize: 11 },
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 },
},
],
margin: { left: 60, top: 30 },
height: 40,
width: 100,
},
{
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 },
},
],
margin: { left: 200, top: 20 },
height: 60,
width: 120,
},
],
},
],
phases: [
{
id: 'phase1',
offset: 120,
header: { annotation: { content: 'Phase' } },
style: { fill: 'red' },
},
{
id: 'phase2',
offset: 200,
header: { annotation: { content: 'Phase' } },
},
],
phaseSize: 20,
},
offsetX: 300,
offsetY: 200,
height: 200,
width: 350,
},
];
let diagramInstance: DiagramComponent;
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={node}
created={() => {
let phase = [
{
id: 'phase3',
offset: 220,
header: { annotation: { content: 'Phase' } },
},
];
diagramInstance.addPhases(diagramInstance.nodes[0], phase);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
offset
property of the phase.header
property of the phasephaseSize
property of swimlane.addInfo
property of the phase.The following code example illustrates how to customize the phase in swimlane.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,
},
],
},
],
phases: [
{
id: 'phase1', offset: 120,
// set the phase info
addInfo: { name: 'phase1' },
header: { annotation: { content: 'Phase' } }, style: { fill: 'red' }
}, {
id: 'phase2', offset: 200,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
shape: {
type: 'SwimLane',
orientation: 'Horizontal',
//Intialize header to swimlane
header: {
annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: 'transparent' } },
height: 50, style: { fontSize: 11 },
},
lanes: [
{
id: 'stackCanvas1',
height: 100,
header: {
annotation: { content: 'CUSTOMER' }, width: 50,
style: { fontSize: 11 }
},
children: [
{
id: 'node1',
annotations: [
{
content: 'Consumer learns \n of product',
style: { fontSize: 11 }
}
],
margin: { left: 60, top: 30 },
height: 40, width: 100,
}, {
id: 'node2',
shape: { type: 'Flow', shape: 'Decision' },
annotations: [
{
content: 'Does \n Consumer want \nthe product',
style: { fontSize: 11 }
}
],
margin: { left: 200, top: 20 },
height: 60, width: 120,
},
],
},
],
phases: [
{
id: 'phase1', offset: 120,
// set the phase info
addInfo:{name:'phase1'},
header: { annotation: { content: 'Phase' } },style:{fill:'red'}
},{
id: 'phase2', offset: 200,
header: { annotation: { content: 'Phase' } }
},
],
phaseSize: 20,
},
offsetX: 300, offsetY: 200,
height: 200,
width: 350
}];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
Diagram provides the support to edit phase headers at runtime. We achieve the header editing by double click event. Double clicking the header label will enables the editing of that.
The following image illustrates how to edit the swimlane header.
The following image illustrates how to edit the phase header.
Diagram provides support to add swimlane and phases to symbol palette. The following code sample illustrate how to add swimlane and phases to palette.
The following code example illustrates how to customize the phase in swimlane.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SymbolPaletteComponent } from "@syncfusion/ej2-react-diagrams";
//Initialize the flowshapes for the symbol palette
export function getswimlaneShapes() {
let swimlaneShapes = [
{
id: 'stackCanvas1',
shape: {
type: 'SwimLane', lanes: [
{
id: 'lane1',
style: { strokeColor: 'black' }, height: 60, width: 150,
header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },
}
],
orientation: 'Horizontal', isLane: true
},
height: 60,
width: 140,
offsetX: 70,
offsetY: 30,
}, {
id: 'stackCanvas2',
shape: {
type: 'SwimLane',
lanes: [
{
id: 'lane1',
style: { strokeColor: 'black' }, height: 150, width: 60,
header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },
}
],
orientation: 'Vertical', isLane: true
},
height: 140,
width: 60,
// style: { fill: '#f5f5f5' },
offsetX: 70,
offsetY: 30,
}, {
id: 'verticalPhase',
shape: {
type: 'SwimLane',
phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }],
annotations: [{ text: '' }],
orientation: 'Vertical', isPhase: true
},
height: 60,
width: 140
}, {
id: 'horizontalPhase',
shape: {
type: 'SwimLane',
phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }],
annotations: [{ text: '' }],
orientation: 'Horizontal', isPhase: true
},
height: 60,
width: 140
}
];
return swimlaneShapes;
}
function setPaletteNodeDefaults(node) {
node.width = 70;
node.height = 70;
node.style.strokeColor = '#3A3A3A';
}
// Initialize the Symbol palette
function App() {
return (<SymbolPaletteComponent id="container" expandMode={'Multiple'} palettes={[
{
id: 'swimlane',
expanded: true,
symbols: getswimlaneShapes(),
title: 'Swimlane Shapes',
},
]} symbolPreview={{
height: 70,
width: 70,
offset: {
x: 0.5,
y: 0.5,
},
}} symbolMargin={{
left: 12,
right: 12,
top: 12,
bottom: 12,
}}
//Returns the default properties of node
getNodeDefaults={setPaletteNodeDefaults} getSymbolInfo={(symbol) => {
return {
fit: true
};
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
NodeModel,
SymbolPalette,
SymbolInfo,
SymbolPaletteComponent
} from "@syncfusion/ej2-react-diagrams";
//Initialize the flowshapes for the symbol palette
export function getswimlaneShapes(): NodeModel[] {
let swimlaneShapes : NodeModel[]= [
{
id: 'stackCanvas1',
shape: {
type: 'SwimLane', lanes: [
{
id: 'lane1',
style: { strokeColor: 'black' }, height: 60, width: 150,
header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },
}
],
orientation: 'Horizontal', isLane: true
},
height: 60,
width: 140,
offsetX: 70,
offsetY: 30,
}, {
id: 'stackCanvas2',
shape: {
type: 'SwimLane',
lanes: [
{
id: 'lane1',
style: { strokeColor: 'black' }, height: 150, width: 60,
header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },
}
],
orientation: 'Vertical', isLane: true
},
height: 140,
width: 60,
// style: { fill: '#f5f5f5' },
offsetX: 70,
offsetY: 30,
}, {
id: 'verticalPhase',
shape: {
type: 'SwimLane',
phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }],
annotations: [{ text: '' }],
orientation: 'Vertical', isPhase: true
},
height: 60,
width: 140
}, {
id: 'horizontalPhase',
shape: {
type: 'SwimLane',
phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }],
annotations: [{ text: '' }],
orientation: 'Horizontal', isPhase: true
},
height: 60,
width: 140
}
];
return swimlaneShapes;
}
function setPaletteNodeDefaults(node: NodeModel): void {
node.width = 70;
node.height = 70;
node.style.strokeColor = '#3A3A3A';
}
// Initialize the Symbol palette
function App() {
return (
<SymbolPaletteComponent
id="container"
expandMode={'Multiple'}
palettes={[
{
id: 'swimlane',
expanded: true,
symbols: getswimlaneShapes(),
title: 'Swimlane Shapes',
},
]}
symbolPreview={{
height: 70,
width: 70,
offset: {
x: 0.5,
y: 0.5,
},
}}
symbolMargin={{
left: 12,
right: 12,
top: 12,
bottom: 12,
}}
//Returns the default properties of node
getNodeDefaults={setPaletteNodeDefaults}
getSymbolInfo = {
(symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);