Swimlanes.io – generated editable sequence diagrams • Hacker News Board

Swimlanes.io – generated editable sequence diagrams

#1

Post by smusamashah » Tue, Apr 27, 2021, 2:54 PM UTC

Swimlanes.io – generated editable sequence diagrams
swimlanes.io

Re: Swimlanes.io – generated editable sequence diagrams

#2

Post by xtracto » Tue, Apr 27, 2021, 4:07 PM UTC

Reminds me of https://bramp.github.io/js-sequence-diagrams/ The nice thing about that library is that you actually can have a self-contained HTML page with a diagram, like:

    

    
    
    
    
    
      
    
      var diagram = Diagram.parse("A->B: Message");
      diagram.drawSVG("diagram", {theme: 'hand'});

And this will draw render a sequence diagram in any browser. I've used this to have as documentation in the /docs folder of project Git repository for some of my teams. It is great because it is pretty easy to update and maintain changes via VCS.

Re: Swimlanes.io – generated editable sequence diagrams

#3

Post by sly010 » Tue, Apr 27, 2021, 4:11 PM UTC

The parser seems to be broken. Or I don't understand the syntax. There is no way to end the last example note.

Edit: ok, you need to add at least a colon after every edge

Re: Swimlanes.io – generated editable sequence diagrams

#4

Post by hakcermani » Tue, Apr 27, 2021, 4:18 PM UTC

xtracto wrote: post #2

Reminds me of https://bramp.github.io/js-sequence-diagrams/ The nice thing about that library is that you actually can have a self-contained HTML page with a diagram, like: var diagram = Diagram.parse("A->B: Message"); diagram.drawSVG("diagram", {theme: 'hand'}); And this will draw render a sequence diagram in any browser. I've used this to have as documentation in the /docs folder of project Git repository for some…

Another similar site that i have used a lot is ... https://www.websequencediagrams.com/ .. i particularly like the svg export of websequencediagrams.

Re: Swimlanes.io – generated editable sequence diagrams

#5

Post by jonahx » Tue, Apr 27, 2021, 4:25 PM UTC

Prior art:

1. Plant UML: http://www.plantuml.com/plantuml/umla/SoWkIImgAStDuNBCoKnELT...

PlantUML supports many diagram types, and there's a nice VS Code plugin with side by side live preview.

2. https://www.websequencediagrams.com/

Has a hand-drawn style option which is nice:

https://i.imgur.com/lh4jaVL.png

Re: Swimlanes.io – generated editable sequence diagrams

#6

Post by avodonosov » Tue, Apr 27, 2021, 4:27 PM UTC

jonahx wrote: post #5

Prior art: 1. Plant UML: http://www.plantuml.com/plantuml/umla/SoWkIImgAStDuNBCoKnELT... PlantUML supports many diagram types, and there's a nice VS Code plugin with side by side live preview. 2. https://www.websequencediagrams.com/ Has a hand-drawn style option which is nice: https://i.imgur.com/lh4jaVL.png

https://sequencediagram.org is another alternative

Re: Swimlanes.io – generated editable sequence diagrams

#7

Post by avodonosov » Tue, Apr 27, 2021, 4:28 PM UTC

hakcermani wrote: post #4

xtracto wrote: post #2

Reminds me of https://bramp.github.io/js-sequence-diagrams/ The nice thing about that library is that you actually can have a self-contained HTML page with a diagram, like: var diagram = Diagram.parse("A->B: Message"); diagram.drawSVG("diagram", {theme: 'hand'}); And this will draw render a sequence diagram in any browser. I've used this to have as documentation in the /docs folder of project Git repository for some…

Another similar site that i have used a lot is ... https://www.websequencediagrams.com/ .. i particularly like the svg export of websequencediagrams.

also https://sequencediagram.org

Re: Swimlanes.io – generated editable sequence diagrams

#8

Post by eugene0 » Tue, Apr 27, 2021, 4:31 PM UTC

jonahx wrote: post #5

Prior art: 1. Plant UML: http://www.plantuml.com/plantuml/umla/SoWkIImgAStDuNBCoKnELT... PlantUML supports many diagram types, and there's a nice VS Code plugin with side by side live preview. 2. https://www.websequencediagrams.com/ Has a hand-drawn style option which is nice: https://i.imgur.com/lh4jaVL.png

MermaidJS is also a good alternative: https://mermaid-js.github.io/mermaid-live-editor/

Re: Swimlanes.io – generated editable sequence diagrams

#9

Post by monkeydust » Tue, Apr 27, 2021, 4:32 PM UTC

These are becoming as prevalent as note taking apps on HN!

Re: Swimlanes.io – generated editable sequence diagrams

#10

Post by Veuxdo » Tue, Apr 27, 2021, 4:34 PM UTC

jonahx wrote: post #5

Prior art: 1. Plant UML: http://www.plantuml.com/plantuml/umla/SoWkIImgAStDuNBCoKnELT... PlantUML supports many diagram types, and there's a nice VS Code plugin with side by side live preview. 2. https://www.websequencediagrams.com/ Has a hand-drawn style option which is nice: https://i.imgur.com/lh4jaVL.png

Ilograph supports interactive sequence diagrams e.g. https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520Diag...