5 ms·

Online text to diagram tools (2020)

191 points by smusamashah 6y ago

smusamashah 6y ago
There are only a bunch of these tools. I compiled this list to make them easy to discover.
- AgoRapide 6y ago
  Maybe add a small paragraph explaining each of them, and some information about the priority of order?
  - benrbray 6y ago
    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.
    - mycall 6y ago
      Some todo list like chart made in each to help compare and contrast.
    - smusamashah 6y ago
      Too much work. Hard to revisit and update if i did that.
  - smusamashah 6y ago
    List in this form is easiest to revisit and update. Screenshots and further description is too much work for a list.
- chubot 6y ago
  Cool! I think it would be useful to have a screenshot next to each tool
prepend 6y ago
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.
chrisweekly 6y ago
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.
fudged71 6y ago
Uh isn't "swimlanes" actually sequence diagrams? I was looking for an actual swimlane diagram tool...
- Mandatum 6y ago
  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..
marsven_422 6y ago
PlantUML is becoming the standard
arminiusreturns 6y ago
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/ https://pypi.org/project/diagrams/ 2. https://mermaid-js.github.io/mermaid/ https://mermaid-js.github.io/mermaid/ 3. http://blockdiag.com/en/ http://blockdiag.com/en/
- ytjohn 6y ago
  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.
  - thangalin 6y ago
    Kroki.io is integrated into the text editor I've been developing: https://github.com/DaveJarvis/keenwrite#screenshots https://github.com/DaveJarvis/keenwrite#screenshots Would configuring it to use a local Kroki install be useful?
- mycall 6y ago
  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.
MayeulC 6y ago
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.
amboo7 6y ago
https://www.mcternan.me.uk/mscgen/ https://www.mcternan.me.uk/mscgen/
- MrCoder 6y ago
  https://app.zenuml.com https://app.zenuml.com
deleted 6y ago
[deleted]
TiredGuy 6y ago
Here's one that I made: https://gitlab.com/andrewfulrich/dagre-svg#readme https://gitlab.com/andrewfulrich/dagre-svg#readme and here's a live editor: https://andrewfulrich.gitlab.io/dagre-svg/editor.html 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.
axiom92 6y ago
On a related note, I did some work on generating temporal graphs from text: https://arxiv.org/pdf/2010.10077.pdf https://arxiv.org/pdf/2010.10077.pdf Code/models: https://github.com/madaan/temporal-graph-gen https://github.com/madaan/temporal-graph-gen
dang 6y ago
Discussed at the time: Online Text to Diagram Tools - https://news.ycombinator.com/item?id=23483922 https://news.ycombinator.com/item?id=23483922 - June 2020 (30 comments)
swyx 6y ago
for those with broader interest in diagramming, just sharing my collection here https://github.com/sw-yx/spark-joy/blob/master/README.md#user-content-diagramming https://github.com/sw-yx/spark-joy/blob/master/README.md#use...
hassancf 6y ago
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.
- anitil 6y ago
  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
faeyanpiraat 6y ago
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)

191 points by smusamashah 6y ago

smusamashah 6y ago

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

AgoRapide 6y ago
Maybe add a small paragraph explaining each of them, and some information about the priority of order?
- benrbray 6y ago
  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.
  - mycall 6y ago
    Some todo list like chart made in each to help compare and contrast.
  - smusamashah 6y ago
    Too much work. Hard to revisit and update if i did that.
- smusamashah 6y ago
  List in this form is easiest to revisit and update. Screenshots and further description is too much work for a list.
chubot 6y ago
Cool! I think it would be useful to have a screenshot next to each tool

prepend 6y ago

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.

chrisweekly 6y ago

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.

fudged71 6y ago

Uh isn't "swimlanes" actually sequence diagrams? I was looking for an actual swimlane diagram tool...

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

marsven_422 6y ago

PlantUML is becoming the standard

arminiusreturns 6y ago

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/ https://pypi.org/project/diagrams/ 2. https://mermaid-js.github.io/mermaid/ https://mermaid-js.github.io/mermaid/ 3. http://blockdiag.com/en/ http://blockdiag.com/en/

ytjohn 6y ago
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.
- thangalin 6y ago
  Kroki.io is integrated into the text editor I've been developing: https://github.com/DaveJarvis/keenwrite#screenshots https://github.com/DaveJarvis/keenwrite#screenshots Would configuring it to use a local Kroki install be useful?
mycall 6y ago
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.

MayeulC 6y ago

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.

amboo7 6y ago

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

MrCoder 6y ago
https://app.zenuml.com https://app.zenuml.com

deleted 6y ago

[deleted]

TiredGuy 6y ago

Here's one that I made: https://gitlab.com/andrewfulrich/dagre-svg#readme https://gitlab.com/andrewfulrich/dagre-svg#readme and here's a live editor: https://andrewfulrich.gitlab.io/dagre-svg/editor.html 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.

axiom92 6y ago

On a related note, I did some work on generating temporal graphs from text: https://arxiv.org/pdf/2010.10077.pdf https://arxiv.org/pdf/2010.10077.pdf Code/models: https://github.com/madaan/temporal-graph-gen https://github.com/madaan/temporal-graph-gen

dang 6y ago

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

swyx 6y ago

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

hassancf 6y ago

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.

anitil 6y ago
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

faeyanpiraat 6y ago

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)