bramp / js-sequence-diagrams

Draws simple SVG sequence diagrams from textual representation of the diagram
https://bramp.github.io/js-sequence-diagrams/
BSD 2-Clause "Simplified" License
7.81k stars 1.08k forks source link

Is there a way to have multiline text for a diagram in manual mode? #161

Closed l1x closed 8 years ago

l1x commented 8 years ago

How can I use multiple lines here? I was trying few different ways, nothing worked so far.

var diagram = Diagram.parse("A->B: Message");

I would like to create a diagram with the following:

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Is there a way to do that in manual mode?

bramp commented 8 years ago

I might not understand your question, but you can do the following:

var text = "Title: Here is a title\nA->B: Normal line";

//or
var text = "Title: Here is a title\n" + 
           "A->B: Normal line\n";

// or (with ECMAScript 6 - ES6):
var text = `
Title: Here is a title
A->B: Normal line
`

// and then use text
var diagram = Diagram.parse(text);

or if using

l1x commented 8 years ago

Thanks!

howardroark commented 7 years ago

@bramp In the website version the "china" example seems to manage to get a line break into the "note". I find if I try to do that while dividing lines with line breaks like above it breaks...

Works

 var d = Diagram.parse(
   "Andrew->China: Says Hello\n" +
   "Note right of China: China thinks about it\n" +
   "China-->Andrew: How are you?\n" +
   "Andrew->>China: I am good thanks!"
  );

Doesn't

 var d = Diagram.parse(
   "Andrew->China: Says Hello\n" +
   "Note right of China: China thinks\n about it\n" +
   "China-->Andrew: How are you?\n" +
   "Andrew->>China: I am good thanks!"
  );

Any thoughts? Thanks!

bramp commented 7 years ago

It works on the site, because the string javascript receives contains a "\n". You should be able to change your example to work:

 var d = Diagram.parse(
   "Andrew->China: Says Hello\n" +
   "Note right of China: China thinks\\n about it\n" +
   "China-->Andrew: How are you?\n" +
   "Andrew->>China: I am good thanks!"
  );
howardroark commented 7 years ago

Ahhh right makes sense! Thanks!

Check out this working proof of concept... https://howardroark.github.io/get-sequence-diagrams/ :)

howardroark commented 7 years ago

I modified the syntax slightly and now new line translate quite well... https://howardroark.github.io/get-diagram/

![](https://get-diagram.herokuapp.com/sequence?
    Andrew->China: Says Hello;
    Note right of China: China thinks\n about it;
    China-->Andrew: How are you?;
    Andrew->>China: I am good thanks!;
)