How to add simple straight verticle line as widget?

[princeyogesh]

I want just simple streight line in widget bar , but whenever i try to pull in it appears inside the box what way should i proceed to use api? here are the code snippets and output i am gettign

[princeyogesh]

I want line should have output bubble , but here i am getting box in addition and output bubble is on the box

[jerosoler]

I don't quite understand you.

Can you draw a picture of what you want?

[princeyogesh]

@jerosoler please see the below sketch

• something like this i want to achive for call flows, I just need help how can i draw the red line as shown in image.

• red line should be in widgets menu, as there will be multiple users so want it as drag and drop style

[jerosoler]

Hello,

I think you want to do something like this: https://bramp.github.io/js-sequence-diagrams/

I don't know if this is the right library for this. I'm not sure what you want to do.

I show you how you can create the node of user A.

Javascript

  editor.addNode('usera', 1, 1, 150, 300, 'usera', {}, `User A`);

CSS

      .drawflow-node.usera {
        width: 6px;
        height: 300px;
        padding: 0px;
        background: red;
        border: 0px;
      }

      .drawflow-node.usera .drawflow_content_node {
        position: absolute;
        top: -30px;
        width: 100px;
        left: -20px;
      }
      .drawflow-node.usera .outputs{
        position: absolute;
        top: 50px;
        left: -12.5px;
      }

      .drawflow-node.usera .inputs{
        position: absolute;
        top: 200px;
        right: -12.5px;
      }

Jero