Hacker News new | past | comments | ask | show | jobs | submit login
Kroki – Convert plain text diagrams to images (kroki.io)
183 points by type0 on March 25, 2019 | hide | past | favorite | 27 comments



This tool seems to unify a bunch of text-to-diagram tools into one, which is a great idea. It's funny to see them all united, since I recently went on a binge trying out all those text-to-diagram tools for a project. My use case: writing articles on DSP including block diagrams [1].

I wanted to write the articles in Markdown and include the diagrams in there, so text-to-diagram tools seemed ideal. Turns out most of them give ridiculous layouts as soon as you have loops, with limited options to correct this. Other are based on ASCII art, so you control the overall layout, but the result usually has massive, awkward padding between everything. And then there's the holy grail, LaTeX with TikZ/PSTricks, which can give perfect results, but the time investment was a little discouraging. Result: I ended up making the diagrams with a good old SVG editor.

[1]: https://www.osar.fr/notes/waveguides/


Thanks so much for your comment. I've just read (and played around with) your waveguide synthesis article, which led me down the rabbit hole of Sporth, ChucK, Soundpipe and now I find myself really excited looking over the contents of the "Physical Audio Signal Processing" book. I am going to learn a lot of new stuff today, thanks!


That's great to hear and exactly why the article exists. I'd say the DAFX papers are the best rabbit hole in this field: http://ant-s4.unibw-hamburg.de/dafx/paper-archive/search.php...

(And this is not entirely derailing the thread, since many of these papers are full of block diagrams, and a tool to generate nice DSP diagrams from text would be pretty useful)


I can tear through backs of napkin, but typing a diagram usually stalls me out, even though I'm pretty fast on a keyboard and the specifications seem pretty simple.

Is it just my lack of practice, or is diagramming on a keyboard always awkward and slow? Or... do people generally surpass their freehand speed with enough practice, like with typing?

If not, is the ideal solution here a digital pen or wacom tablet with diagram detection / normalization software? Scanned napkins to mechanical turk? Something else?

Note: No disrespect though, the link is an amazing project for those that must type charts.


I think you meant this as a top level comment, not a reply to mine. But yes, nothing beats a napkin in terms of speed.


> Turns out most of them give ridiculous layouts as soon as you have loops

Could you share an example? GraphViz should handle loops easily.


Once again, my use case is DSP block diagrams. I guess "ridiculous" is a bit strong, but the results certainly didn't look like what you generally find in this context. You can look at the diagrams in the link I gave for an idea of the kind of layout I was trying to achieve.


Yeah when you have requirements around layout graphviz gets a bit hairy. It's still doable with rank directives and invisible nodes, but that's the point where I start to think if I shouldn't do it another way (e.g. in this case I'd probably have done an ascii diagram rendered).

    digraph G {
      rankdir=LR
      node [shape=rectangle]

      // nodes declared in order of horizontal position ("rank")
      exciter
      filter

      subgraph H {
        // nodes at the same horizontal rank
        rank=same
        plus [label="+"]
        // invisible node for layout purposes
        p1 [width=0, height=0, margin=0, label=""]
      }
      subgraph I {
        rank=same
        delay
        nl
      }
      subgraph J {
        rank=same
        filter_ [label="filter"]
        p2 [width=0, height=0, margin=0, label=""]
      }

      out

      exciter -> filter -> plus -> delay -> filter_ -> out
      filter_ -> p2 [arrowhead=none]
      p2 -> nl -> p1 [arrowhead=none]
      p1 -> plus  
    }
Here's the result: http://prntscr.com/n35czl


Nice! Thanks for sharing your graphviz-fu, that's actually not as hairy as I thought it would be, and the result is neat enough. I do remember playing with subgraphs and ranks when testing graphviz, but I gave up before getting this far. I'll try applying those techniques to more complex diagrams, and if I find it workable, I might just switch to that.


This is neat! I might actually be using this soon.

On a related note, CS professor John Regehr recently collected a bunch of ASCII-art diagrams from various source code into a blog post [0]. (The relation is that I had initially thought Kroki would be for things like this due to a faulty assumption of what the title meant by "plain text diagrams".)

[0] https://blog.regehr.org/archives/1653


Thanks for sharing this blog post. Svgbob is doing a pretty good job at converting those diagrams:

https://demo.kroki.io/svgbob/svg/eNrFlEtvgkAQx-_9FBNPGqJiHxc...


Oh wow, that's super cool! I'll have to tell John about that! I know he posted a follow-up tweet where he was playing with converting them using another tool, I think [0]. Neat stuff for sure.

[0] http://buttersquid.ink


This is a cool service, congratulations for shipping!

Reading through the docs I stumbled upon "All the code is available on GitHub and our goal is to provide Kroki as a free service.". There has been definitely a good amount of work spent to build it, and there will be ongoing maintenance and infrastructure costs. Maybe I'm too naive, but how does the Kroki team plan to make the product financially sustainable?


From their install page : "Kroki is available as a Self-Managed instance. We are also actively looking for sponsors to provide Kroki as a free service."




This looks really neat! This integrated with something like https://hackmd.io/ would be really great for technical writing . It could also be great for auto-generating docs or the like, so it's great to have this be standalone.


This looks awesome, essentially like pandoc for diagrams. Looking forward to checking it out!


You could create images from graphviz for quite long time. http://www.webgraphviz.com/


That's true but Kroki is not limited to GraphViz. We support more than a dozen diagram libraries: https://kroki.io/#support


Maybe you also want to try Edotor:

https://edotor.net

Disclaimer: I'm the author.


Are they easily embeddable, eg, on GitHub?


relatively... you can make a base64 encoding of the graph and have a png link like https://demo.kroki.io/graphviz/png/eNpLyUwvSizIUHBXqPZIzcnJ1...


Integration into Jupyter would be awesome.


Asciidoc plugin? Like PlantUML?


It's planned! I'm the lead developer of Asciidoctor.js so it's definitely one of my goal to make Kroki available as an Asciidoctor extension :)


Wow!! Great tool for product managers as well.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: