5 ms·
Kroki – Convert plain text diagrams to images
- pierrec 8y agoThis 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/ https://www.osar.fr/notes/waveguides/
- _sh 8y agoThanks 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!
- pierrec 8y agoThat'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?q= 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)
- brownbat 8y agoI 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.
- pierrec 8y agoI think you meant this as a top level comment, not a reply to mine. But yes, nothing beats a napkin in terms of speed.
- dvfjsdhgfv 8y ago> Turns out most of them give ridiculous layouts as soon as you have loops Could you share an example? GraphViz should handle loops easily.
- pierrec 8y agoOnce 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.
- andreareina 8y agoYeah 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 http://prntscr.com/n35czl
- pierrec 8y agoNice! 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.
- pacala 8y agoThis 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?
- indogooner 8y agoFrom 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."
- selfselfself 8y agoWow!! Great tool for product managers as well.
- etaioinshrdlu 8y agoAre they easily embeddable, eg, on GitHub?
- jacobmischka 8y agoThis looks awesome, essentially like pandoc for diagrams. Looking forward to checking it out!
- deleted 8y ago[deleted]
- DonaldPShimoda 8y agoThis 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 https://blog.regehr.org/archives/1653
- mogztter 8y agoThanks for sharing this blog post. Svgbob is doing a pretty good job at converting those diagrams: https://demo.kroki.io/svgbob/svg/eNrFlEtvgkAQx-_9FBNPGqJiHxcPJsX0QOIjUeql6WGFtW4LLGGXJjZ8-O6uKEIQ1IqdAwkw89_fPHYA2jXaHRwxaxNgMP0VDT3ECfXBcKn9BU3LNFowQhsacRhSn3HkcyZUaoU8Srm3xnT5iW3-9g5NLsmJIIelRG419j6zxVil1bRdxJjyaTWqtYV1K35nRLSiHLRsRM5HywjEqgGmAQElPsdh-jHjc-gR10AAILrLI5b7mHlNPeohcLH_wddlBCuCXUe_IoEoax9A7-8OU_NUGDFIgDqdTgJ0zRr0FAGLAhwm8-qwbcQgVwNVgkm7d22Ce0lAvMDFHha3HHhIxFMRnHDMgcuDFEJhiDaAt2JqeM8Xeky6QqxnY_Qy75pjK4k7U-hJCrEA2wS55Ac7oMNlQulQ7qfgIqGFGrhvEvIIueBhvqYKSis4saStcTVaXHSVDlepOZlbs9ehZU4ncp96yF4TH4NNHZxbl2UglbtyISZW5JxLWY5xjrB0T5yCULorS-w0glMESnfl7QjSbXo7gl3cQCnJIdLhLAL4K0E-l91t-C8CWYOibX0JwS_DGMg0 https://demo.kroki.io/svgbob/svg/eNrFlEtvgkAQx-_9FBNPGqJiHxc...
- DonaldPShimoda 8y agoOh 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 http://buttersquid.ink
- nathell 8y agoRelated: http://ditaa.sourceforge.net/ http://ditaa.sourceforge.net/
- millette 8y agoAlso: https://github.com/knsv/mermaid https://github.com/knsv/mermaid
- NightMKoder 8y agoThis looks really neat! This integrated with something like https://hackmd.io/ 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.
- edoceo 8y agoAsciidoc plugin? Like PlantUML?
- mogztter 8y agoIt'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 :)
- finchisko 8y agoYou could create images from graphviz for quite long time. http://www.webgraphviz.com/ http://www.webgraphviz.com/