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

Angled arrows

Open raboof opened this issue 10 years ago • 6 comments

It'd be really great to have support for angled (and even crossing!) arrows, to represent messages being sent e.g. over a network.

Example: http://tex.stackexchange.com/questions/99436/network-message-sequence-diagram

I fully realize this would be nontrivial to add: finding a good way to represent such diagrams in text is a challenge on its own. It'd probably be wise to consider this a 'other diagram' (I don't seem to be able to add milestones to issues though). Hopefully much of the rendering and styling code can be generalized/re-used, though.

Inspiration for the textual representation could be:

  • http://satoss.uni.lu/software/mscpackage/
  • https://code.google.com/p/msc2svg/wiki/Example
  • http://www.mcternan.me.uk/mscgen/

Though none of those are particularly appealing.

search terms: diagonal, slanted

raboof avatar Aug 25 '15 17:08 raboof

Would forward and back slashes work?

A->B: Normal
A/>B: Angled up
A\>B: Angled down

Not very pretty, but the simplest I could think of just now.

bramp avatar Aug 25 '15 18:08 bramp

Thanks for the quick reply. That is actually an interesting proposal - though extending it to the other 3 arrow types (A\\>B, A\>>B, A\\>>B) seems a bit nasty.

An alternative might be to keep the existing arrows but allow annotations specifying how many lines to 'drop' (where a 'drop' of 0 would be a horizontal line). This would also fairly naturally support diagrams like the first one at https://w3.cs.jmu.edu/bernstdh/Web/CS460/study-aids/exam2-sample.php:

(...)
T->R [drop = 1]: F3
R->T [drop = 4]: ACK 4
T->R [drop = 1]: F4
T->R [drop = 1]: F5

This could be made more readable by allowing to set a 'default drop' at the top of the file, and set that to '1' if you're drawing these kinds of diagrams.

raboof avatar Aug 25 '15 19:08 raboof

Ah, looks like the attributes are added at the end of the line in #74.

So representing https://w3.cs.jmu.edu/bernstdh/Web/CS460/study-aids/exam2-sample.php as:

default-drop = 1
(...)
T->R: F3
R->T: ACK 4 [drop = 4]
T->R: F4
T->R: F5

raboof avatar Sep 03 '15 13:09 raboof

@raboof I know it's been several years, but if you're still interested in this feature I've just added a version of it to my editor (https://github.com/davidje13/SequenceDiagram), and I'd be keen to hear your feedback on whether it fulfils your needs. It's a little rough-around-the-edges, but should be functional.

I think the syntax is quite natural, so I'd suggest it for this project too:

# the arrow begins ("identifier" could be anything; it just links the statements):
Agent1 -> ...identifier

# some time later, the arrow ends:
...identifier -> Agent2: message

So your example could be drawn with:

begin T, R

T -> ...pingNumber3
...pingNumber3 -> R: F3

# labels and "simultaneously" are the only way to have simultaneous
# actions so far, so use those to have the response begin at the same
# time as the next ping:

response: # mark this point with the name "response"
R -> ...aDelayedThing

# go back to the point named "response" (like a "goto")
simultaneously with response:

T -> ...pingNumber4
...pingNumber4 -> R: F4

T -> ...pingNumber5
...pingNumber5 -> R: F5

# finally the response is received
...aDelayedThing -> T: ACK 4

As you can see from the example, the downside of this syntax is that lines won't align automatically. You have to put some thought into which actions must be simultaneous to make the final diagram regular (same slants and spacing).

davidje13 avatar Jan 25 '18 23:01 davidje13

Thanks for the ping, that looks quite cool! Indeed a bit 'goto-ish' but that is probably hard to avoid - my drop=x proposal above is not much better in that respect ;).

I hadn't found a satisfying way of drawing such diagrams yet, you I'll be sure to make a note for when the need arises again!

raboof avatar Jan 25 '18 23:01 raboof