{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-shapes",
  "framework": "vue",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "shapes",
  "dependencies": [
    "@syncfusion/ej2-vue-diagrams"
  ],
  "description": "Diagram gallery displays Basic, Flow, and BPMN shape collections for selection.",
  "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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/diagram-shapes.md"
  },
  "files": [
    {
      "target": "src/components/diagram-shapes/Diagram.vue",
      "content": "<template>\n  <div class=\"control-section\">\n    <div style=\"width: 100%\">\n      <ejs-diagram\n        ref=\"diagramObject\"\n        style=\"display: block\"\n        id=\"diagram\"\n        :width=\"width\"\n        :height=\"height\"\n        :nodes=\"nodes\"\n        :getNodeDefaults=\"getNodeDefaults\"\n        :snapSettings=\"snapSettings\"\n      ></ejs-diagram>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  DiagramComponent,\n  Diagram,\n  BpmnDiagrams,\n} from \"@syncfusion/ej2-vue-diagrams\";\nimport { Node, SnapConstraints } from \"@syncfusion/ej2-vue-diagrams\";\n\n// Function to create shape model objects\nfunction createBasicShapeModel(shape, content) {\n  return {\n    shape: { type: \"Basic\", shape: shape },\n    annotations: [{ content: content }],\n  };\n}\n\n//Initialzise basic shape models\nlet basicShapeModel = [{\n    shape: { type: \"Text\", content: \"Basic Shapes\" },\n    style: {fontSize: 16,fill: \"None\",fontFamily: \"sans-serif\",bold:true,strokeWidth: 0,}},\n  createBasicShapeModel(\"Rectangle\", \"Rectangle\"),\n  createBasicShapeModel(\"Ellipse\", \"Ellipse\"),\n  createBasicShapeModel(\"Triangle\", \"Triangle\"),\n  createBasicShapeModel(\"Plus\", \"Plus\"),\n  createBasicShapeModel(\"Star\", \"Star\"),\n  createBasicShapeModel(\"Pentagon\", \"Pentagon\"),\n  createBasicShapeModel(\"Heptagon\", \"Heptagon\"),\n  createBasicShapeModel(\"Octagon\", \"Octagon\"),\n  createBasicShapeModel(\"Trapezoid\", \"Trapezoid\"),\n  createBasicShapeModel(\"Decagon\", \"Decagon\"),\n  createBasicShapeModel(\"RightTriangle\", \"Right Triangle\"),\n  createBasicShapeModel(\"Parallelogram\", \"Parallelogram\"),\n];\n\n// Function to create flow shape model objects\nfunction createFlowShapeModel(shape, content) {\n  return {\n    shape: { type: \"Flow\", shape: shape },\n    annotations: [{ content: content }]\n  };\n}\n\n// To Initialize Flow shape models\nlet flowShapeModel = [\n  {\n  shape: { type: \"Text\", content: \"Flow Shapes\" },\n  style: {fontSize: 16,fill: \"None\",fontFamily: \"sans-serif\",bold: true,strokeWidth: 0}\n  },\n  createFlowShapeModel(\"Terminator\", \"Terminator\"),\n  createFlowShapeModel(\"Process\", \"Process\"),\n  createFlowShapeModel(\"Decision\", \"Decision\"),\n  createFlowShapeModel(\"Document\", \"Document\"),\n  createFlowShapeModel(\"PreDefinedProcess\", \"Predefined Process\"),\n  createFlowShapeModel(\"PaperTap\", \"Paper Tape\"),\n  createFlowShapeModel(\"DirectData\", \"Direct Data\"),\n  createFlowShapeModel(\"SequentialData\", \"Direct Data\"),\n  createFlowShapeModel(\"Sort\", \"Sort\"),\n  createFlowShapeModel(\"MultiDocument\", \"Multi-Document\"),\n  createFlowShapeModel(\"Collate\", \"Collate\"),\n  createFlowShapeModel(\"SummingJunction\", \"Summing Junction\"),\n  createFlowShapeModel(\"Or\", \"Or\"),\n  createFlowShapeModel(\"InternalStorage\", \"Internal Storage\"),\n  createFlowShapeModel(\"Extract\", \"Extract\"),\n  createFlowShapeModel(\"ManualOperation\", \"Manual Operation\"),\n  createFlowShapeModel(\"Merge\", \"Merge\"),\n  createFlowShapeModel(\"OffPageReference\", \"Off-Page Reference\"),\n  createFlowShapeModel(\"SequentialAccessStorage\", \"Sequential Access Storage\"),\n  createFlowShapeModel(\"Data\", \"Data\"),\n  createFlowShapeModel(\"Card\", \"Card\")\n];\n\n// Function to create BPMN shapes\nfunction createBpmnShapeModel(shape, content, event=undefined) {\n    return {\n        shape: { type: 'Bpmn', shape: shape, event: event },\n        annotations: [{ content: content }]\n    };\n}\n\n// To Initialize Flow shape models\nlet bpmnShapeModel = [\n    {\n      shape: { type: \"Text\", content: \"BPMN Shapes\" },\n      style: {fontSize: 16,fill: \"none\",fontFamily: \"sans-serif\",bold: true,strokeWidth: 0,},\n    },\n    createBpmnShapeModel('Event', 'Start Event', { event: 'Start', trigger: 'None' }),\n    createBpmnShapeModel('Event', 'Intermediate Event', { event: 'Intermediate', trigger: 'None' }),\n    createBpmnShapeModel('Event', 'End Event', { event: 'End', trigger: 'None' }),\n    createBpmnShapeModel('Gateway', 'Gateway'),\n    createBpmnShapeModel('Activity', 'Task', { activity: 'Task' }),\n    {shape: {type: \"Bpmn\",shape: \"Activity\",activity: { activity: \"SubProcess\",\n        subProcess: {\n          type: \"Transaction\",\n          transaction: {\n            success: { visible: false },\n            failure: { visible: false },\n            cancel: { visible: false },\n          }}}\n     },\n     annotations: [{ content: \"Transaction\" }],\n    },\n    createBpmnShapeModel('Message', 'Message'),\n    createBpmnShapeModel('DataObject', 'Data Object'),\n    createBpmnShapeModel('DataSource', 'Data Source'),\n    createBpmnShapeModel('Group', 'Group'),\n    createBpmnShapeModel('TextAnnotation', 'Text Annotation')\n];\n\n\nexport default {\n  components: {\n    \"ejs-diagram\": DiagramComponent,\n  },\n  data: function () {\n    return {\n      width: \"100%\",\n      height: \"800px\",\n      snapSettings: { constraints: SnapConstraints.None },\n      nodes: getNodes(),\n      //Defines the default node and connector properties\n      getNodeDefaults: (node, diagram) => {\n        return node;\n      },\n    };\n  },\n  provide: {\n    diagram: [BpmnDiagrams],\n  },\n  mounted: function () {\n    let diagram = this.$refs.diagramObject.ej2Instances;\n    diagram.fitToPage();\n  },\n};\n\nfunction getNodes() {\n\n  var nodes = basicShapeModel.concat(flowShapeModel).concat(bpmnShapeModel);\n  var offsetx = 60;\n  var offsety = 60;\n  var count = 1;\n  const shapeTypeHeight = {\n    Process: 20,\n    Terminator: 20,\n    Decision: 35,\n    Document: 30,\n    DirectData: 30,\n    MultiDocument: 30,\n    PreDefinedProcess: 30\n  };\n    nodes.forEach(node => {\n    node.width = 40;\n    node.height = 40;\n    if (node.shape && node.shape.type === \"Flow\") {\n      let shapeType = node.shape.shape;\n      node.height = shapeTypeHeight[shapeType] || 40; // Default height if not found in lookup\n     \n    }\n    node.offsetX = offsetx;\n    node.offsetY = offsety;\n\n    if (node.shape && !(node.shape.type === \"Text\") && node.annotations) {\n      var label = node.annotations[0];\n      label.verticalAlignment = \"Top\";\n      label.offset = { y: 1 };\n      label.margin = { top: 10 };\n\n      offsetx += 90;\n      //After 10 nodes 11th node will go next line\n      if (count % 10 === 0) {\n        offsety = offsety + 100;\n        offsetx = 60;\n      }\n      count++;\n    }\n    if (node.shape && node.shape.type === \"Text\") {\n      offsetx = 60;\n      offsety += 50;\n      count = 1;\n      node.width = 150;\n      node.height = 100;\n      node.offsetX = 90;\n      if (!(node.shape.content === \"Basic Shapes\")) {\n        node.offsetX = 90;\n        node.offsetY = offsety + 50;\n        offsety +=  100;\n      }\n    }\n  });\n  return nodes;\n}\n</script>"
    },
    {
      "target": "src/components/diagram-shapes/DiagramView.vue",
      "content": "<template>\n  <Diagram />\n</template>\n\n<script setup>\nimport Diagram from '../../components/Diagram.vue'\n</script>"
    }
  ]
}