11 ms·

Swimlanes.io – generated editable sequence diagrams

604 points by smusamashah 6y ago

xtracto 6y ago
Reminds me of https://bramp.github.io/js-sequence-diagrams/ 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.
- hakcermani 6y ago
  Another similar site that i have used a lot is ... https://www.websequencediagrams.com/ https://www.websequencediagrams.com/ .. i particularly like the svg export of websequencediagrams.
  - avodonosov 6y ago
    also https://sequencediagram.org https://sequencediagram.org
- jorisd 6y ago
  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.0.1/test.html 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 :)
  - xtracto 6y ago
    Howdy, that's some black magic! Thanks a lot, that's a really neat idea.
sly010 6y ago
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
jonahx 6y ago
Prior art: 1. Plant UML: http://www.plantuml.com/plantuml/umla/SoWkIImgAStDuNBCoKnELT2rKt3AJx9IS2mjoKZDAybCJYp9pCzJ24ejB4qjBk42oYde0jM05MDHLLoGdrUSoeLkM5u-K5sHGY9MGw6ARNHryQb66EwGcfS2T300 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/ https://www.websequencediagrams.com/ Has a hand-drawn style option which is nice: https://i.imgur.com/lh4jaVL.png https://i.imgur.com/lh4jaVL.png
- Veuxdo 6y ago
  Ilograph supports interactive sequence diagrams e.g. https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520Diagram https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520Diag...
  - intrasight 6y ago
    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?
    - Veuxdo 6y ago
      There is a desktop version that works off-line: https://www.ilograph.com/desktop/index.html https://www.ilograph.com/desktop/index.html
    - avodonosov 6y ago
      FWIW, https://diagrams.net/ https://diagrams.net/ also have a downloadable version. But it's a point and click WYSIWYG editor, not a text notation like swimlanes.io.
- avodonosov 6y ago
  https://sequencediagram.org https://sequencediagram.org is another alternative
  - 6y ago
monkeydust 6y ago
These are becoming as prevalent as note taking apps on HN!
- DanBC 6y ago
  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/ https://qi.elft.nhs.uk/resource/driver-diagrams/ http://www.ihi.org/resources/Pages/Tools/Driver-Diagram.aspx 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.hhpwTzkH7yvSFeBY61hM7wHaF9&pid=Api https://tse4.mm.bing.net/th?id=OIP.hhpwTzkH7yvSFeBY61hM7wHaF... Horizontal: https://tse1.mm.bing.net/th?id=OIP.i9BwtTbgKV-UGlO5675QtgHaFQ&pid=Api https://tse1.mm.bing.net/th?id=OIP.i9BwtTbgKV-UGlO5675QtgHaF... Horizontal: https://tse4.mm.bing.net/th?id=OIP.4oy4eY78Ik4sl5r2ygFpvgHaEK&pid=Api 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.
jsmcgd 6y ago
The inline editing and change propagation is very cool. [bug] Swimlane name changes aren't propagated to notes.
travisjungroth 6y ago
I'm curious: who made this? What stack? I couldn't find anything on the page.
- marshray 6y ago
  I just see an entirely blank page. Chrome incognito mode.
- frank13 6y ago
  Hi. I made this. Its mostly plain JS, all of the diagram, except the arrow heads, are simple div element
  - travisjungroth 6y ago
    Hi! Thanks for replying. Is there any storage layer? Or is everything encoded in the URL?
    - frank13 6y ago
      Yes. There is a simple storage if you sign in with google/github
      - travisjungroth 6y ago
        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.
      - frank13 6y ago
        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
  - kobieyc 6y ago
    Thank you for making this. Are you making the code available?
superfrank 6y ago
Oh man, someone showed me this site a few years ago and I never could find it again. Glad it popped back up
canada_dry 6y ago
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.
- jamespwilliams 6y ago
  draw.io is open-source and easily self-hostable, too.
  - dariusj18 6y ago
    And can be edited in VSCode https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio https://marketplace.visualstudio.com/items?itemName=hediet.v...
- rorykoehler 6y ago
  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
imiric 6y ago
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.
- frank13 6y ago
  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 https://swimlanes.io/docs/api
  - frank13 6y ago
    You can also embed a diagram. See https://jsfiddle.net/y6Lqpfcw/ https://jsfiddle.net/y6Lqpfcw/
    - imiric 6y ago
      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.
      - rockostrich 6y ago
        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`.
        imiric 6y ago
        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.
sirk390 6y ago
Very cool. Makes me think of https://dbdiagram.io https://dbdiagram.io
sagichmal 6y ago
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.
- hderms 6y ago
  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.
  - michaelsbradley 6y ago
    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.
    - hderms 6y ago
      Yeah I meant more like they have some superficial structural similarities to each other
jayniz 6y ago
I read edible :(
- sgt 6y ago
  Print them out.
- Geee 6y ago
  Me too! What is going on :)
barbazoo 6y ago
I use https://sequencediagram.org/ 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.
- zemo 6y ago
  it's got Google Drive integration too. I use it and put all the diagrams into a Google Drive folder.
vprcic 6y ago
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/ 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...
- imiric 6y ago
  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.
  - vprcic 6y ago
    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.
rorykoehler 6y ago
This app has saved me countless hours. Very well executed but I don’t like their publicly viewable permissions being the default.
redleader55 6y ago
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.
- dariusj18 6y ago
  Apparently https://sequencediagram.org/ https://sequencediagram.org/ is what you want. It has "non-instantaneous message"
  - keithnz 6y ago
    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
    - michegor 6y ago
      Well, if you really want to, you can do it: Alice->(5)Bob:message1 space -6 Alice(4)<-Bob:the other\nmessage
- prepend 6y ago
  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.
- braho 6y ago
  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.
flexterra 6y ago
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.
omot 6y ago
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!
- dwrodri 6y ago
  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)
sergiotapia 6y ago
Also: https://playground.diagram.codes/ https://playground.diagram.codes/
kjagiello 6y ago
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://github.com/kjagiello/diagwiz https://diagwiz.io/playground/ https://diagwiz.io/playground/ (not really mobile friendly)
- smusamashah 6y ago
  These do the same i.e. ASCII sequence diagrams https://textart.io/sequence https://textart.io/sequence http://weidagang.github.io/text-diagram/ http://weidagang.github.io/text-diagram/
ram_rar 6y ago
This is really a great tool. I have been using https://www.websequencediagrams.com/ 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.
skilesare 6y ago
https://mscgen.js.org/ https://mscgen.js.org/
- Andrew_nenakhov 6y ago
  Can confirm, the best online MSC editor out there, and we looked hard a couple of years ago.
- Noumenon72 6y 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
red_hare 6y ago
"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.
uncomputation 6y ago
Looks great and super easy to use! I find myself needing these all the time for work and really hate Visio
ragsagar 6y ago
My incomplete attempt to do something similar in python https://github.com/ragsagar/yezdi https://github.com/ragsagar/yezdi
michaelsbradley 6y ago
For statechart diagrams see: https://xstate.js.org/viz/ 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.
unixhero 6y ago
Sequence diagrams, this deserves an awesomelist. And swimlanes.io should be on that list
loeber 6y ago
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 https://mermaid-js.github.io/mermaid-live-editor
smusamashah 6y ago
A list of all such tools https://xosh.org/text-to-diagram/ https://xosh.org/text-to-diagram/
jpollock 6y ago
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 https://en.wikipedia.org/wiki/Swim_lane
- austinjp 6y ago
  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/ https://www.uml-diagrams.org/
RamblingCTO 6y ago
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.
danellis 6y ago
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?
dmingod666 6y ago
Not sequence diagrams but a tool to make diagrams in general yEd - http://yworks.com 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.
woah 6y ago
Nice
rsashwin 6y ago
where is the privacy policy? I cannot use this for work without reading that.
- jiveturkey 6y ago
  data is local to your browser. it doesn’t need a privacy policy.
  - rsashwin 6y ago
    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 :)
    - jiveturkey 6y ago
      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.
dang 6y ago
One past thread here: Show HN: Swimlanes – A web app for creating sequence diagrams with Markdown - https://news.ycombinator.com/item?id=15930923 https://news.ycombinator.com/item?id=15930923 - Dec 2017 (14 comments)
dr_kiszonka 6y ago
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?
- jiveturkey 6y ago
  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-pictorial-function-call-graph-of-code https://stackoverflow.com/questions/517589/tools-to-get-a-pi...
  - dr_kiszonka 6y ago
    Thanks! That's the keyword I was looking for! (If any Python person is reading it, please share your recommendations.)
deviation 6y ago
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?
indus 6y ago
Series of trending posts on modeling language in the last few days...what's up HN!?!
andix 6y ago
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 https://mermaid-js.github.io/mermaid/#/sequenceDiagram [2] https://plantuml.com/en/running https://plantuml.com/en/running [3] https://plantuml.com/en/sequence-diagram https://plantuml.com/en/sequence-diagram
jcelerier 6y ago
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
notyourplayer 6y ago
All I have to say is.....this is bloody amazing :')
mikestaub 6y ago
https://www.ilograph.com https://www.ilograph.com is great for this and more

604 points by smusamashah 6y ago

Reminds me of https://bramp.github.io/js-sequence-diagrams/ 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.

hakcermani 6y ago
Another similar site that i have used a lot is ... https://www.websequencediagrams.com/ https://www.websequencediagrams.com/ .. i particularly like the svg export of websequencediagrams.
- avodonosov 6y ago
  also https://sequencediagram.org https://sequencediagram.org
jorisd 6y ago
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.0.1/test.html 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 :)
- xtracto 6y ago
  Howdy, that's some black magic! Thanks a lot, that's a really neat idea.

sly010 6y ago

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

jonahx 6y ago

Prior art: 1. Plant UML: http://www.plantuml.com/plantuml/umla/SoWkIImgAStDuNBCoKnELT2rKt3AJx9IS2mjoKZDAybCJYp9pCzJ24ejB4qjBk42oYde0jM05MDHLLoGdrUSoeLkM5u-K5sHGY9MGw6ARNHryQb66EwGcfS2T300 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/ https://www.websequencediagrams.com/ Has a hand-drawn style option which is nice: https://i.imgur.com/lh4jaVL.png https://i.imgur.com/lh4jaVL.png

Veuxdo 6y ago
Ilograph supports interactive sequence diagrams e.g. https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520Diagram https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520Diag...
- intrasight 6y ago
  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?
  - Veuxdo 6y ago
    There is a desktop version that works off-line: https://www.ilograph.com/desktop/index.html https://www.ilograph.com/desktop/index.html
  - avodonosov 6y ago
    FWIW, https://diagrams.net/ https://diagrams.net/ also have a downloadable version. But it's a point and click WYSIWYG editor, not a text notation like swimlanes.io.
avodonosov 6y ago
https://sequencediagram.org https://sequencediagram.org is another alternative
- 6y ago

monkeydust 6y ago

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

DanBC 6y ago
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/ https://qi.elft.nhs.uk/resource/driver-diagrams/ http://www.ihi.org/resources/Pages/Tools/Driver-Diagram.aspx 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.hhpwTzkH7yvSFeBY61hM7wHaF9&pid=Api https://tse4.mm.bing.net/th?id=OIP.hhpwTzkH7yvSFeBY61hM7wHaF... Horizontal: https://tse1.mm.bing.net/th?id=OIP.i9BwtTbgKV-UGlO5675QtgHaFQ&pid=Api https://tse1.mm.bing.net/th?id=OIP.i9BwtTbgKV-UGlO5675QtgHaF... Horizontal: https://tse4.mm.bing.net/th?id=OIP.4oy4eY78Ik4sl5r2ygFpvgHaEK&pid=Api 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.

jsmcgd 6y ago

The inline editing and change propagation is very cool. [bug] Swimlane name changes aren't propagated to notes.

travisjungroth 6y ago

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

marshray 6y ago
I just see an entirely blank page. Chrome incognito mode.
frank13 6y ago
Hi. I made this. Its mostly plain JS, all of the diagram, except the arrow heads, are simple div element
- travisjungroth 6y ago
  Hi! Thanks for replying. Is there any storage layer? Or is everything encoded in the URL?
  - frank13 6y ago
    Yes. There is a simple storage if you sign in with google/github
    - travisjungroth 6y ago
      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.
    - frank13 6y ago
      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
- kobieyc 6y ago
  Thank you for making this. Are you making the code available?

superfrank 6y ago

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

canada_dry 6y ago

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.

jamespwilliams 6y ago
draw.io is open-source and easily self-hostable, too.
- dariusj18 6y ago
  And can be edited in VSCode https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio https://marketplace.visualstudio.com/items?itemName=hediet.v...
rorykoehler 6y ago
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

imiric 6y ago

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.

frank13 6y ago
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 https://swimlanes.io/docs/api
- frank13 6y ago
  You can also embed a diagram. See https://jsfiddle.net/y6Lqpfcw/ https://jsfiddle.net/y6Lqpfcw/
  - imiric 6y ago
    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.
    - rockostrich 6y ago
      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`.
      - imiric 6y ago
        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.

sirk390 6y ago

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

sagichmal 6y ago

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.

hderms 6y ago
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.
- michaelsbradley 6y ago
  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.
  - hderms 6y ago
    Yeah I meant more like they have some superficial structural similarities to each other

jayniz 6y ago

I read edible :(

sgt 6y ago
Print them out.
Geee 6y ago
Me too! What is going on :)

barbazoo 6y ago

I use https://sequencediagram.org/ 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.

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

vprcic 6y ago

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/ 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...

imiric 6y ago
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.
- vprcic 6y ago
  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.

rorykoehler 6y ago

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

redleader55 6y ago

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.

dariusj18 6y ago
Apparently https://sequencediagram.org/ https://sequencediagram.org/ is what you want. It has "non-instantaneous message"
- keithnz 6y ago
  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
  - michegor 6y ago
    Well, if you really want to, you can do it: Alice->(5)Bob:message1 space -6 Alice(4)<-Bob:the other\nmessage
prepend 6y ago
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.
braho 6y ago
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.

flexterra 6y ago

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.

omot 6y ago

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!

dwrodri 6y ago
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)

sergiotapia 6y ago

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

kjagiello 6y ago

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://github.com/kjagiello/diagwiz https://diagwiz.io/playground/ https://diagwiz.io/playground/ (not really mobile friendly)

smusamashah 6y ago
These do the same i.e. ASCII sequence diagrams https://textart.io/sequence https://textart.io/sequence http://weidagang.github.io/text-diagram/ http://weidagang.github.io/text-diagram/

ram_rar 6y ago

This is really a great tool. I have been using https://www.websequencediagrams.com/ 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.

skilesare 6y ago

https://mscgen.js.org/ https://mscgen.js.org/

Andrew_nenakhov 6y ago
Can confirm, the best online MSC editor out there, and we looked hard a couple of years ago.
Noumenon72 6y 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

red_hare 6y ago

"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.

uncomputation 6y ago

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

ragsagar 6y ago

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

michaelsbradley 6y ago

For statechart diagrams see: https://xstate.js.org/viz/ 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.

unixhero 6y ago

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

loeber 6y ago

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 https://mermaid-js.github.io/mermaid-live-editor

smusamashah 6y ago

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

jpollock 6y ago

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 https://en.wikipedia.org/wiki/Swim_lane

austinjp 6y ago
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/ https://www.uml-diagrams.org/

RamblingCTO 6y ago

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.

danellis 6y ago

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?

dmingod666 6y ago

Not sequence diagrams but a tool to make diagrams in general yEd - http://yworks.com 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.

woah 6y ago

Nice

rsashwin 6y ago

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

jiveturkey 6y ago
data is local to your browser. it doesn’t need a privacy policy.
- rsashwin 6y ago
  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 :)
  - jiveturkey 6y ago
    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.

dang 6y ago

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

dr_kiszonka 6y ago

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?

jiveturkey 6y ago
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-pictorial-function-call-graph-of-code https://stackoverflow.com/questions/517589/tools-to-get-a-pi...
- dr_kiszonka 6y ago
  Thanks! That's the keyword I was looking for! (If any Python person is reading it, please share your recommendations.)

deviation 6y ago

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?

indus 6y ago

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

andix 6y ago

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 https://mermaid-js.github.io/mermaid/#/sequenceDiagram [2] https://plantuml.com/en/running https://plantuml.com/en/running [3] https://plantuml.com/en/sequence-diagram https://plantuml.com/en/sequence-diagram

jcelerier 6y ago

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

notyourplayer 6y ago

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

mikestaub 6y ago

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