ggerganov / dot-to-ascii

Graphviz to ASCII converter using Graph::Easy

dot-to-ascii

Try it here: https://dot-to-ascii.ggerganov.com

How it works?

• The index.html page sends XHR requests containing your Graphviz input to the dot-to-ascii.php script
• The dot-to-ascii.php script runs the Graph::Easy command line tool to produce a text diagram from the provided Graphviz input
• The result is returned back to index.html where it is displayed in a <pre> tag

API

Dot-to-ascii can be easily used in your code by performing https requests to the api.

Python

import requests


def dot_to_ascii(dot: str, fancy: bool = True):

    url = 'https://dot-to-ascii.ggerganov.com/dot-to-ascii.php'
    boxart = 0

    # use nice box drawing char instead of + , | , -
    if fancy:
        boxart = 1

    params = {
        'boxart': boxart,
        'src': dot,
    }

    response = requests.get(url, params=params).text

    if response == '':
        raise SyntaxError('DOT string is not formatted correctly')

    return response

graph_dot = '''
    graph {
        rankdir=LR
        0 -- {1 2}
        1 -- {2}
        2 -- {0 1 3}
        3
    }
'''

graph_ascii = dot_to_ascii(graph_dot)

print(graph_ascii)

                 ┌─────────┐
                 │         │
     ┌───┐     ┌───┐     ┌───┐     ┌───┐
  ┌─ │ 0 │ ─── │ 1 │ ─── │   │ ─── │ 3 │
  │  └───┘     └───┘     │   │     └───┘
  │    │                 │   │
  │    └──────────────── │ 2 │
  │                      │   │
  │                      │   │
  └───────────────────── │   │
                         └───┘

Run locally with docker

This uses the minimal Dockerfile with the default apache config etc. Not suitable for production use.

$ docker build -t dot-to-ascii .
$ docker run --rm -d --name dot-to-ascii -p 8080:80 dot-to-ascii
$ # open localhost:8080 in your browser

dot-to-ascii's Issues

License

I plan to use dot-to-ascii service to collect human annotations on the ASCII graphs generated by Graph::Easy, and for simplicity, I would use your useful wrapper. I made the ASCII graphs "interactive" with dropdowns and boxes so that annotations can be provided by users and a backend can store them. I want to ask for your permission to use dot-to-ascii web service and learn if there is any license associated with using your wrapper service?

There are fancier graph approaches such as cytoscape to render interactive graphs, but for very simple use cases such as for researchers who are evaluating graphs automatically generated by their model, the ascii annotation experience is ok and has no overhead.

Command-line execution? (enhancement request? doc?)

This tool looks better than graph-easy but I don't wish to use a browser interface. Is there a way to run this as follows?

dot2ascii input.dot > output.txt

If it gets introduced, I will probably start using it instead of graph-easy.

Record shaped nodes rendering

Hi, I wasn't able to render record shaped nodes. Is it possible to render something like that?

digraph structs {
	node[shape=record]
	struct1 [label="<f0> left|<f1> mid\ dle|<f2> right"]
	struct2 [label="{<f0> one|<f1> two\n\n\n}" shape=Mrecord]
	struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"]
	struct1:f1 -> struct2:f0
	struct1:f0 -> struct3
}

Fix CSS

CSS is too hard ... how do I fix those?

graph won't render

Digraph contents given below. Seems to be a parsing issue, I can get parts of the graph to render by moving contents within [] to single lines, for eg.

digraph g {
	graph [bb="0,0,479.33,684"];
	node [label="\N"];
	_9	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="Jinja2-2.10.3[1]",
		pos="385.92,450",
		style=filled,
		width=1.3245];
	_17	 [fillcolor="#F6F6F6",
		fontsize=10,
		height=0.5,
		label="MarkupSafe-0.23+",
		pos="385.92,378",
		style="filled,dashed",
		width=1.5207];
	_9 -> _17	 [arrowsize=0.5,
		pos="e,385.92,396.1 385.92,431.7 385.92,422.46 385.92,410.98 385.92,401.11"];
	_16	 [fillcolor="#F6F6F6",
		fontsize=10,
		height=0.5,
		label="python-3.7",
		pos="214.92,234",
		style="filled,dashed",
		width=1.0138];
	_9 -> _16	 [arrowsize=0.5,
		pos="e,228.73,250.76 364.13,433.93 350.92,424.12 334.29,410.48 321.92,396 285.68,353.58 289.81,333.79 257.92,288 249.98,276.6 240.3,264.52 \
232.13,254.78"];
	_8	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="MarkupSafe-1.1.1[1]",
		pos="385.92,306",
		style=filled,
		width=1.6515];
	_8 -> _16	 [arrowsize=0.5,
		pos="e,242.16,246.15 352.14,291.17 321.56,278.65 276.84,260.35 246.85,248.07"];
	_15	 [fillcolor="#F6F6F6",
		fontsize=10,
		height=0.5,
		label="arch-x86_64",
		pos="309.92,234",
		style="filled,dashed",
		width=1.1119];
	_8 -> _15	 [arrowsize=0.5,
		pos="e,326.67,250.43 368.3,288.76 357.03,278.39 342.37,264.88 330.56,254.01"];
	_14	 [fillcolor="#F6F6F6",
		fontsize=10,
		height=0.5,
		label="platform-linux",
		pos="354.92,90",
		style="filled,dashed",
		width=1.2427];
	_8 -> _14	 [arrowsize=0.5,
		pos="e,386.31,103.01 424.64,292.32 443.36,284.01 464.08,271.07 474.92,252 482.83,238.09 477.97,231.71 474.92,216 468.36,182.13 468.49,\
170.09 445.92,144 431.15,126.92 409.44,113.98 390.94,105.17"];
	_7	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="python-3.7.4[0]",
		pos="237.92,162",
		style=filled,
		width=1.3081];
	_7 -> _14	 [arrowsize=0.5,
		pos="e,331.11,105.25 262.17,146.5 280.96,135.25 307.03,119.65 326.75,107.85"];
	_6	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="arch-x86_64[]",
		pos="392.92,162",
		style=filled,
		width=1.21];
	_5	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="platform-linux[]",
		pos="296.92,18",
		style=filled,
		width=1.3408];
	_4	 [fillcolor="#FFFFAA",
		fontsize=10,
		height=0.5,
		label="~os==Ubuntu-16.04",
		pos="274.92,666",
		style="filled,dashed",
		width=1.6515];
	_3	 [fillcolor="#FFFFAA",
		fontsize=10,
		height=0.5,
		label="~arch==x86_64",
		pos="416.92,234",
		style="filled,dashed",
		width=1.3572];
	_3 -> _6	 [arrowsize=0.5,
		pos="e,398.85,180.28 411.11,216.05 407.92,206.74 403.92,195.07 400.48,185.04"];
	_2	 [fillcolor="#FFFFAA",
		fontsize=10,
		height=0.5,
		label="~platform==linux",
		pos="238.92,90",
		style="filled,dashed",
		width=1.4717];
	_2 -> _5	 [arrowsize=0.5,
		pos="e,283.28,35.47 252.67,72.411 260.83,62.56 271.25,49.989 279.92,39.518"];
	_1	 [fillcolor="#FFFFAA",
		fontsize=10,
		height=0.5,
		label=Flask,
		pos="170.92,666",
		style="filled,dashed",
		width=0.75];
	_13	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="Flask-1.1.1[0]",
		pos="170.92,594",
		style=filled,
		width=1.1937];
	_1 -> _13	 [arrowsize=0.5,
		pos="e,170.92,612.1 170.92,647.7 170.92,638.46 170.92,626.98 170.92,617.11"];
	_17 -> _8	 [arrowsize=0.5,
		pos="e,385.92,324.1 385.92,359.7 385.92,350.46 385.92,338.98 385.92,329.11"];
	_16 -> _7	 [arrowsize=0.5,
		pos="e,232.25,180.28 220.49,216.05 223.55,206.74 227.39,195.07 230.68,185.04"];
	_15 -> _6	 [arrowsize=0.5,
		pos="e,374.66,178.4 327.93,217.81 340.46,207.24 357.25,193.08 370.63,181.8"];
	_14 -> _5	 [arrowsize=0.5,
		pos="e,310.71,35.633 341.47,72.765 333.32,62.924 322.84,50.273 314.09,39.716"];
	_13 -> _16	 [arrowsize=0.5,
		pos="e,181.17,241.29 129.13,589.27 95.063,583.97 48.264,571.13 20.923,540 -5.7694,509.61 1.9231,491.45 1.9231,451 1.9231,451 1.9231,451 \
1.9231,377 1.9231,294.22 114.68,256.73 176.12,242.44"];
	_18	 [fillcolor="#F6F6F6",
		fontsize=10,
		height=0.5,
		label="Click-5.1+",
		pos="65.923,522",
		style="filled,dashed",
		width=0.99746];
	_13 -> _18	 [arrowsize=0.5,
		pos="e,86.833,536.94 148.91,578.33 132.06,567.09 108.79,551.58 91.181,539.84"];
	_19	 [fillcolor="#F6F6F6",
		fontsize=10,
		height=0.5,
		label="Werkzeug-0.15+",
		pos="170.92,522",
		style="filled,dashed",
		width=1.4063];
	_13 -> _19	 [arrowsize=0.5,
		pos="e,170.92,540.1 170.92,575.7 170.92,566.46 170.92,554.98 170.92,545.11"];
	_20	 [fillcolor="#F6F6F6",
		fontsize=10,
		height=0.5,
		label="itsdangerous-0.24+",
		pos="295.92,522",
		style="filled,dashed",
		width=1.5534];
	_13 -> _20	 [arrowsize=0.5,
		pos="e,269.11,538.01 195.62,579.17 215.41,568.09 243.31,552.46 264.66,540.51"];
	_21	 [fillcolor="#F6F6F6",
		fontsize=10,
		height=0.5,
		label="Jinja2-2.10.1+",
		pos="414.92,522",
		style="filled,dashed",
		width=1.2427];
	_13 -> _21	 [arrowsize=0.5,
		pos="e,380.98,533.87 206.04,583.58 244.25,573.24 307.08,555.98 360.92,540 365.8,538.55 370.91,537 375.96,535.43"];
	_12	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="Click-7.0[1]",
		pos="72.923,378",
		style=filled,
		width=1.0792];
	_12 -> _16	 [arrowsize=0.5,
		pos="e,183.18,243.13 75.121,359.94 78.446,340.42 86.456,308.49 104.92,288 124.33,266.46 154.4,252.81 178.2,244.77"];
	_11	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="itsdangerous-1.1.0[2]",
		pos="259.92,450",
		style=filled,
		width=1.6842];
	_11 -> _16	 [arrowsize=0.5,
		pos="e,224.03,251.7 259.34,431.74 257.96,401.9 253.44,338.97 238.92,288 235.83,277.15 230.87,265.67 226.25,256.19"];
	_10	 [fillcolor="#AAFFAA",
		fontsize=10,
		height=0.5,
		label="Werkzeug-0.16.0[1]",
		pos="171.92,306",
		style=filled,
		width=1.6025];
	_10 -> _16	 [arrowsize=0.5,
		pos="e,204.61,251.79 182.33,288.05 188.2,278.51 195.57,266.5 201.83,256.32"];
	_18 -> _12	 [arrowsize=0.5,
		pos="e,72.076,396.19 66.768,503.87 68.034,478.18 70.426,429.65 71.826,401.25"];
	_19 -> _10	 [arrowsize=0.5,
		pos="e,171.84,324.23 171,503.85 171.18,465.42 171.62,372.44 171.82,329.46"];
	_20 -> _11	 [arrowsize=0.5,
		pos="e,268.81,468.28 287.21,504.05 282.37,494.65 276.3,482.85 271.12,472.77"];
	_21 -> _9	 [arrowsize=0.5,
		pos="e,393.08,468.28 407.9,504.05 404.04,494.74 399.21,483.07 395.06,473.04"];
}