TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Svgbob: Convert your ASCII diagram scribbles into happy little SVG

213 pointsby galacticdessertabout 6 years ago

16 comments

galacticdessertabout 6 years ago
This is so good. It makes making documentation with diagrams a less painful process. I would love to see some integration with asciidoctor.
评论 #19862875 未加载
Aromasinabout 6 years ago
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.
DavidPiperabout 6 years ago
Just leaving a happy little comment to say how much I appreciate the Bob Ross reference :-)
nathellabout 6 years ago
In the same vein: <a href="http:&#x2F;&#x2F;ditaa.sourceforge.net" rel="nofollow">http:&#x2F;&#x2F;ditaa.sourceforge.net</a>
bryanrasmussenabout 6 years ago
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.<p>Things I would like to have improved - indent markup when I download svg. If it&#x27;s a small SVG it isn&#x27;t a problem but when I looked at the example it was hard to read.<p>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&#x27;t apply to my usecase anyway.<p>on edit: when I say rendered left to right I mean written out left to right, just in case there was any confusion.
eridiusabout 6 years ago
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&amp;A complains that it makes it look like it was made &quot;for devs&quot;, but the random spacing just looks bizarre and, quite frankly, awful.
tabtababout 6 years ago
I&#x27;ve been looking for something kind of like this for process or flow charts, but automatically places the blocks&#x2F;nodes, yet allows &quot;hints&quot; to nudge things as needed. Example syntax:<p><pre><code> Title: &#x2F;&#x2F; chart page title Flow-chart Shorthand Rough Draft Decision: Too big a project? @Yes #label02 &#x2F;&#x2F; arrow to #label02 @No #label01 #label01 Process: Make lemonade $options: no-point, foo &#x2F;&#x2F; no arrow-head, etc. Process: Sell lemonade $linetext: This is text near line coming to this process $hint: north-east &#x2F;&#x2F; positioning hint #label02 Terminator: End </code></pre> Perhaps the hints could have an optional strength parameter: &quot;$hint: north-east 60%&quot;. If you invent an implementation, I&#x27;ll give you lots of Ycombinator points. I once used a tool called &quot;graphviz&quot; to kind of do this.
评论 #19865320 未加载
评论 #19864408 未加载
评论 #19864842 未加载
aasasdabout 6 years ago
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.<p>I need to make a diagram for someone else, but the process of laying it out is annoying.
评论 #19867643 未加载
评论 #19866711 未加载
neilvabout 6 years ago
I&#x27;d love to use this in Markdown embedded API docs in code, for generating HTML+SVG API manuals.
评论 #19862868 未加载
cbenabout 6 years ago
Very nice! Reminds me of Markdeep diagrams [1]. The examples are almost identical, so I&#x27;m curious if one of them should give credit to the other? Or was there a shared ancestor?<p>Either way, the core insight that it&#x27;s OK to map the the monospace grid 1:1 to diagram coordinates was IMHO a breakthrough in text-&gt;diagram conversion that previous tools like ditaa missed by trying too hard to parse &quot;semantic structure&quot;. (After that it&#x27;s 99% perspiration of course.)<p>The editor is pretty great.<p>[1] <a href="https:&#x2F;&#x2F;casual-effects.com&#x2F;markdeep&#x2F;features.md.html#basicformatting&#x2F;diagrams" rel="nofollow">https:&#x2F;&#x2F;casual-effects.com&#x2F;markdeep&#x2F;features.md.html#basicfo...</a>
评论 #19927185 未加载
sehuggabout 6 years ago
I&#x27;ve been using this PHP project for diagrams in my books: <a href="https:&#x2F;&#x2F;github.com&#x2F;dhobsd&#x2F;asciitosvg" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dhobsd&#x2F;asciitosvg</a>
zapzupnzabout 6 years ago
I don&#x27;t think I&#x27;d be totally sold on actually making diagrams this way than with, say, Dia or draw.io, but I&#x27;m now wondering if there could be converters from those programs&#x27; 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&#x2F;previewed using the actual Svgbob converter. That would be spiffy.
评论 #19865278 未加载
评论 #19863830 未加载
lifthrasiirabout 6 years ago
It seems that it has improved very much since I&#x27;ve first seen the demo, but it still takes up to ten seconds to render changes. I guess that&#x27;s simply because the demo page <i>is</i> huge, but that negates the purpose of the demo; it would be great to have a partial rendering mode if feasible ;-)
lbjabout 6 years ago
Jesus christ, the amount of work that must have gone into making this is astonishing. Well done!
bullenabout 6 years ago
This kind of tool should be integrated in every browser!<p>Would make page like this look so much better: <a href="http:&#x2F;&#x2F;root.rupy.se" rel="nofollow">http:&#x2F;&#x2F;root.rupy.se</a>
评论 #19867099 未加载
harrygeezabout 6 years ago
wow this is legitly cool