Svgbob – Create a graphical representation of text diagrams | Hacker News Reader

Svgbob – Create a graphical representation of text diagrams

github.com

249 pointspabs334 comments

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.

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/

Very cool, Anything similar for Linux?

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?

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

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!

you can diff images just like text.

place them over eachother and compare pixels.

Example: https://imgur.com/a/s3LF3cM

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

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...

kroki is nice, never knew about the gantt chart dsl

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!

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.

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.

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

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

Has anyone tried to pipe ascii star wars through it?

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.

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...

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)

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

And http://ditaa.sourceforge.net/

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

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)

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

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.

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.

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

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.

I don't need it, but I like it

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

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.

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

Let this loose on some 80s BBS textfiles.

Reply on news.ycombinator.com