Swimlanes.io – generated editable sequence diagrams | Hacker News Reader

Swimlanes.io – generated editable sequence diagrams

swimlanes.io

604 pointssmusamashah113 comments

Open articleView on HN

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

Yeah - happy user of this one for years :)

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

GitLab has mermaid support in its markdown https://docs.gitlab.com/ee/user/markdown.html#mermaid

So does Wiki.js [1]. Pretty fancy.

[1] https://docs.requarks.io/editors/markdown#mermaid-diagrams

Mermaid became quite a common markdown feature. It is supported in a lot of places already. It can easily be integrated as it is pure client side javascript.

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

also see zenuml.com

I was just looking at that a few days ago. But don't want something that works on-line. Any good equivalent local tools?

There is a desktop version that works off-line: https://www.ilograph.com/desktop/index.html

FWIW, https://diagrams.net/ also have a downloadable version. But it's a point and click WYSIWYG editor, not a text notation like swimlanes.io.

As we're listing alternatives, Lucidchart also supports generated UML Sequence Diagrams, which lets you use their GUI after generation to customize it / alter as desired

collated these diagramming tools here: https://github.com/sw-yx/spark-joy/blob/master/README.md#gen...

Any plans to do curated?

i mean i will inject my opinions when i have to use these things in anger, right now it is just a raw list for future usage. i do put little stars or warnings against some items when i have an opinion.

you're welcome to PR in some commentary on each of them though. or fork it and curate. its open source knowledge :) https://www.youtube.com/watch?v=XoATf7xGoUY

Thanks. Please do identify when they're open source -- I have been bitten by filling a small app of unknown longevity with my system diagrams and flowcharts, only to have it disappear.

ouch. at this point itd take a long time for me to backfill that info but will try going fwd

Here's one I didn't see on your list:

https://wavedrom.com/

Plantuml plugin within Confluence is pretty nice for documentation, and arguably a super-power because it makes it easier to make good docs ("a picture is worth a thousand words").

The source shows up in edit mode (no external app needed; and it's always correct) and it handles the rendering for you, thus reducing friction.

In other places I've seen people attach a PNG. If you're lucky, they've also attached the corresponding (and up-to-date) source in visio/draw/ppt/whatever random app format, in which case making a small edit might only takes ten of minutes. In the worst case, it's missing source, the source file is not the same as the PNG, or they used some program you don't have, and you have to totally redo it. For most people if the friction is too high, it just doesn't get updated.

Big fan of PlantUML, didn't occur to me that there'd be Confluence plugins. Which one are you using?

I didn't realize there were multiple now! We use "PlantUML for Confluence" [1] now but have had that for a few years. The live preview thing some of the others seem to have would be nice.

[1] https://marketplace.atlassian.com/apps/41025/plantuml-for-co...

Logged in specifically to agree and upvote this comment!

- on-demand preview of changes before i hit save

- source code is always embedded with the diagram and anyone can reference and edit

- source controlled history via confluence history

I've used mermaid extensively but ultimately abandoned it because it didn't have a good flow for sharing the source and history. Confluence + PlantUML is a great solution.

i prefer sequencediagram.org

no upsell and pretty full featured. developer is responsive (i’ve had a couple minor things addressed).

most importantly you can export to svg. then i load into inkscape if i need a tweak for publication

Plantuml won't even run with uBlock on. Well it will run, but no diagram. Not that interested in trying to divine just which little thing it wants on to work given there are so many alternatives.

Okay. That's a bummer. But also: PlantUML is a lot more, or a lot different than another online diagramming tool. Their strength is expressing the diagrams using plain text. Having used my share of tools, l have never not hated drawing sequence diagrams, but in plain text it is a dream. They have command line tools, IDE integrations, etc.

Plantuml can also style as hand drawn with a skinparam https://plantuml.com/handwritten

Let's not forget the venerable UMLet (https://www.umlet.com). It's simple, cross platform, and supports a variety of UML diagrams using a text-based syntax.

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:

    <html>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>
    <body>
      <div id="diagram"></div>
    <script>
      var diagram = Diagram.parse("A->B: Message");
      diagram.drawSVG("diagram", {theme: 'hand'});
    </script>

    </body>
    </html>

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.

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

You actually don't even need the HTML scaffolding for that, and can author a js-sequence-diagrams diagram straight into a text file, append a simple script to render the document, and save as .html! Example: https://unpkg.com/browse/js-sequence-diagrams-autorenderer@1... - click on "view raw" to see it in action.

Looks a lot cleaner, and the .html itself is a valid diagram as the script tag that bootstraps the renderer is prefixed with a comment hash.

EDIT: I used to have this in a gist that I'd load via rawgit.com, but since that's no longer active, I figured I'd update my script and make it publicly available through unpkg :)

Howdy, that's some black magic! Thanks a lot, that's a really neat idea.

I would really like a sequence diagram that allow for diagonal arrows, not just horizontal ones. A message takes time to arrive to its destination and sometimes it's interesting what else could happen during this time, for example the backend sending another response to the requester. Also requests don't arrive to the destination in the exact order they where made. All of these are impossible to represent with horizontal arrows.

Apparently https://sequencediagram.org/ is what you want. It has "non-instantaneous message"

It doesn't quite do what was asked, while it handles angled lines, it doesn't seem to support overlapping angled lines, which in comms systems is common

Well, if you really want to, you can do it:

Alice->(5)Bob:message1

space -6

Alice(4)<-Bob:the other\nmessage

There’s an asynchronous notation in sequence diagrams if responses can go back in different order. Still uses horizontal arrows but the arrowhead is different.

I don’t think diagonal arrows really help with this and will be harder to deal with because they could get overlapping really quickly.

But if things are truly out of sequence use something other than a sequence diagram. Just a regular flow chart, or activity diagram, or state diagram.

I second this.

I have been using sequence diagrams a lot for embedded or real-time systems a lot last year, and travel time is important there.

Besides, it allows to have one diagram abstract from another, without modifying execution times.

WebSequenceDiagrams supports this:

https://www.websequencediagrams.com/?lz=dGl0bGUgVW4AAwVkCgpB...

Premium version allows crossed messages: https://www.websequencediagrams.com/cgi-bin/cdraw?lz=dGl0bGU...

I use https://sequencediagram.org/ quite frequently these days, I like how you can get a link with the actual diagram encoded in it, makes it trivial to store and share.

it's got Google Drive integration too. I use it and put all the diagrams into a Google Drive folder.

Thanks for sharing! Sequence diagrams are awesome.

I've used websequencediagrams.com and PlantUML to create them before, and honestly I much prefer using an open source CLI tool for this than a closed source service, even if it's free to use. The day the site goes offline all my Git versioned diagrams would be useless.

If the authors are reading: have you considered releasing a standalone CLI tool? It could even be open sourcing the site itself and packaging it as a Docker image. If not, exposing an API like wsd.com has would be very useful.

Hi. I created this years ago and have not been able to give it much attention lately. There is a very basic API, https://swimlanes.io/docs/api

You can also embed a diagram. See https://jsfiddle.net/y6Lqpfcw/

Much appreciated. That still does network requests and I wasn't able to make it work fully offline after downloading all the assets, but pretty nice nonetheless.

Really? I downloaded the js file linked and set up an index.html with that snippet. The only requests being made were for FontAwesome stuff which you could also download and change the references to in that `embed.js`.

Yeah, I gave up at changing the minified JavaScript, and would still prefer a saner and official offline solution from the author.

But it's not a request, I doubt I'll ever use this because of my initial points. If it was a CLI tool that converted plain text input to image I'd consider trying it out.

Why not use Mermaid (JS => SVG) or PlantUML (Java => SVG, PNG, etc)?

Especially Mermaid [1] is supported by a lot of Markdown editors and can be directly rendered in browsers by including the javascript library. Without any data protection issues.

PlantUML needs a server or an installation (Java) which can be self hosted as well. And provides a ton of integrations [2]. And of course it supports sequence diagrams [3]

[1] https://mermaid-js.github.io/mermaid/#/sequenceDiagram

[2] https://plantuml.com/en/running

[3] https://plantuml.com/en/sequence-diagram

I'll throw diagrams.net (formerly draw.io) into the discussion.

Their UI is incredibly well designed/intuitive. Does swim lanes quite well - along with most other charts/diagrams... and there's a desktop version too.

draw.io is open-source and easily self-hostable, too.

And can be edited in VSCode

https://marketplace.visualstudio.com/items?itemName=hediet.v...

I use both regularly and tbh they aren’t comparable. Swimlanes.io is the perfect example of one small niche idea well executed while diagrams.net is also well executed but the other side of the scale. If you want a quick swimlane diagram you can have it published in the time it takes you to prep the canvas in diagrams.net

Fun! I think there's a ton of value in programmatic "markup for flowchart" type tools. My tool of choice has historically been MermaidJS: https://mermaid-js.github.io/mermaid-live-editor

Not sequence diagrams but a tool to make diagrams in general yEd - http://yworks.com -- been using it since a long time - it's Java based, so works on all platforms and it's free to use.

Sequence diagrams seem like the go--to format for displaying data flow in a microservice-type environment, but even though there is a plethora of implementations in various languages and technologies that generate diagrams of this kind, they all lack certain functionalities, number one being the support for threads. Some solutions do provide the "par" fragment, but this is inadequate when message ordering corresponds to cronological ordering. Numbering messages may help, but I find it easier to grasp what is going on visually with multiple activations per lifeline (the best implementation of this I've found to date is the Quick Sequence Diagram Editor [http://sdedit.sourceforge.net/], but that project doesn't seem to be active or maintained).

I've recently tried to find a suitable solution for this on StackOverflow, but I've been rejected under the "Opinionated question" remark (::sigh::), so I could just as well do it here.

Is there a (Java based) sequence diagram generating tool/library that has the following functionalities:

. supports multiple threads and thread referencing in messages (multiple activations per lifeline)

. supports delayed messages (message trasmission and message reception can occur at different times, i.e. sending a message does not imply immediate reception on the other side)

. no custom language/pseudocode as input, but builder-style approach (I use Java to generate a text description of the diagram and then pass it to the library for parsing - I could just call the methods the parser calls and remove the unneccesary middle man)

. highly customizable visual style (PlantUML, the most flexible I've found in this regard, is notoriously bad at styling, mostly due to a lack of a coherent styling paradigm)

If not, how many people would be interested in such a thing? I may start it as an open source project myself...

I'm not familiar with those features, and agree that PlantUML generated diagrams have a distinctive look, but why not contribute to PlantUML instead of starting yet another project of this type? It's written in Java, so it meets that requirement.

This was my intention as well so I tried familiarizing myself with PlantUML code (made a small contribution as a result), but in the end, I came to the conclusion that the overhead of getting to know its ins and outs would be greater than to get a new project to a usable state from scratch. PlantUML is, unfortunately, burdened with years of development choices that make it tough to modify in a way to conform to what I need. Most of these functionalities were (I'm 100% sure for the multiple threads and customization of the visuals), at some point, mentioned in various forum discussions as "possibly under development" by the developer, just to be followed with years of silence on the topic. And if they aren't able to deliver those, I'm not going to be, for sure.

Cool!

Sequence diagrams are by far the most effective way to communicate system behavior.

These, and boxes-and-lines diagrams to communicate component relationships, are all that's necessary to document a system of arbitrary complexity.

I'd add state machine diagrams if those aren't covered by your previous suggestions. I suppose they could be considered a subset of sequence diagrams.

Statecharts and other variants of state machine diagrams are quite useful, but they serve a different purpose than sequence diagrams.

A sequence diagram describes an exchange of messages between different objects.

A statechart describes the states of an individual object and how it transitions between those states.

Yeah I meant more like they have some superficial structural similarities to each other

For statechart diagrams see: https://xstate.js.org/viz/

Note that in addition to being editable, they are executable and can be used to implement state transition logic in node/browser JS code.

The visualizer is used throughout XState's docs.

I've been using this for years. Is really good and the best feature is that diagrams don't look like crap by default, which is not the case for most code to diagram tools out there. Looking at your Plant UML.

"Markup for diagram" is great so long as others have a way to edit the markup when you use the diagram in your document.

Blockdiag/Seqdiag has a pretty good RST integration for Sphinx.

Lately I've been using the ZenUML diagram plugin for Confluence which lets you do sequence and other diagrams using Mermaid-JS.

Considering that the author of swimlanes.io seems to have mastered the part where the diagram is encoded into a URL, it feels like making plugins to popular documentation systems is the obvious next step to making this useful for engineering orgs.

My incomplete attempt to do something similar in python https://github.com/ragsagar/yezdi

For sequence diagrams in text format you can take diagwiz for a spin. There is also an online version of the tool. Disclaimer: It is working, but it's still just an experiment and might change a lot.

https://github.com/kjagiello/diagwiz

https://diagwiz.io/playground/ (not really mobile friendly)

These do the same i.e. ASCII sequence diagrams

https://textart.io/sequence

http://weidagang.github.io/text-diagram/

Diagrams seem to be on everybody's mind recently ;)

Question: are there any good tools to automatically represent (almost) any code as diagrams?

Use case: I wrote a pretty complex simulation in Python, which is a little hard to explain to my colleagues. I would like to have, e.g., a sequence or a swimlane diagram to help others understand what is going on. I would like this diagram to be automatically generated by other software (IDE extension, plugin, package, etc.).

Would you have any suggestions?

wouldn’t you need to use a call graph generator? like cscope but for python?

here’s a ref to get you started: https://stackoverflow.com/questions/517589/tools-to-get-a-pi...

Thanks! That's the keyword I was looking for!

(If any Python person is reading it, please share your recommendations.)

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

I like the tool but I hate that you use resources from Google servers and font awesome. That's against German (and I guess European) data protection laws, the DSVGO. That's because you route my traffic (well, I have a blocker, but for other users) without consent to servers which are not needed for your operation.

I never understood why website operators don't just serve their scripts and fonts locally.

This is really a great tool. I have been using https://www.websequencediagrams.com/ in the past. Will definitely give this one a shot.

Generating quick sequence diagrams helps a lot to articulate ideas. Ever since wfh, I have used these tools a lot of communicate design flow with team mates.

This is so creative!

I never would've thought making a Latex for diagrams! I can't think of an immediate use case but this is really cool!

There's PGF/TikZ[1], but from what i've seen, it appears a bit clunky. These days I usually see packages which are basically convenience wrappers living above TikZ for common usecases (e.g. visualizing neural networks in papers)

Very cool. Makes me think of https://dbdiagram.io

Looks great and super easy to use! I find myself needing these all the time for work and really hate Visio

https://mscgen.js.org/

Can confirm, the best online MSC editor out there, and we looked hard a couple of years ago.

Could have a better new-user experience.

1. Load an example you can play with to start so you can see what the product does

2. In the examples dropdown, use meaningful names instead of obscure acronyms

3. Make the top example serious instead of some cutesy nose flute thing with made-up onomatopoeia labels

Pretty cool.

I was hoping to see a swim lane diagram? Could you add that as a feature? Then I can share it with some business analysts who love that kind of thing.

https://en.wikipedia.org/wiki/Swim_lane

Interesting, I've always referred to UML sequence diagrams as swimlanes, and it seems I'm not alone in making this mistake.

In UML parlance, you're looking for partitioned activity diagrams. These are, in fact, "true" swimlane diagrams. Hmm!

https://www.uml-diagrams.org/

One past thread here:

Show HN: Swimlanes – A web app for creating sequence diagrams with Markdown - https://news.ycombinator.com/item?id=15930923 - Dec 2017 (14 comments)

I'm curious: who made this? What stack? I couldn't find anything on the page.

I just see an entirely blank page. Chrome incognito mode.

Hi. I made this. Its mostly plain JS, all of the diagram, except the arrow heads, are simple div element

Hi! Thanks for replying. Is there any storage layer? Or is everything encoded in the URL?

Yes. There is a simple storage if you sign in with google/github

I mean what's the storage from a technical standpoint? If you're saving every version of every swimlane that anonymous users create, it seems like that would add up in your database.

If you dont sign in nothing is stored. Your diagram data does not leave the browser, unless you generate an image. The diagram data is in the url

Thank you for making this. Are you making the code available?

I'm curious to know the improvements that have been made since this first showed up on HN 3 years ago?

Looks like it was already a functioning tool back then... Can anyone who uses it jump in on this?

I just don't see the point. If it only supports one type of diagram (and judging by the name, it seems like it only ever will), why would I use this over PlantUML?

A list of all such tools https://xosh.org/text-to-diagram/

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

So, if anyone wants to make diagramming software and is looking for a niche, there's something used in quality improvement called a "driver diagram".

These are very simple.

https://qi.elft.nhs.uk/resource/driver-diagrams/

http://www.ihi.org/resources/Pages/Tools/Driver-Diagram.aspx

The problem is that you want something that a small team can collaborate on; that allows them to control where it's stored and viewable; that works with baffling NHS bureaucracy; and is very easy to use. You want something that allows actions to be attached and completed. And you might want to allow it to link to other documents. (For example, "we tried change idea 1, and we didn't see any improvement, here's the data").

The other problem is that most software will apply colour vertically to a column, but you probably don't want that. You want something that allows horizontal stripes.

Vertical: https://tse4.mm.bing.net/th?id=OIP.hhpwTzkH7yvSFeBY61hM7wHaF...

Horizontal: https://tse1.mm.bing.net/th?id=OIP.i9BwtTbgKV-UGlO5675QtgHaF...

Horizontal: https://tse4.mm.bing.net/th?id=OIP.4oy4eY78Ik4sl5r2ygFpvgHaE...

There's something called LifeQI which is good but a bit spendy and it covers a lot more detail than just driver diagrams.

Also: https://playground.diagram.codes/

https://www.ilograph.com is great for this and more

I read edible :(

Print them out.

Me too! What is going on :)

Oh man, someone showed me this site a few years ago and I never could find it again. Glad it popped back up

The inline editing and change propagation is very cool.

[bug] Swimlane name changes aren't propagated to notes.

Sequence diagrams, this deserves an awesomelist. And swimlanes.io should be on that list

fun to see that these past few days's "uml is dead" articles were entire bullshit given the amount of uml-related stuff being worked on today

All I have to say is.....this is bloody amazing :')

where is the privacy policy? I cannot use this for work without reading that.

data is local to your browser. it doesn’t need a privacy policy.

I see that. But without privacy policy, they cannot be held accountable for changes that can be introduced later on. I checked that there are no backend communication and there are no open websockets. But still kind of scary to use this without a clear Privacy Policy. I love the product by the way :)

it's a noname "product" without even an "about" page. they cannot be held accountable regardless. a privacy policy in this context is 100% meaningless. you are asking too much IMHO.

Series of trending posts on modeling language in the last few days...what's up HN!?!

Nice

This app has saved me countless hours. Very well executed but I don’t like their publicly viewable permissions being the default.

Reply on news.ycombinator.com