[HN Gopher] Swimlanes.io - generated editable sequence diagrams
___________________________________________________________________
Swimlanes.io - generated editable sequence diagrams
Author : smusamashah
Score : 355 points
Date : 2021-04-27 14:54 UTC (8 hours ago)
(HTM) web link (swimlanes.io)
(TXT) w3m dump (swimlanes.io)
| rorykoehler wrote:
| This app has saved me countless hours. Very well executed but I
| don't like their publicly viewable permissions being the default.
| jsmcgd wrote:
| The inline editing and change propagation is very cool.
|
| [bug] Swimlane name changes aren't propagated to notes.
| redleader55 wrote:
| 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.
| prepend wrote:
| 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 wrote:
| 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.
| dariusj18 wrote:
| Apparently https://sequencediagram.org/ is what you want. It
| has "non-instantaneous message"
| xtracto wrote:
| 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/aja
| x/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.
| jorisd wrote:
| 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
| :)
| xtracto wrote:
| Howdy, that's some black magic! Thanks a lot, that's a really
| neat idea.
| hakcermani wrote:
| Another similar site that i have used a lot is ...
| https://www.websequencediagrams.com/ .. i particularly like the
| svg export of websequencediagrams.
| avodonosov wrote:
| also https://sequencediagram.org
| jonahx wrote:
| 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
| carb wrote:
| 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
| avodonosov wrote:
| https://sequencediagram.org is another alternative
| gregmac wrote:
| 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.
| eugene0 wrote:
| MermaidJS is also a good alternative: https://mermaid-
| js.github.io/mermaid-live-editor/
| leipert wrote:
| GitLab has mermaid support in its markdown
| https://docs.gitlab.com/ee/user/markdown.html#mermaid
| Veuxdo wrote:
| Ilograph supports interactive sequence diagrams e.g.
| https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520Diag...
| intrasight wrote:
| 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 wrote:
| There is a desktop version that works off-line:
| https://www.ilograph.com/desktop/index.html
| avodonosov wrote:
| 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.
| swyx wrote:
| collated these diagramming tools here: https://github.com/sw-
| yx/spark-joy/blob/master/README.md#gen...
| gnat wrote:
| 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.
| scoot wrote:
| Any plans to do curated?
| swyx wrote:
| 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
| kjagiello wrote:
| 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)
| smusamashah wrote:
| These do the same i.e. ASCII sequence diagrams
|
| https://textart.io/sequence
|
| http://weidagang.github.io/text-diagram/
| ram_rar wrote:
| 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.
| superfrank wrote:
| Oh man, someone showed me this site a few years ago and I never
| could find it again. Glad it popped back up
| sly010 wrote:
| 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
| ragsagar wrote:
| My incomplete attempt to do something similar in python
| https://github.com/ragsagar/yezdi
| danellis wrote:
| 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?
| sagichmal wrote:
| 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 wrote:
| 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 wrote:
| 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.
| michaelsbradley wrote:
| 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.
| flexterra wrote:
| 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.
| unixhero wrote:
| Sequence diagrams, this deserves an awesomelist. And swimlanes.io
| should be on that list
| monkeydust wrote:
| These are becoming as prevalent as note taking apps on HN!
| DanBC wrote:
| 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.
| smusamashah wrote:
| A list of all such tools https://xosh.org/text-to-diagram/
| loeber wrote:
| 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
| omot wrote:
| 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 wrote:
| 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)
| jayniz wrote:
| I read edible :(
| sgt wrote:
| Print them out.
| Geee wrote:
| Me too! What is going on :)
| skilesare wrote:
| https://mscgen.js.org/
| Andrew_nenakhov wrote:
| Can confirm, the best online MSC editor out there, and we
| looked hard a couple of years ago.
| barbazoo wrote:
| 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.
| zemo wrote:
| it's got Google Drive integration too. I use it and put all the
| diagrams into a Google Drive folder.
| canada_dry wrote:
| 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.
| rorykoehler wrote:
| 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
| jamespwilliams wrote:
| draw.io is open-source and easily self-hostable, too.
| dariusj18 wrote:
| And can be edited in VSCode
|
| https://marketplace.visualstudio.com/items?itemName=hediet.v.
| ..
| jpollock wrote:
| 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
| travisjungroth wrote:
| I'm curious: who made this? What stack? I couldn't find anything
| on the page.
| marshray wrote:
| I just see an entirely blank page. Chrome incognito mode.
| frank13 wrote:
| Hi. I made this. Its mostly plain JS, all of the diagram,
| except the arrow heads, are simple div element
| travisjungroth wrote:
| Hi! Thanks for replying. Is there any storage layer? Or is
| everything encoded in the URL?
| frank13 wrote:
| Yes. There is a simple storage if you sign in with
| google/github
| travisjungroth wrote:
| 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 wrote:
| 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 wrote:
| Thank you for making this. Are you making the code available?
| imiric wrote:
| 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 wrote:
| 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
| frank13 wrote:
| You can also embed a diagram. See
| https://jsfiddle.net/y6Lqpfcw/
| imiric wrote:
| 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 wrote:
| 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`.
| uncomputation wrote:
| Looks great and super easy to use! I find myself needing these
| all the time for work and really hate Visio
| red_hare wrote:
| "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.
| sirk390 wrote:
| Very cool. Makes me think of https://dbdiagram.io
| vprcic wrote:
| 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...
| imiric wrote:
| 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 wrote:
| 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.
| sergiotapia wrote:
| Also: https://playground.diagram.codes/
___________________________________________________________________
(page generated 2021-04-27 23:00 UTC)