Svgbob – Create a graphical representation of text diagrams

by pabs3 • 5 years ago

249 33 5 years ago

maartenh2• 5 years ago

Bonus points for the name! Happy little diagrams.

I do think that creating and updating these kind of diagrams would be quite tedious. I'd take a DSL (PlantUML, Graphviz, Structurizr) over graphical tools though. At $JOB we also use Miro at the moment, and that tool has a way to see changes since your last visit. I'd much rather be able to approve a change in a diagram via a pull request review.

That makes me wonder, do any of you know about content management systems that are GUI based, but are able to have a pull-request like workflow?

faeyanpiraat3• 5 years ago

would a graphical highlight of the changes on the images help?

maartenh2• 5 years ago

Given the type of operations one could do such as moving, changing and deleting pieces, that might be quite tricky.

With text, it might be relatively easy to compare the final states. In case of free-form graphics, that could be a lot harder!

eurasiantiger• 5 years ago

DSL all the way for this. Imagine refactoring ASCII art.

alpaca128• 5 years ago

Neat. I like how it more or less directly translates the input instead of trying to guess shapes. That's definitely the better approach for real scenarios.

Not sure why it concatenates some of the words in the demo, but it's pointless for normal text, so probably not important.

esens• 5 years ago

Very neat and well done.

I wonder how hard it would be to make one that takes hand drawn input and converts it to professional like charts. Basically pick the symbol output style and it converts your hand drawn charts to this.

quenix• 5 years ago

This is neat. I expected something which had a predefined dictionary of ASCII shapes along with manual SVG translations... but this tool is dynamic. It really does create the shapes as you draw them.

Super cool!

Daemon404• 5 years ago

The demo seems to never load for me on Android Chrome? It sits with an off-center spinner forever.

ivanceras3• 5 years ago

This is some weird bug. I tested it in chrome for android and it doesn't load successfully, but using firefox for android works fine. In the desktop both firefox and chrome works properly. It seems chrome is not consistent in their implementation on other platforms.

degenerate• 5 years ago

I'm way more impressed by some of those ASCII charts than I am of the SVG conversion. The one that looks like a temperature scale from 2011-2016 is super cool.

keehun• 5 years ago

Check out monodraw[1] which could help you create charts like these! (I'm not affiliated with monodraw in any way.)

[1] https://monodraw.helftone.com/

Abishek_Muthian• 5 years ago

Very cool, Anything similar for Linux?

alexaholic• 5 years ago

I don't need it, but I like it

synergy202• 5 years ago

Nice, I'm too more impressed by the txt format of graphs.

Is there a tool to convert SVG back to text graph? That would help text-based file as document a lot.

ramboldio• 5 years ago

If there would be the conversion in two direction, this would be super helpful to for code comments incl. a graphic editor inside the IDE.

synergy202• 5 years ago

https://asciiflow.com/ can draw ascii arts, pretty handy and enough for most use cases for me.

diplodocusaur• 5 years ago

an imperfect answer: SVG -> JPEG -> https://github.com/cslarsen/jp2a (ignoring the S in SVG but scalable ascii art could be interesting)

m000• 5 years ago

Convert your ascii pinup collection to scalable vectors to print and decorate your room!

cgufus• 5 years ago

Has anyone tried to pipe ascii star wars through it?

tut-urut-utut• 5 years ago

Something I wanted to check too, but too lazy to do it.

Actually, I was to lazy to even ask here, so thanks for asking.

Let's hope someone even lazier can just upvote without replying.

mbar84• 5 years ago

https://mbarkhau.keybase.pub/asciigrid/

neolefty• 5 years ago

And http://ditaa.sourceforge.net/

marcuskaz• 5 years ago

Very cool! I have a simple terminal graph tool that I can pipe the ascii graphs into svgbob and it converts pretty well to an svg graphic.

Termgraph: https://github.com/mkaz/termgraph

ok123456• 5 years ago

Let this loose on some 80s BBS textfiles.

thangalin• 5 years ago

Kroki can render Svgbob along with numerous other text-based diagram formats, including Graphviz:

https://kroki.io/

KeenWrite[0], my text editor, renders changes to text diagrams in quasi-real-time by calling out to Kroki. Meaning, you can embed Svgbob in Markdown documents using:

    ``` diagram-svgbob
    // diagram text
    ```

[0]: https://github.com/DaveJarvis/keenwrite/blob/master/docs/scr...

faeyanpiraat3• 5 years ago

kroki is nice, never knew about the gantt chart dsl

anigbrowl• 5 years ago

Really gorgeous: never having to look at another ASCII diagram makes my day. I'm often surprised that SCG isn't more ubiquitous, as it's objectively better than raster graphics for so many things.

dang• 5 years ago

Some past threads:

Svgbob – convert ASCII diagrams to SVG, now with styling support - https://news.ycombinator.com/item?id=22325720 - Feb 2020 (33 comments)

Svgbob: Convert your ASCII diagram scribbles into happy little SVG - https://news.ycombinator.com/item?id=19857349 - May 2019 (35 comments)

Convert ASCII scribbles to SVG - https://news.ycombinator.com/item?id=14422777 - May 2017 (13 comments)

Minor49er• 5 years ago

This is really interesting to play around with. There are some heuristics that are being used that seemed odd to me until I remembered that this is supposed to be for diagramming, not necessarily for ASCII art.

For instance, this draws an obtuse angle and a right angle that are not connected to each other:

  _/|__

This simply adds height to the right angle, but does not connect them:

    .   
  _/|__

But this connects both angles together with a sharp point:

    +   
  _/|__

Also, a bit of a nitpick: while I love the amount of examples, I wish they were sectioned off rather than having all of the unformatted text in a single textarea on the left and all rendered images on the right. Trying to scroll the page, I keep scrolling the textarea instead, which breaks the alignment.

Overall, super cool project. I'm looking forward to trying this in real world scenarios soon

ivanceras3• 5 years ago

It is because `+` is programmed to have a strong signal to a character than can connect to it from any of the 8 direction, while `.` is only programmed to have a strong signal only to 4 directions (top, left, right, bottom)

mk12• 5 years ago

This tool is great. I used it for diagrams[1][2] in my SICP project after trying lots of alternatives. It was the only one that allowed me to reach my goal of having pristine source that stands on its own, but also renders to a nice web page. I also use svgo and do some custom post-processing[3] to simplify the output.

[1] https://mk12.github.io/sicp/text/2/2.html#2.2.1 (generated from https://github.com/mk12/sicp/blob/master/notes/text.md#221-r...)

[2] https://mk12.github.io/sicp/exercise/2/2.html#ex2.42 (generated from https://github.com/mk12/sicp/blob/master/src/sicp/chapter-2....)

[3] https://github.com/mk12/sicp/blob/master/notes/pandoc/render...

ivanceras3• 5 years ago

Author of svgbob here, I'm happy to answer any question.

Svgbob – Create a graphical representation of text diagrams

Related Stories