js-sequence-diagrams icon indicating copy to clipboard operation
js-sequence-diagrams copied to clipboard

Branching in Sequence Diagrams

Open praveenscience opened this issue 10 years ago • 2 comments

Hi Andrew Brampton,

Do you have any idea of implementing branches with the current release? I have tried something using the Raphael's path. I have tried in two ways. My code is as follows:

// Basic branching.

var paper = Raphael(5, 5, 300, 300);

// Draw rectangle - this is branch.
var branch = paper.rect(10, 10, 250, 110);
branch.attr({
  "stroke-dasharray": "",
  "stroke": "#000"
});
var branchlabel = paper.rect(10, 10, 55, 25);
branchlabel.attr({
  "fill": "#fff",
  "stroke": "#000",
  "stroke-linejoin": "",
  "stroke-linecap": "",
  "stroke-dasharray": "",
});
paper.path("M10 60 H50 260").attr({
  "stroke": "#000",
  "stroke-linejoin": "",
  "stroke-linecap": "",
  "stroke-dasharray": "--",
});
paper.text(35, 20, "Branch").attr({
  "font-size": 12,
  "font-family": "Segoe UI",
});

// Branching with bottom right angle.

var paper2 = Raphael(5, 310, 300, 300);
paper2.path("M75 0 V15 L65 25 H0 V0 Z").attr({
  "stroke": "#000",
  "stroke-width": 2,
  "fill": "#fff"
});
paper2.text(32, 10, "Branch").attr({
  "font": "12pt Segoe UI",
});

How do I incorporate for this case:

branch
    Alice -> Bob: Hi
    Bob -> Alice: Hello
end branch

praveenscience avatar Dec 30 '14 20:12 praveenscience

Hi praveenscience,

I'm unsure what problem you are having. Are you saying that your code does not correctly render?

If you want to add new syntax, you'll have to change a few different things.

Firstly, you will have to change the grammar.jison to support the new "branch" syntax. As part of that you'll have to change the .jison and diagram.js to store that certain signals are now within a branch. I suggest you do something similar to how a Note is added.

Finally you will have to change the rendering part of the diagram, in sequence-diagram.js. Code similar to what you have may work, but I would suggest using the draw_rect, draw_line, etc methods, as they will handle the styling of the line, etc.

bramp avatar Jan 05 '15 01:01 bramp

Yes, Andrew.

I don't know how to include that piece to the diagram. Yeah, I will try as you have explained. If any help is needed, can you please guide me? Thanks in advance.

Cheers, Praveen

praveenscience avatar Jan 05 '15 10:01 praveenscience