
Svgbob: Convert your ASCII diagram scribbles into happy little SVG - galacticdessert
https://github.com/ivanceras/svgbob
======
galacticdessert
This is so good. It makes making documentation with diagrams a less painful
process. I would love to see some integration with asciidoctor.

~~~
ivanceras
I'm glad you like it.

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

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

------
nathell
In the same vein: [http://ditaa.sourceforge.net](http://ditaa.sourceforge.net)

------
cben
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...](https://casual-
effects.com/markdeep/features.md.html#basicformatting/diagrams)

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

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

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

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

~~~
ChanderG
Have you tried [http://plantuml.com/](http://plantuml.com/)? Built on top of
"graphviz".

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

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

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

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

~~~
ivanceras
[https://ivanceras.github.io/spongedown/](https://ivanceras.github.io/spongedown/)
I haven't revisited these projects for awhile now.

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

~~~
CameronNemo
Why not just SVG as the interchange format?

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

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

~~~
zapzupnz
Indeed.

------
lifthrasiir
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 ;-)

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

------
sehugg
I've been using this PHP project for diagrams in my books:
[https://github.com/dhobsd/asciitosvg](https://github.com/dhobsd/asciitosvg)

------
bullen
This kind of tool should be integrated in every browser!

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

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

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

------
harrygeez
wow this is legitly cool

