{ "$schema": "https://ai.syncfusion.com/schema/registry-item.json", "name": "diagram-shapes", "framework": "angular", "type": "registry:component", "component": "Diagram", "variant": "shapes", "dependencies": [ "@syncfusion/ej2-angular-diagrams" ], "description": "Gallery diagram canvas that renders built-in Basic, Flow, and BPMN node shape families side by side.", "meta": { "essentialStudioRelease": "2026 Volume 2 (v34.1.29)", "license": "commercial-or-community", "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md", "requiresLicenseKey": true, "requiresServerEndpoint": false, "platformIndex": "https://ai.syncfusion.com/angular/llms.txt", "skillPack": "syncfusion/angular-ui-components-skills", "docs": "https://ai.syncfusion.com/gallery/angular/diagram-shapes.md" }, "files": [ { "target": "src/components/diagram-shapes/shapes.component.ts", "content": "import { Component, ViewEncapsulation, ViewChild } from '@angular/core';\nimport {\n Diagram, NodeModel, BpmnDiagrams, SnapSettingsModel, SnapConstraints, NodeConstraints,\n FlowShapes, FlowShapeModel, TextModel\n} from '@syncfusion/ej2-diagrams';\nimport { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';\n\nDiagram.Inject(BpmnDiagrams);\n\n@Component({\n selector: 'control-content',\n templateUrl: 'shapes.html',\n encapsulation: ViewEncapsulation.None,\n standalone: true,\n imports: [DiagramModule]\n})\n\nexport class ShapesDiagramComponent {\n\n @ViewChild('diagram')\n public diagram!: DiagramComponent;\n\n //Function to get basicshapes.\n public getBasicShape(shapeType: string, annotations: { content: string }[]): any {\n return {\n shape: {\n type: 'Basic',\n shape: shapeType\n },\n annotations\n };\n }\n //Function to get flowshapes.\n public createFlowShape(shapeType: any, content: string): NodeModel {\n let flowshape: NodeModel = {\n shape: { type: 'Flow', shape: shapeType },\n annotations: [{ content: content }]\n };\n return flowshape;\n }\n // Function to create BPMN shape\n public getBpmnShape(shapeType: string, annotations: { content: string }[], event?: { event: string, trigger: string }): any {\n const shape: any = {\n type: 'Bpmn',\n shape: shapeType\n };\n if (event) {\n shape.event = event;\n }\n return {\n shape,\n annotations\n };\n }\n\n // Define basic shape models\n private basicShapeModel: any[] = [\n {\n shape: { type: 'Text', content: 'Basic Shapes' },\n constraints: NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'None', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\n },\n this.getBasicShape('Rectangle', [{ content: 'Rectangle' }]),\n this.getBasicShape('Ellipse', [{ content: 'Ellipse' }]),\n this.getBasicShape('Triangle', [{ content: 'Triangle' }]),\n this.getBasicShape('Plus', [{ content: 'Plus' }]),\n this.getBasicShape('Star', [{ content: 'Star' }]),\n this.getBasicShape('Pentagon', [{ content: 'Pentagon' }]),\n this.getBasicShape('Heptagon', [{ content: 'Heptagon' }]),\n this.getBasicShape('Octagon', [{ content: 'Octagon' }]),\n this.getBasicShape('Trapezoid', [{ content: 'Trapezoid' }]),\n this.getBasicShape('Decagon', [{ content: 'Decagon' }]),\n this.getBasicShape('RightTriangle', [{ content: 'Right Triangle' }]),\n this.getBasicShape('Parallelogram', [{ content: 'Parallelogram' }])\n ];\n\n //Initialize the flowshapes for the symbol palatte\n private flowShapeModel: NodeModel[] = [\n {\n shape: { type: 'Text', content: 'Flow Shapes' }, constraints: NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'None', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 }\n },\n this.createFlowShape('Terminator', 'Terminator'),\n this.createFlowShape('Process', 'Process'),\n this.createFlowShape('Decision', 'Decision'),\n this.createFlowShape('Document', 'Document'),\n this.createFlowShape('PreDefinedProcess', 'Predefined Process'),\n this.createFlowShape('PaperTap', 'Paper Tape'),\n this.createFlowShape('DirectData', 'Direct Data'),\n this.createFlowShape('SequentialData', 'Direct Data'),\n this.createFlowShape('Sort', 'Sort'),\n this.createFlowShape('MultiDocument', 'Multi-Document'),\n this.createFlowShape('Collate', 'Collate'),\n this.createFlowShape('SummingJunction', 'Summing Junction'),\n this.createFlowShape('Or', 'Or'),\n this.createFlowShape('InternalStorage', 'Internal Storage'),\n this.createFlowShape('Extract', 'Extract'),\n this.createFlowShape('ManualOperation', 'Manual Operation'),\n this.createFlowShape('Merge', 'Merge'),\n this.createFlowShape('OffPageReference', 'Off-Page Reference'),\n this.createFlowShape('SequentialAccessStorage', 'Sequential Access Storage'),\n this.createFlowShape('Data', 'Data'),\n this.createFlowShape('Card', 'Card')\n ];\n\n // Define BPMN shape models\n private bpmnShapeModel: any[] = [\n {\n shape: { type: 'Text', content: 'BPMN Shapes' },\n constraints: NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'none', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\n },\n this.getBpmnShape('Event', [{ content: 'Start Event' }], { event: 'Start', trigger: 'None' }),\n this.getBpmnShape('Event', [{ content: 'Intermediate Event' }], { event: 'Intermediate', trigger: 'None' }),\n this.getBpmnShape('Event', [{ content: 'End Event' }], { event: 'End', trigger: 'None' }),\n this.getBpmnShape('Gateway', [{ content: 'Gateway' }]),\n {\n shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' } },\n annotations: [{ content: 'Task' }]\n },\n {\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'SubProcess',\n subProcess: {\n type: 'Transaction', transaction: {\n success: { visible: false }, failure: { visible: false }, cancel: { visible: false }\n }\n }\n }\n },\n annotations: [{ content: 'Transaction' }]\n },\n this.getBpmnShape('Message', [{ content: 'Message' }]),\n this.getBpmnShape('DataObject', [{ content: 'Data Object' }]),\n this.getBpmnShape('DataSource', [{ content: 'Data Source' }]),\n this.getBpmnShape('Group', [{ content: 'Group' }]),\n this.getBpmnShape('TextAnnotation', [{ content: 'Text Annotation' }])\n ];\n\n public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };\n public nodes: NodeModel[] = this.getNodes();\n\n //To get default node details\n private getNodes(): NodeModel[] {\n let nodes1: NodeModel[] = this.basicShapeModel.concat(this.flowShapeModel).concat(this.bpmnShapeModel);\n let offsetx: number = 60;\n let offsety: number = 50;\n let count: number = 1;\n for (let i: number = 0; i < nodes1.length; i++) {\n let node: NodeModel = nodes1[i];\n if (!node.shape) {\n continue;\n }\n node.width = 40;\n node.height = 40;\n node.offsetX = offsetx;\n node.offsetY = offsety;\n const nodeShape = node.shape as FlowShapeModel | TextModel | { type: string; content?: string; shape?: string };\n if (nodeShape.type === 'Flow') {\n const flowShape = node.shape as FlowShapeModel | undefined;\n const shapeType: FlowShapes | undefined = flowShape?.shape;\n if (shapeType === 'Process' || shapeType === 'Terminator') {\n node.height = 20;\n } else if (shapeType === 'Decision') {\n node.height = 35;\n } else if (shapeType === 'Document' || shapeType === 'DirectData' ||\n shapeType === 'MultiDocument' || shapeType === 'PreDefinedProcess') {\n node.height = 30;\n }\n }\n\n if (nodeShape.type !== 'Text') {\n const label = node.annotations?.[0];\n if (!label) {\n continue;\n }\n label.verticalAlignment = 'Top';\n label.offset = { y: 1 };\n label.margin = { top: 10 };\n\n offsetx += 90;\n if (count % 10 === 0) {\n offsety = offsety + 100;\n offsetx = 60;\n }\n count++;\n }\n if (nodeShape.type === 'Text') {\n offsetx = 60;\n offsety += 50;\n count = 1;\n node.width = 150;\n node.height = 50;\n node.offsetX = 90;\n if (!((nodeShape as TextModel).content === 'Basic Shapes')) {\n node.offsetX = 90;\n node.offsetY = offsety + 50;\n offsety = offsety + 100;\n }\n }\n }\n return nodes1;\n }\n\n public diagramCreate(args: Object): void {\n this.diagram.fitToPage({ mode: 'Height' });\n }\n}\n" }, { "target": "src/components/diagram-shapes/shapes.html", "content": "\n
\n \n \n
" } ] }