Online text to diagram tools (2020) | Hacker News Reader

Online text to diagram tools (2020)

xosh.org

191 pointssmusamashah25 comments

A topic close to my heart! One thing though, lots of these tools are "offline", but some are found here as a repackaged service online. Personally, if I'm diagramming some important things, I don't want to trust yet another third party, and largely prefer "offline" tools, and I suspect there are others that have the same view. For testing the tools this is great though.

Blockdiag [3] is the one I tend to use the most, with both Mermaid [2] and the unoriginally named "diagrams" [1] being the two others I find the most interesting.

1. https://pypi.org/project/diagrams/

2. https://mermaid-js.github.io/mermaid/

3. http://blockdiag.com/en/

I have enjoyed using PlanUML, but getting a local renderer for team use is a big lift. I switched to Mermaid-JS last year. Using mermaid, we can do a number of diagrams in Markdown code blocks. VSCode has a markdown preview enhanced that can render these, and Gitlab will render mermaid. Also, you can get a mermaid plugin for Confluence.

It may not be the "best", but it's exceedingly versatile and has a low barrier to entry, which is a huge win for us.

Kroki.io is integrated into the text editor I've been developing:

https://github.com/DaveJarvis/keenwrite#screenshots

Would configuring it to use a local Kroki install be useful?

I have troubles with Mermaid. While I love what it does, the SVG it generates can draw out of bounds and some of the chart is not visible. I haven't tried some transform hack yet but it has some issues.

On a related note, I did some work on generating temporal graphs from text: https://arxiv.org/pdf/2010.10077.pdf

Code/models: https://github.com/madaan/temporal-graph-gen

Discussed at the time:

Online Text to Diagram Tools - https://news.ycombinator.com/item?id=23483922 - June 2020 (30 comments)

I didn't look too closely, but glad to see kroki is at least mentioned. Kroki isn't just an "online" tool, it's self-hostable, and effectively wraps most of the other formats / tools, providing a centralized interface to ~all the things. Recommended.

There are only a bunch of these tools. I compiled this list to make them easy to discover.

Maybe add a small paragraph explaining each of them, and some information about the priority of order?

I too am puzzled that a post about diagrams has not a diagram in sight ! I'd like to see a two-column comparison with the text + rendered image side-by-side for each.

Some todo list like chart made in each to help compare and contrast.

Too much work. Hard to revisit and update if i did that.

List in this form is easiest to revisit and update.

Screenshots and further description is too much work for a list.

Cool! I think it would be useful to have a screenshot next to each tool

Here's one that I made: https://gitlab.com/andrewfulrich/dagre-svg#readme and here's a live editor: https://andrewfulrich.gitlab.io/dagre-svg/editor.html

I tried to make the syntax simple for the basic use cases but also add enough flexibility in the functionality to encapsulate what I often want with clusters and styling.

Thanks. I like these tools as an easy way to autogenerate and version diagrams. I’ve been using mermaid quite a bit as it’s JS and plugs into Jekyll and static site generators pretty easily.

Nice list! I wish the licenses were also indicated (in short, whether it can run online).

My main use-case is generating diagrams for websites (static pages, documentation) and documents (latex, pandoc, beamer presentations), so I prefer having those ready to be compiled from a makefile.

Uh isn't "swimlanes" actually sequence diagrams?

I was looking for an actual swimlane diagram tool...

Yes, it's very confusing. They're both regularly interchangeable. In my opinion the sequence diagrams generated from these tools are easier to follow, but in practice swimlane diagrams "do the job" and are much easier to maintain/ensure consistency.

Or is it the reverse? I have to look it up every time..

Diagram using GUI -> text —> diagram

Does this exist?

If not clear, you jot something down in a GUI (not text). It generates text that you can edit (to complete it). Which in turn can be used to generate a diagram again.

Back and forth between UI and text form.

You could use an SVG editor, then take the raw svg file, edit than, then open it in a browser.

Not smooth, but the workflow is sort of there

I used graphviz, and built a live reload gui for it offline.

But the current releases are marked as malware by virustotal, which I suspect is a false positive but I cannot verify, so I do not use it for now (on windows)

https://www.mcternan.me.uk/mscgen/

https://app.zenuml.com

for those with broader interest in diagramming, just sharing my collection here https://github.com/sw-yx/spark-joy/blob/master/README.md#use...

Reply on news.ycombinator.com