Здесь я сохранил все необходимые фигуры в div. Теперь, когда я перетаскиваю фигуру в тег div диаграммы, она должна появиться там, и окно предупреждения также похоже на перетаскивание фигуры, когда мы нажимаем на нее, должны отображаться те же параметры как это https://demo.bpmn.io/new . Я пытался, но не работал и не нашел никаких ссылок, связанных с моим требованием.

Вот мой код.

{amp}lt;html{amp}gt;
{amp}lt;head{amp}gt;
    {amp}lt;title{amp}gt;{amp}lt;/title{amp}gt;
    {amp}lt;meta charset="UTF-8"{amp}gt;
      {amp}lt;meta charset="utf-8"{amp}gt;
  {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt;
  {amp}lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"{amp}gt;
  {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt;
  {amp}lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"{amp}gt;{amp}lt;/script{amp}gt;

    {amp}lt;link rel="stylesheet" href="https://unpkg.com/bpmn-js@6.1.1/dist/assets/diagram-js.css"{amp}gt;
    {amp}lt;link rel="stylesheet" href="https://unpkg.com/bpmn-js@6.1.1/dist/assets/bpmn-font/css/bpmn.css"{amp}gt;

    {amp}lt;!-- modeler distro --{amp}gt;
    {amp}lt;script src="https://unpkg.com/bpmn-js/dist/bpmn-viewer.development.js"{amp}gt;{amp}lt;/script{amp}gt;
    {amp}lt;title{amp}gt;Scratch BPMN{amp}lt;/title{amp}gt;

    {amp}lt;!-- needed for this example only --{amp}gt;
    {amp}lt;script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"{amp}gt;{amp}lt;/script{amp}gt;

    {amp}lt;!-- example styles --{amp}gt;
    {amp}lt;style{amp}gt;

    {amp}lt;/style{amp}gt;
{amp}lt;/head{amp}gt;
{amp}lt;body class="canvas"{amp}gt;
    {amp}lt;h3{amp}gt;Diagram{amp}lt;/h3{amp}gt;
     {amp}lt;div class="scrollable"{amp}gt;
        {amp}lt;div id="splitter" class="diagram-wrapper col-sm-12"{amp}gt;
            {amp}lt;div class="row"{amp}gt;
                {amp}lt;div id="left-pane" class="col-sm-2"{amp}gt;
                    {amp}lt;div class="djs-container" style="position: relative; overflow: hidden; width: 100%; height: 100%;"{amp}gt;
                {amp}lt;div class="djs-palette two-column open" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"{amp}gt;
                    {amp}lt;div class="djs-palette-entries"{amp}gt;
                        {amp}lt;div class="group" data-group="tools"{amp}gt;
                            {amp}lt;div class="entry bpmn-icon-hand-tool" draggable="true" data-action="hand-tool" title="Activate the hand tool"{amp}gt;
                            {amp}lt;/div{amp}gt;

                            {amp}lt;div class="entry bpmn-icon-lasso-tool" draggable="true" data-action="lasso-tool" title="Activate the lasso tool"{amp}gt;      
                            {amp}lt;/div{amp}gt;

                            {amp}lt;div class="entry bpmn-icon-space-tool" draggable="true" data-action="space-tool" title="Activate the create/remove space tool"{amp}gt;
                            {amp}lt;/div{amp}gt;

                            {amp}lt;div class="entry bpmn-icon-connection-multi" draggable="true" data-action="global-connect-tool" title="Activate the global connect tool"{amp}gt;
                            {amp}lt;/div{amp}gt;

                            {amp}lt;hr class="separator"{amp}gt;
                        {amp}lt;/div{amp}gt;

                        {amp}lt;div class="group" data-group="event"{amp}gt;
                            {amp}lt;div class="entry bpmn-icon-start-event-none" draggable="true" data-action="create.start-event" title="Create StartEvent"{amp}gt;  
                            {amp}lt;/div{amp}gt;

                            {amp}lt;div class="entry bpmn-icon-intermediate-event-none" draggable="true" data-action="create.intermediate-event" title="Create Intermediate/Boundary Event"{amp}gt;
                            {amp}lt;/div{amp}gt;

                            {amp}lt;div class="entry bpmn-icon-end-event-none" draggable="true" data-action="create.end-event" title="Create EndEvent"{amp}gt;
                            {amp}lt;/div{amp}gt;
                        {amp}lt;/div{amp}gt;

                        {amp}lt;div class="group" data-group="gateway"{amp}gt;
                            {amp}lt;div class="entry bpmn-icon-gateway-none" draggable="true" data-action="create.exclusive-gateway" title="Create Gateway"{amp}gt;
                            {amp}lt;/div{amp}gt;
                        {amp}lt;/div{amp}gt;

                        {amp}lt;div class="group" data-group="activity"{amp}gt;
                            {amp}lt;div class="entry bpmn-icon-task" draggable="true" data-action="create.task" title="Create Task"{amp}gt;
                            {amp}lt;/div{amp}gt;

                            {amp}lt;div class="entry bpmn-icon-subprocess-expanded" draggable="true" data-action="create.subprocess-expanded" title="Create expanded SubProcess"{amp}gt;
                            {amp}lt;/div{amp}gt;
                        {amp}lt;/div{amp}gt;

                        {amp}lt;div class="group" data-group="data-object"{amp}gt;
                            {amp}lt;div class="entry bpmn-icon-data-object" draggable="true" data-action="create.data-object" title="Create DataObjectReference"{amp}gt;
                            {amp}lt;/div{amp}gt;
                        {amp}lt;/div{amp}gt;

                        {amp}lt;div class="group" data-group="data-store"{amp}gt;
                            {amp}lt;div class="entry bpmn-icon-data-store" draggable="true" data-action="create.data-store" title="Create DataStoreReference"{amp}gt;
                            {amp}lt;/div{amp}gt;
                        {amp}lt;/div{amp}gt;

                        {amp}lt;div class="group" data-group="collaboration"{amp}gt;
                            {amp}lt;div class="entry bpmn-icon-participant" draggable="true" data-action="create.participant-expanded" title="Create Pool/Participant"{amp}gt;
                            {amp}lt;/div{amp}gt;
                        {amp}lt;/div{amp}gt;

                        {amp}lt;div class="group" data-group="artifact"{amp}gt;
                            {amp}lt;div class="entry bpmn-icon-group" draggable="true" data-action="create.group" title="Create Group"{amp}gt;
                            {amp}lt;/div{amp}gt;
                        {amp}lt;/div{amp}gt;
                    {amp}lt;/div{amp}gt;
                {amp}lt;/div{amp}gt;
            {amp}lt;/div{amp}gt;
            {amp}lt;/div{amp}gt;
                {amp}lt;div id="center-pane" class="col-sm-10"{amp}gt;
                    {amp}lt;div class="pane-content"{amp}gt;
                        {amp}lt;div id="diagram" style="height: 800px; width : 1000px;"{amp}gt;{amp}lt;/div{amp}gt;
                    {amp}lt;/div{amp}gt;
                {amp}lt;/div{amp}gt;
            {amp}lt;/div{amp}gt;
        {amp}lt;/div{amp}gt;
    {amp}lt;/div{amp}gt;
{amp}lt;/body{amp}gt;
{amp}lt;/html{amp}gt;