Reminds me of https://bramp.github.io/js-sequence-diagrams/ The nice thing about that library is that you actually can have a self-contained HTML page with a diagram, like: var diagram = Diagram.parse("A->B: Message"); diagram.drawSVG("diagram", {theme: 'hand'}); And this will draw render a sequence diagram in any browser. I've used this to have as documentation in the /docs folder of project Git repository for some…
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 :)
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.
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.
Prior art: 1. Plant UML: http://www.plantuml.com/plantuml/umla/SoWkIImgAStDuNBCoKnELT... PlantUML supports many diagram types, and there's a nice VS Code plugin with side by side live preview. 2. https://www.websequencediagrams.com/ Has a hand-drawn style option which is nice: https://i.imgur.com/lh4jaVL.png
MermaidJS is also a good alternative: https://mermaid-js.github.io/mermaid-live-editor/
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 horizo…
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.
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`.
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…
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.