4 ms·

Show HN: Dot-to-ASCII – Graphviz to ASCII Converter

152 points by ggerganov 7y ago

FreeHugs 7y ago
I really would love this if it would use more characters (UTF-8?) to create more beautiful diagrams: Instead of this: + - - - + ' HELLO ' + - - - + Do this: ┌───────┐ │ HELLO │ └───────┘ There are so many characters available for this, that it would be possible to draw totally awesome diagrams in just text: https://www.w3schools.com/charsets/ref_utf_box.asp https://www.w3schools.com/charsets/ref_utf_box.asp
- crooked-v 7y ago
  On this note, Midnight Commander, ZZT, and MegaZeux come to mind for classic apps with UIs constructed entirely from box-drawing characters.
- ggerganov 7y ago
  Here is a very quick "sed" hack to replace vertical and horizontal lines: https://dot-to-ascii.ggerganov.com/staging/ https://dot-to-ascii.ggerganov.com/staging/ Definitely looks better. Might look into fixing the corners and arrows as well before merging in master.
- wrinklytidbits 7y ago
  This is pretty easy to implement: https://github.com/ggerganov/dot-to-ascii/blob/79fd551467457a42f36d164659d784e1c0d9afc0/dot-to-ascii.php#L6 https://github.com/ggerganov/dot-to-ascii/blob/79fd551467457... Just replace `--as_ascii` with `--as=boxart`[1] 1. https://metacpan.org/pod/distribution/Graph-Easy/bin/graph-easy#ARGUMENTS https://metacpan.org/pod/distribution/Graph-Easy/bin/graph-e...
  - ggerganov 7y ago
    Thanks for this comment! I didn't know about the "--as=boxart" option. I just made this the default display, with an option to toggle back to "--as_ascii".
ggerganov 7y ago
This is a basic web service that I put together this afternoon to generate ASCII diagrams from .dot input. Hope it could be useful to someone.
- masklinn 7y ago
  Interesting, why a PHP wrapper to the graph-easy CLI rather than a perl cgi/fcgi/… to the graph-easy library? edit: sending the graph info via GET is a bit risky though, browsers and servers tend to limit URL size so you might get truncation on the bigger graphs (IIRC IE is the biggest issue with ~1k URLs, not sure if pre-chrome Edge is better or the same, then it's mostly webservers which generally have an 8k default limit on the request-line).
  - ggerganov 7y ago
    Yes, that makes more sense. I just used whatever I was more familiar with to get stuff running edit: missed "used"
    - masklinn 7y ago
      fair enough, 'bout what I was thinking. Anyway good job, it certainly maximises usefulness for the complexity. Especially good call on using the codemirror editor, I'd have not thought of it but it makes the thing much nicer to use.
joeraut 7y ago
This is pretty cool! I probably would have never discovered graph-easy if it weren't for this. One thing though, it doesn't handle errors that nicely, e.g. for input "a" it outputs "null". Nitpicking aside, it's neat. Edit: I wonder what sort of heuristics graph-easy is using behind the scenes to decide where to place the clusters, etc., and how it can tell whether a particular input is feasible or not.
lonelappde 7y ago
Past alternatives: https://news.ycombinator.com/item?id=2651745 https://news.ycombinator.com/item?id=2651745
deleted 7y ago
[deleted]
ape4 7y ago
Can you do this on the command line with regular graphviz?
- masklinn 7y ago
  Not with graphviz but it calls to a Perl package called graph-easy which provides a command-line utility. So you could install and use that.
Exuma 7y ago
This is quite awesome. Can you make them shareable?
- jakub_g 7y ago
  It should be relatively straightforward to implement this even without any server-side storage - serialize and urlencode the input to the URL hash and then read the hash on load. Modern browsers support very long URL hashes (~1MB in Firefox based on my test, even longer in Chrome)
- ggerganov 7y ago
  Done! This is the code change: https://github.com/ggerganov/dot-to-ascii/commit/1e5f818bbc3ad67443c1d78a699a4cdb1b1e6ed3 https://github.com/ggerganov/dot-to-ascii/commit/1e5f818bbc3...
  - Exuma 7y ago
    Nice work, thanks!
Kuinox 7y ago
There is some bugs i think: digraph "CK-Build" { subgraph rank_0 { rank=0; "a"; } subgraph rank_1 { rank=1; "b" -> "a"; } } On regular rendering, this does not render a box for the subgraph, plus, a and b are displayed in the same box, at least it should be in separated boxes.
- ggerganov 7y ago
  Yeah, I also noticed that "graph-easy" seems to not handle ranks as expected. Also, the common box is strange
fnord77 7y ago
something went wrong when I changed subgraph cluster 0 to: subgraph cluster_0 { a0 -> a1 -> a2 -> a1; label = "process #1"; }
graphviz 7y ago
Can't some reasonable person refresh our website so we would have more useful content like this? :-) also include Sketchviz https://news.ycombinator.com/item?id=21518152 https://news.ycombinator.com/item?id=21518152 don't include anything from haters though You can fork it on gitlab, https://gitlab.com/graphviz/graphviz.gitlab.io https://gitlab.com/graphviz/graphviz.gitlab.io
matthewhartmans 7y ago
This is super cool! Well done OP!
mamp 7y ago
If you have a Mac then Monodraw is pretty good for editing ASCII diagrams in general: https://monodraw.helftone.com/ https://monodraw.helftone.com/

152 points by ggerganov 7y ago

I really would love this if it would use more characters (UTF-8?) to create more beautiful diagrams: Instead of this: + - - - + ' HELLO ' + - - - + Do this: ┌───────┐ │ HELLO │ └───────┘ There are so many characters available for this, that it would be possible to draw totally awesome diagrams in just text: https://www.w3schools.com/charsets/ref_utf_box.asp https://www.w3schools.com/charsets/ref_utf_box.asp

crooked-v 7y ago
On this note, Midnight Commander, ZZT, and MegaZeux come to mind for classic apps with UIs constructed entirely from box-drawing characters.
ggerganov 7y ago
Here is a very quick "sed" hack to replace vertical and horizontal lines: https://dot-to-ascii.ggerganov.com/staging/ https://dot-to-ascii.ggerganov.com/staging/ Definitely looks better. Might look into fixing the corners and arrows as well before merging in master.
wrinklytidbits 7y ago
This is pretty easy to implement: https://github.com/ggerganov/dot-to-ascii/blob/79fd551467457a42f36d164659d784e1c0d9afc0/dot-to-ascii.php#L6 https://github.com/ggerganov/dot-to-ascii/blob/79fd551467457... Just replace `--as_ascii` with `--as=boxart`[1] 1. https://metacpan.org/pod/distribution/Graph-Easy/bin/graph-easy#ARGUMENTS https://metacpan.org/pod/distribution/Graph-Easy/bin/graph-e...
- ggerganov 7y ago
  Thanks for this comment! I didn't know about the "--as=boxart" option. I just made this the default display, with an option to toggle back to "--as_ascii".

ggerganov 7y ago

This is a basic web service that I put together this afternoon to generate ASCII diagrams from .dot input. Hope it could be useful to someone.

masklinn 7y ago
Interesting, why a PHP wrapper to the graph-easy CLI rather than a perl cgi/fcgi/… to the graph-easy library? edit: sending the graph info via GET is a bit risky though, browsers and servers tend to limit URL size so you might get truncation on the bigger graphs (IIRC IE is the biggest issue with ~1k URLs, not sure if pre-chrome Edge is better or the same, then it's mostly webservers which generally have an 8k default limit on the request-line).
- ggerganov 7y ago
  Yes, that makes more sense. I just used whatever I was more familiar with to get stuff running edit: missed "used"
  - masklinn 7y ago
    fair enough, 'bout what I was thinking. Anyway good job, it certainly maximises usefulness for the complexity. Especially good call on using the codemirror editor, I'd have not thought of it but it makes the thing much nicer to use.

joeraut 7y ago

This is pretty cool! I probably would have never discovered graph-easy if it weren't for this. One thing though, it doesn't handle errors that nicely, e.g. for input "a" it outputs "null". Nitpicking aside, it's neat. Edit: I wonder what sort of heuristics graph-easy is using behind the scenes to decide where to place the clusters, etc., and how it can tell whether a particular input is feasible or not.

lonelappde 7y ago

Past alternatives: https://news.ycombinator.com/item?id=2651745 https://news.ycombinator.com/item?id=2651745

deleted 7y ago

[deleted]

ape4 7y ago

Can you do this on the command line with regular graphviz?

masklinn 7y ago
Not with graphviz but it calls to a Perl package called graph-easy which provides a command-line utility. So you could install and use that.

Exuma 7y ago

This is quite awesome. Can you make them shareable?

jakub_g 7y ago
It should be relatively straightforward to implement this even without any server-side storage - serialize and urlencode the input to the URL hash and then read the hash on load. Modern browsers support very long URL hashes (~1MB in Firefox based on my test, even longer in Chrome)
ggerganov 7y ago
Done! This is the code change: https://github.com/ggerganov/dot-to-ascii/commit/1e5f818bbc3ad67443c1d78a699a4cdb1b1e6ed3 https://github.com/ggerganov/dot-to-ascii/commit/1e5f818bbc3...
- Exuma 7y ago
  Nice work, thanks!

Kuinox 7y ago

There is some bugs i think: digraph "CK-Build" { subgraph rank_0 { rank=0; "a"; } subgraph rank_1 { rank=1; "b" -> "a"; } } On regular rendering, this does not render a box for the subgraph, plus, a and b are displayed in the same box, at least it should be in separated boxes.

ggerganov 7y ago
Yeah, I also noticed that "graph-easy" seems to not handle ranks as expected. Also, the common box is strange

fnord77 7y ago

something went wrong when I changed subgraph cluster 0 to: subgraph cluster_0 { a0 -> a1 -> a2 -> a1; label = "process #1"; }

graphviz 7y ago

Can't some reasonable person refresh our website so we would have more useful content like this? :-) also include Sketchviz https://news.ycombinator.com/item?id=21518152 https://news.ycombinator.com/item?id=21518152 don't include anything from haters though You can fork it on gitlab, https://gitlab.com/graphviz/graphviz.gitlab.io https://gitlab.com/graphviz/graphviz.gitlab.io

matthewhartmans 7y ago

This is super cool! Well done OP!

mamp 7y ago

If you have a Mac then Monodraw is pretty good for editing ASCII diagrams in general: https://monodraw.helftone.com/ https://monodraw.helftone.com/