Svgbob: Convert your ASCII diagram scribbles into happy little SVG | Hacker News Reader

Svgbob: Convert your ASCII diagram scribbles into happy little SVG

github.com

This is so good. It makes making documentation with diagrams a less painful process. I would love to see some integration with asciidoctor.

I'm glad you like it.

I used to make most of my notes in plain-text. Horribly inefficient, but I love ASCII games so drawing all my diagrams in it was fun to me. Just ran some of them through this software and, beside a few formatting errors, they look amazing! This is unbelievably useful.

Just leaving a happy little comment to say how much I appreciate the Bob Ross reference :-)

In the same vein: http://ditaa.sourceforge.net

I like it for creating a fast little part of an SVG that I will use in something else. You use the right graphical primitives for things, I hate when a circle is drawn out as a couple arcs cause then I have to fix it by hand anyway. I love that you output lines and so forth, everyone always just goes ahead and makes thousands of little paths that I then have to figure out what it actually is.

Things I would like to have improved - indent markup when I download svg. If it's a small SVG it isn't a problem but when I looked at the example it was hard to read.

I would also like if the output SVG was rendered left to right top to bottom, right now it can difficult to find where something was actually drawn at. However as I said I would probably use it to draw little things that I would put together later, so when I say I would like it - well it probably doesn't apply to my usecase anyway.

on edit: when I say rendered left to right I mean written out left to right, just in case there was any confusion.

This looks pretty neat, but the random-looking spacing between works is pretty weird. If you want to preserve the approximate text layout with respect to the diagrams, why not at least use a fixed-width font? The Q&A complains that it makes it look like it was made "for devs", but the random spacing just looks bizarre and, quite frankly, awful.

I've been looking for something kind of like this for process or flow charts, but automatically places the blocks/nodes, yet allows "hints" to nudge things as needed. Example syntax:

  Title:    // chart page title
    Flow-chart Shorthand Rough Draft 

  Decision:
    Too big a project?
    @Yes #label02  // arrow to #label02
    @No #label01

  #label01

  Process:
    Make lemonade
    $options: no-point, foo   // no arrow-head, etc.

  Process: 
    Sell lemonade
    $linetext: This is text near line coming to this process
    $hint: north-east   // positioning hint

  #label02

  Terminator:
     End

Perhaps the hints could have an optional strength parameter: "$hint: north-east 60%". If you invent an implementation, I'll give you lots of Ycombinator points. I once used a tool called "graphviz" to kind of do this.

Mermaid is a start; not sure if it does the hinting you want.

https://mermaidjs.github.io

Have you tried http://plantuml.com/? Built on top of "graphviz".

Does anything exist that would allow me to make LibreOffice Draw diagrams without fiddling with the mouse for hours? (And without drawing ascii boxes, please.) I.e. Mermaid, but with output to the Draw format.

I need to make a diagram for someone else, but the process of laying it out is annoying.

pic comes to (my) mind: http://doc.cat-v.org/unix/v10/10thEdMan/pic.pdf

Looks like that's from the time of StarOffice 1.0, when I myself was but a wee lad, and before StarDraw. So not sure if there's any way to connect one to the other, and with the perfectly ungoogleable name the knowledge will probably never be mine.

If you're familiar with GraphViz (I'm not familiar with MermaidJS, but the syntax of the graphs themselves look kinda-sorta the same) then you should be able to convert a text DOT file to SVG using GraphViz then edit the SVG in LibreOffice.

I wouldn't want to do a ton of edits in LibreOffice because the generated SVG isn't the cleanest. I think it should do the job if your focus is on defining nodes and edges of a graph and don't want a specific layout at the end.

The output is targeted for printing and then possibly further editing in the future, so I think SVG in LO will be unstable for that—that's why I'd prefer the native format. But guess I could try.

I'd love to use this in Markdown embedded API docs in code, for generating HTML+SVG API manuals.

https://ivanceras.github.io/spongedown/ I haven't revisited these projects for awhile now.

Very nice! Reminds me of Markdeep diagrams [1]. The examples are almost identical, so I'm curious if one of them should give credit to the other? Or was there a shared ancestor?

Either way, the core insight that it's OK to map the the monospace grid 1:1 to diagram coordinates was IMHO a breakthrough in text->diagram conversion that previous tools like ditaa missed by trying too hard to parse "semantic structure". (After that it's 99% perspiration of course.)

The editor is pretty great.

[1] https://casual-effects.com/markdeep/features.md.html#basicfo...

Found another similar tool, also preserves the grid & uses monospace text — aafigure: https://github.com/aafigure/aafigure/blob/master/documentati... -> https://aafigure.readthedocs.io/en/latest/examples.html

I've been using this PHP project for diagrams in my books: https://github.com/dhobsd/asciitosvg

I don't think I'd be totally sold on actually making diagrams this way than with, say, Dia or draw.io, but I'm now wondering if there could be converters from those programs' native formats to the ASCII format described for Svgbob with a view to using it as an interchange format that can also be quickly converted/previewed using the actual Svgbob converter. That would be spiffy.

Why not just SVG as the interchange format?

I tend to think of interchange formats as human-readable and free of styling. SVG is definitely human-readable but it's harder to visualise than a well-formatted ASCII diagram, plus SVG marries content and style (text is styled by CSS, for example). The diagram aspect of an ASCII diagram is, I would say, structure, not styling, and so remains suitable for use as a basic interchange.

SVG is great as an interchange for image editing, but I'm not sure that's necessarily what is best suited to basic diagramming. I'm sort of thinking like a diagram equivalent of Markdown.

IMO, SVG is less editable than ASCII diagram when you're in the console

Indeed.

Unfortunately, the world is stuck on CLIs that provide us only with ascii text, although some provide Unicode.

It's 2019, and we're still dealing with side effects of ascii art, a throwback from the 1970s.

ASCII art, Unicode art, it doesn't matter what encoding you use, the result will look the same. Sometimes it's useful to represent things in text — are you going to tell us that if I should want to make a simple diagram in my code's comments, I should embed a large PNG file into a text file in order to achieve it?

Doesn't markdown do this currently? Not by embedding, but by referencing an existing image?

This would be doable. Please contact me if you want me to get this build for your needs

It seems that it has improved very much since I've first seen the demo, but it still takes up to ten seconds to render changes. I guess that's simply because the demo page is huge, but that negates the purpose of the demo; it would be great to have a partial rendering mode if feasible ;-)

Jesus christ, the amount of work that must have gone into making this is astonishing. Well done!

This kind of tool should be integrated in every browser!

Would make page like this look so much better: http://root.rupy.se

Maybe integrating it into a terminal first would make more sense ;-)

That’d be very cool. As much as I dislike Electron, something like Hyper already can render SVGs.

wow this is legitly cool

Reply on news.ycombinator.com