@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
```mermaid
graph TD;
A-->B
```
As a bonus, niolesk is a very good frontend on top of kroki. You get an editable link of your diagram which you can share with teammates.
You can find docker image on github running kroki and niolesk.
And why do so many tools choose to ignore life lines and provide incomplete sequence diagrams? Perhaps it gets really complicated to express in such a simple way as the examples do?
https://plantuml.com/sequence-diagram#5cc0040514e70f7b
You can even have two active on the same lane at the same time, as shown in the second example on that page.
However, it gets to be difficult to use if you've got complicated scenarios. It's very difficult to depict parallelism with PlantUML.
I'd use whichever works for your ecosystem and diagram lifecycle. The syntax is similar enough that I think the diagram creation constraints are often a bigger difference.
That aside the “unreasonable effectiveness” allusion to “The Unreasonable Effectiveness of Mathematics in the Natural Sciences” is clearly overwrought. Let’s not get ahead of ourselves.
> Reaching for code to solve my code problem seemed like something that would only appeal to someone that loves code so much that they're probably no good at visualizing.
It looks more like a pseudo-markup to me.
Can I ask why you chose that title template?
It's a meme title, I've seen it a couple of times on HN: https://hn.algolia.com/?q=Unreasonable+Effectiveness
Also see: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
(Shameless plug: Intro to D2 https://victorbjorklund.com/build-diagrams-as-code-with-d2-d... )
I was going to ask why you don't have a web version but you already do. I'm going to play with this more today.
Have you thought about an "auto compile"/live mode where it changes as you edit the text? I think this adds a level of intuitiveness that would help new users explore.
The syntax is a bit different though, so it depends on where your source is coming from, see here: https://text-to-diagram.com/?example=sequence&b=mermaid
However the big problem here being that d2 is still quite new and isn't as well supported as Mermaid JS
My guide: https://victorbjorklund.com/build-diagrams-as-code-with-d2-d...
The default styles in mermaid look a little nicer than graphviz, which might be enough to motivate me to try it out. When/if I do, I'll probably try with this emacs package: https://github.com/abrochard/mermaid-mode.
https://marketplace.visualstudio.com/items?itemName=bierner....
That’s been so convenient to me, I now strongly prefer mermaidjs over more featured tools like lucid or Visio or draw.io.
It was amazingly useful for diagnosing problems. I wish more logging systems were able to visualise flows through a system of micro services so well!
(1) you just open the web app and start typing and you have the beginnings of your diagram within 30 seconds literally.
(2) The web app is elegantly and thoughtfully designed, the diagrams are beautiful, export functionality is there.
For your point (2) I offer the same alternative, but with the caveat that of the 3 criteria of elegant/thoughtful design, beautiful diagrams, and export functionality, it meets only the last 2 (and I claim little personal credit in any case).
Docusaurus.io framework. Why? It's compatible with MermaidJS-- simply run 1 install command, and setup 2 config settings-- shown here: https://docusaurus.io/docs/next/api/themes/@docusaurus/theme...
Docusaurus provides: Docs, Blog, Pages. Via Markdown. And for pages, it even allows basic JSX (reactjs style components).
Lately I've really been enjoying the combination of Docusaurus & Mermaid to document my personal projects.
But that diagram just renders as code via GitHub Pages:
I only wish the renderer could render "sketch" style like Excalidraw, I don't like the default appearance. Obviously a small detail, though.
Entity diagrams, especially for database ERD
Timing diagrams (think: Gantt)
Interaction/flow diagrams
Use case diagrams
XEARTH is also pretty neat, if you don't want to bring in a full mapping API just to show a point on a map. I realize it's a pretty crappy map in XEARTH, but the point is, I don't always need a good map.
Mermaid's nice though. I love the git graph - I use that thing every day. If I'm not dealing with ITAR data I just render everything remote through the kroki service, and take what I need from each graph spec.
Meanwhile, sequence diagrams map very well from the text description.
I don’t know how else you would model that. Words don’t communicate deeply enough.
https://sequence-diagrams.netlify.app
Note the credit on that page to bramp.github.io who did the hard work with the JS library it uses. And when you find UI issues remember it was a quick tool knocked up years ago and forgive me.
I entertain the idea that AI [CNN + TNN] can finally fulfill the ultimate UML promise: build code from diagrams. In a certain way, it's easy to see AI trained to ingest diagrams as logical sequences of prompts. With a little effort it is already doable with current tech.
I have noticed that some tools don't allow exporting diagrams anymore or have a watermark on them now. Need to add that info someday.
It's not the interesting problem that I'm trying to solve so I'd love to reuse something if I can.
I'm sure Mermaid.js is nice and I will try it for comparison soon.
adding links + tooltips: https://jsfiddle.net/s37cjoau/3/
I did an eval of some other options for more dynamic apps including react-flow, cytoscapeJS etc. https://github.com/dcsan/autoapps/issues/1
0: https://marketplace.atlassian.com/apps/1214124/mermaid-plugi...
Also lack of consistency in common things.
That being said, SVG is likely still a better option than PNG for its scalability alone. At least for this kind of content.
Relation (box-and-line) diagrams show the static relations between resources in a system, not individual scenarios. This typically gives a better overview.
Long story short, you need both. If you want the long story, I wrote (a lot) on this a couple of years back: https://www.ilograph.com/blog/posts/the-two-fundamental-type...
i hope it makes a bit more sense