# diagram-shapes

> Diagram gallery displays Basic, Flow, and BPMN shape collections for selection.

**Framework:** react  **Component:** Diagram  **Variant:** shapes

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/js/diagram-shapes.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-diagrams
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-shapes/Diagram.jsx

```jsx
import { BpmnDiagrams, SnapConstraints, DiagramComponent, Inject, DataBinding, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
// Function to create a text node
const createTextNode = (content) => ({
    shape: { type: "Text", content },
    constraints: NodeConstraints.PointerEvents,
    style: {
        fontSize: 16,
        fill: "None",
        fontFamily: "sans-serif",
        bold: true,
        strokeWidth: 0
    }
});
// Function to create a shape node
const createShapeNode = (type, shape, content, additionalProps) => ({
    shape: { type, shape, ...additionalProps },
    annotations: [{ content }]
});
// Basic shape models
const basicShapes = [
    "Rectangle", "Ellipse", "Triangle", "Plus", "Star", "Pentagon",
    "Heptagon", "Octagon", "Trapezoid", "Decagon", "RightTriangle", "Parallelogram"
];
const basicShapeModels = [
    createTextNode("Basic Shapes"),
    ...basicShapes.map(shape => createShapeNode("Basic", shape, shape))
];
// Flow shape models
const flowShapes = [
    { shape: "Terminator", content: "Terminator" },
    { shape: "Process", content: "Process" },
    { shape: "Decision", content: "Decision" },
    { shape: "Document", content: "Document" },
    { shape: "PreDefinedProcess", content: "Predefined Process" },
    { shape: "PaperTap", content: "Paper Tape" },
    { shape: "DirectData", content: "Direct Data" },
    { shape: "SequentialData", content: "Sequential Data" },
    { shape: "Sort", content: "Sort" },
    { shape: "MultiDocument", content: "Multi-Document" },
    { shape: "Collate", content: "Collate" },
    { shape: "SummingJunction", content: "Summing Junction" },
    { shape: "Or", content: "Or" },
    { shape: "InternalStorage", content: "Internal Storage" },
    { shape: "Extract", content: "Extract" },
    { shape: "ManualOperation", content: "Manual Operation" },
    { shape: "Merge", content: "Merge" },
    { shape: "OffPageReference", content: "Off-Page Reference" },
    { shape: "SequentialAccessStorage", content: "Sequential Access Storage" },
    { shape: "Data", content: "Data" },
    { shape: "Card", content: "Card" }
];
const flowShapeModels = [
    createTextNode("Flow Shapes"),
    ...flowShapes.map(({ shape, content }) => createShapeNode("Flow", shape, content))
];
// BPMN shape models
const bpmnShapes = [
    { shape: "Event", content: "Start Event", event: { event: "Start", trigger: "None" } },
    { shape: "Event", content: "Intermediate Event", event: { event: "Intermediate", trigger: "None" } },
    { shape: "Event", content: "End Event", event: { event: "End", trigger: "None" } },
    { shape: "Gateway", content: "Gateway" },
    { shape: "Activity", content: "Task", activity: { activity: "Task" } },
    { shape: "Activity", content: "Transaction", activity: { activity: "SubProcess", subProcess: { type: "Transaction", transaction: { success: { visible: false }, failure: { visible: false }, cancel: { visible: false } } } } },
    { shape: "Message", content: "Message" },
    { shape: "DataObject", content: "Data Object" },
    { shape: "DataSource", content: "Data Source" },
    { shape: "Group", content: "Group" },
    { shape: "TextAnnotation", content: "Text Annotation" }
];
const bpmnShapeModels = [
    createTextNode("BPMN Shapes"),
    ...bpmnShapes.map(({ shape, content, event, activity, subProcess }) => createShapeNode("Bpmn", shape, content, { event, activity, subProcess }))
];
const allShapeModels = [
    ...basicShapeModels,
    ...flowShapeModels,
    ...bpmnShapeModels
];
let diagramInstance;
function ShapeGallery() {
    function rendereComplete() {
        diagramInstance.fitToPage({ mode: "Height" });
    }
    // To set default values for different types of nodes.
    function getNodes() {
        const nodes = allShapeModels;
        let offsetx = 60;
        let offsety = 50;
        let count = 1;
        const updateFlowShapeHeight = (shapeType) => {
            switch (shapeType) {
                case 'Process':
                case 'Terminator':
                case 'Document':
                case 'DirectData':
                case 'MultiDocument':
                case 'PreDefinedProcess':
                    return 30;
                case 'Decision':
                    return 35;
                default:
                    return 40;
            }
        };
        nodes.forEach((node) => {
            node.width = 40;
            node.height = 40;
            if (node.shape.type === 'Flow') {
                node.height = updateFlowShapeHeight(node.shape.shape);
            }
            node.offsetX = offsetx;
            node.offsetY = offsety;
            if (node.shape.type !== 'Text') {
                node.annotations[0].verticalAlignment = 'Top';
                node.annotations[0].offset = { y: 1 };
                node.annotations[0].margin = { top: 8 };
                offsetx += 90;
                if (count % 10 === 0) {
                    offsety += 100;
                    offsetx = 60;
                }
                count++;
            }
            else {
                offsetx = 60;
                offsety += 50;
                count = 1;
                node.width = 150;
                node.height = 50;
                node.offsetX = 90;
                if (node.shape.content !== 'Basic Shapes') {
                    node.offsetY = offsety + 50;
                    offsety += 100;
                }
            }
        });
        return nodes;
    }
    return (<div className="control-panel">
            <div className="control-section">
                <div style={{ width: "100%" }}>
                    <DiagramComponent id="diagram" ref={diagram => (diagramInstance = diagram)} width={"100%"} height={"800px"} snapSettings={{ constraints: SnapConstraints.None }} nodes={getNodes()} 
    //Defines the default node and connector properties.
    getNodeDefaults={(obj, diagram) => {
            return obj;
        }}>
                        <Inject services={[DataBinding, BpmnDiagrams]}/>
                    </DiagramComponent>
                </div>
            </div>
        </div>);
}
export default ShapeGallery;
```