18 |
19 | {% endblock %}
20 |
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # GraphViz for Discrete Math Students
2 |
3 | This project is a simple web interface to GraphViz using [App Engine](https://developers.google.com/appengine/docs/whatisgoogleappengine) and [a containerized renderer](https://github.com/grevian/graphviz-renderer-web) on [Google Cloud Run](https://cloud.google.com/run?hl=en) to render Graphviz dot files, I wrote it while taking the MATH2056
4 | course at Algoma University, to help myself and others who needed to draw graphs
5 | for various problems including Euler and Hamiltonian Circuits and Paths, as
6 | well as Dijkstra's Algorithm and other graph and tree applications. I wrote
7 | a set of examples and a quick reference for the features I found myself using,
8 | and wrapped it all up in an easily accessible website format for others to use
9 |
10 | ## Setup
11 |
12 | You can register for [Google Cloud](https://cloud.google.com/gcp/) account, install the [gcloud SDK tools](https://cloud.google.com/sdk/docs/quickstarts), clone this
13 | repository, then deploy using `gcloud app deploy .`
14 |
15 | ## History
16 |
17 | This site used the [Google Charts API](https://developers.google.com/chart/image/) for more than 10 years to render graphs, which was 8+ years after they marked it deprecated and 5+ years after they gave notice they were turning it off, so, Thanks Google!
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2012-2020, Joshua Hayes-Sheen
2 | All rights reserved.
3 |
4 | Redistribution and use in source and binary forms, with or without
5 | modification, are permitted provided that the following conditions are met:
6 |
7 | Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
8 |
9 | Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
10 |
11 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
12 | CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
13 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
14 | PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
15 | CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
16 | EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
17 | OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
18 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
19 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
20 | IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY
21 | OF SUCH DAMAGE.
22 |
23 |
--------------------------------------------------------------------------------
/resources/templates/index.html:
--------------------------------------------------------------------------------
1 | {% extends "base.html" %}
2 | {% block content %}
3 |
4 |
What is this?
5 |
Some clever people recognized that CS Majors suck at drawing, but still often need to draw graphs. Those
6 | noble souls
7 | made a program to draw graphs for us called GraphViz, it's free, open
8 | source, and great,
9 | but not incredibly easy to use, So I threw this web interface and tutorial on top of it to make it easy
10 | for us to make graphs for our assignments.
11 |
What?
12 |
Convert a simple language that describes graphs, to pretty pictures of graphs.
13 |
14 |
15 |
16 |
17 |
18 | graph {
19 | a -- b;
20 | b -- c;
21 | a -- c;
22 | d -- c;
23 | e -- c;
24 | e -- a;
25 | }
26 |
27 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
Cool, Where do I start?
38 |
Take a look at some Examples to see how this works, Then open the
39 | reference and the Graph page and go to work.
40 |
41 |
42 | {% endblock %}
43 |
44 |
--------------------------------------------------------------------------------
/main.py:
--------------------------------------------------------------------------------
1 | from flask import Flask, render_template
2 | from graph import graph_render, serve_graph, post_graph, build_graph, graph_poll
3 |
4 | app = Flask(__name__, template_folder='resources/templates')
5 |
6 |
7 | @app.route('/')
8 | @app.route('/index.html')
9 | def index():
10 | return render_template('index.html')
11 |
12 |
13 | @app.route('/about')
14 | def about():
15 | return render_template('about.html')
16 |
17 |
18 | @app.route('/contact')
19 | def contact():
20 | return render_template('contact.html')
21 |
22 |
23 | @app.route('/links')
24 | def links():
25 | return render_template('links.html')
26 |
27 |
28 | @app.route('/example')
29 | def example():
30 | return render_template('example.html')
31 |
32 |
33 | @app.route('/reference')
34 | def reference():
35 | return render_template('reference.html')
36 |
37 |
38 | @app.route('/graph', methods=['GET'])
39 | def graph_static():
40 | return render_template('graph.html')
41 |
42 |
43 | @app.route('/graph/images/', methods=['GET'])
44 | def graph_content(graph_id):
45 | return serve_graph(graph_id)
46 |
47 |
48 | @app.route('/graph/', methods=['GET'])
49 | def graph_view(graph_id):
50 | return graph_render(graph_id)
51 |
52 |
53 | @app.route('/graph', methods=['POST'])
54 | @app.route('/graph/', methods=['POST'])
55 | def create_graph():
56 | return post_graph()
57 |
58 |
59 | @app.route('/build_graph', methods=['POST'])
60 | def build():
61 | return build_graph()
62 |
63 |
64 | @app.route('/poll/', methods=['GET'])
65 | def poll(graph_id):
66 | return graph_poll(graph_id)
67 |
68 |
69 | if __name__ == '__main__':
70 | # This is used when running locally only. When deploying to Google App
71 | # Engine, a webserver process such as Gunicorn will serve the app. This
72 | # can be configured by adding an `entrypoint` to app.yaml.
73 | app.run(host='127.0.0.1', port=8080, debug=True)
74 |
--------------------------------------------------------------------------------
/resources/static/js/profiling/config.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | // call PROFILE.show() to show the profileViewer
4 |
5 | var PROFILE = {
6 |
7 | init : function(bool) {
8 |
9 | // define what objects, constructors and functions you want to profile
10 | // documentation here: http://developer.yahoo.com/yui/profiler/
11 |
12 | YAHOO.tool.Profiler.registerObject("jQuery", jQuery, true);
13 |
14 | // the following would profile all methods within constructor's prototype
15 | // YAHOO.tool.Profiler.registerConstructor("Person");
16 |
17 | // the following would profile the global function sayHi
18 | // YAHOO.tool.Profiler.registerFunction("sayHi", window);
19 |
20 | // if true is passed into init(), F9 will bring up the profiler
21 | if (bool){
22 | $(document).keyup(function(e){
23 | if (e.keyCode === 120){
24 | PROFILE.show();
25 | $(document).unbind('keyup',arguments.callee);
26 | }
27 | })
28 | }
29 | },
30 |
31 | //When the showProfile button is clicked, use YUI Loader to get all required
32 | //dependencies and then show the profile:
33 | show : function() {
34 |
35 |
36 |
37 | var s = document.createElement('link');
38 | s.setAttribute('rel','stylesheet');
39 | s.setAttribute('type','text/css');
40 | s.setAttribute('href','js/profiling/yahoo-profiling.css');
41 | document.body.appendChild(s);
42 |
43 | YAHOO.util.Dom.addClass(document.body, 'yui-skin-sam');
44 |
45 | //instantiate ProfilerViewer with desired options:
46 | var pv = new YAHOO.widget.ProfilerViewer("", {
47 | visible: true, //expand the viewer mmediately after instantiation
48 | showChart: true,
49 | // base:"../../build/",
50 | swfUrl: "js/profiling/charts.swf"
51 | });
52 |
53 | }
54 |
55 | };
56 |
57 | // check some global debug variable to see if we should be profiling..
58 | if (true) { PROFILE.init(true) }
59 |
60 |
--------------------------------------------------------------------------------
/resources/templates/graph.html:
--------------------------------------------------------------------------------
1 | {% extends "base.html" %}
2 | {% block content %}
3 |
Make A Graph
4 |
Enter your DOT definition in the box below, and click Generate to display the resulting graph.
6 | Graphs and Vertices (Called Nodes in the GraphViz notation) may have a large number of attributes
7 | that affect both the graph's actual layout, and details like colours, labels, and line types.
8 | I cover a few of the attributes below but for a full reference see the
10 | GraphViz Attribute Index
11 |
12 |
13 |
Attributes
14 |
Graph Attributes
15 |
16 |
label="My Graph";Label a graph itself
17 |
rankdir=LR;Lay the graph out from Left to Right, instead of Top to
18 | Bottom
19 |
20 |
{rank=same; a, b, c }Group nodes together at the same level of a graph
21 |
22 |
splines="line";Force edges to be straight, no curves or angles
23 |
K=0.6;Used to influence the 'spring' used in the layout, Can be used to
24 | push
25 | nodes further apart,
26 | which is especially useful for twopi and sfdp layouts
27 |
28 |
29 |
Vertex Attributes
30 |
31 |
[label="Some Label"]Labels the Vertex
32 |
[color="red"]Colors the Vertex
33 |
[fillcolor="blue"]Fills the Vertex with the specified colour
34 |
35 |
Edge Attributes
36 |
37 |
[label="Some Label"]Labels the Edge (Useful for Weights)
38 |
[color="red"]Colors the Vertex (Useful for Paths)
39 |
[penwidth=2.0]Adjusts the thickness of the edge line, Very useful for
40 | Paths
41 |
42 |
43 | Edges may also have a weight attribute, defined as
44 | [weight=0.5] for example,
45 | but note that this doesn't display the weight directly, It instead acts as a hint to the graph layout to
46 | give this
47 | edge a more
48 | direct routing.
49 |
50 |
51 |
Graphs
52 | Graphs are defined as either a graph or a digraph
53 | using
54 | fairly standard syntax, similar to an edge list.
68 | Vertices are defined with a simple plaintext label, A, B, C, Test, Vertice1,
69 | some_vertex
70 | , etc.
71 | If you need a more complicated label you can declare the vertex first, before defining an edge, and give it
72 | a label
73 | attribute,
74 | for example:
75 | digraph {
76 | someVertex[label="A Complicated Label"];
77 | someVertex -> node2;
78 | node2 -> node3;
79 | }
80 |
81 |
Edges
82 | For the most part the only concern with edges is their colour/thickness, and Label, as the rest is handled
83 | automatically by the graph/digraph definition, To color an edge apply the
84 | color attribute to the graph
85 | definition as follows
86 | digraph {
87 | node1 -> node2[color="red"];
88 | }
89 |
90 | To Display a weight, we give the vertex itself a label, similar to how we label nodes
91 |
92 | digraph {
93 | node1 -> node2[label="0.2"];
94 | node2 -> node3[label="0.2"];
95 | }
96 |
97 |
98 | We can actually apply any label we like to edge in this way
99 | digraph {
100 | node1 -> node2[label="edge1"];
101 | node2 -> node3[label="edge2"];
102 | }
103 |
104 |
105 | You may combine these attributes in any way you please
106 | digraph {
107 | node1[label="Some Complicated Label"];
108 | node1 -> node2[label="An Edge",color=red];
109 | node2 -> node3;
110 | }
111 |
112 |
22 |
23 | graph {
24 | a -- b;
25 | b -- c;
26 | a -- c;
27 | d -- c;
28 | e -- c;
29 | e -- a;
30 | }
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
Example 2: K6
43 |
44 |
45 |
46 |
47 | graph {
48 | a -- b;
49 | b -- c;
50 | c -- d;
51 | d -- e;
52 | e -- f;
53 | a -- f;
54 | a -- c;
55 | a -- d;
56 | a -- e;
57 | b -- d;
58 | b -- e;
59 | b -- f;
60 | c -- e;
61 | c -- f;
62 | d -- f;
63 | }
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
Example 3: Simple Digraph
78 |
79 |
80 |
81 |
82 | digraph {
83 | a -> b;
84 | b -> c;
85 | c -> d;
86 | d -> a;
87 | }
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
Example 4: Full Digraph
102 |
103 |
104 |
105 |
106 |
107 | digraph {
108 | a -> b[label="0.2",weight="0.2"];
109 | a -> c[label="0.4",weight="0.4"];
110 | c -> b[label="0.6",weight="0.6"];
111 | c -> e[label="0.6",weight="0.6"];
112 | e -> e[label="0.1",weight="0.1"];
113 | e -> b[label="0.7",weight="0.7"];
114 | }
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
Example 5: Showing A Path
129 |
130 |
131 |
132 |
133 | graph {
134 | a -- b[color=red,penwidth=3.0];
135 | b -- c;
136 | c -- d[color=red,penwidth=3.0];
137 | d -- e;
138 | e -- f;
139 | a -- d;
140 | b -- d[color=red,penwidth=3.0];
141 | c -- f[color=red,penwidth=3.0];
142 | }
143 |
144 |
145 | Note that there's also a shorthand method as follows:
146 |
147 |
148 | graph {
149 | a -- b -- d -- c -- f[color=red,penwidth=3.0];
150 | b -- c;
151 | d -- e;
152 | e -- f;
153 | a -- d;
154 | }
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
Example 6: Subgraphs
169 | Please note there are some quirks here, First the name of the subgraphs are important, to be visually
170 | separated they must be prefixed with cluster_ as shown below, and second only the
171 | DOT and FDP
172 | layout methods seem to support subgraphs (See the graph generation page for more information on the layout
173 | methods)
174 |
199 | Another Example of a Subgraph, In this example I group nodes together seperately from their edges, And
200 | also uses the graph attribute splines=line; to specify that edges should be drawn
201 | only as straight lines, no curves allowed.
202 |
238 | To make it easier to input large graph descriptions, One may group edges together with a set of braces, It may
239 | also help to lay the graph out left to right instead of top to bottom.
240 |
241 |
242 |
243 |
244 | graph {
245 | rankdir=LR; // Left to Right, instead of Top to Bottom
246 | a -- { b c d };
247 | b -- { c e };
248 | c -- { e f };
249 | d -- { f g };
250 | e -- h;
251 | f -- { h i j g };
252 | g -- k;
253 | h -- { o l };
254 | i -- { l m j };
255 | j -- { m n k };
256 | k -- { n r };
257 | l -- { o m };
258 | m -- { o p n };
259 | n -- { q r };
260 | o -- { s p };
261 | p -- { s t q };
262 | q -- { t r };
263 | r -- t;
264 | s -- z;
265 | t -- z;
266 | }
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 | Another feature that can make large graphs manageable is to group nodes together at the same rank,
275 | the graph above for example is copied from a specific assignment, but doesn't look the same because of how the
276 | nodes are shifted around to fit in a more space optimal, but less visually simple way.
277 | We can make it look much more similar by grouping the nodes together for display as is done in the assignment
278 | with rank, as follows
279 |
280 |
281 |
282 |
283 | graph {
284 | rankdir=LR;
285 | a -- { b c d }; b -- { c e }; c -- { e f }; d -- { f g }; e -- h;
286 | f -- { h i j g }; g -- k; h -- { o l }; i -- { l m j }; j -- { m n k };
287 | k -- { n r }; l -- { o m }; m -- { o p n }; n -- { q r };
288 | o -- { s p }; p -- { s t q }; q -- { t r }; r -- t; s -- z; t -- z;
289 | { rank=same; b, c, d }
290 | { rank=same; e, f, g }
291 | { rank=same; h, i, j, k }
292 | { rank=same; l, m, n }
293 | { rank=same; o, p, q, r }
294 | { rank=same; s, t }
295 | }
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 | {% endblock %}
306 |
--------------------------------------------------------------------------------
/resources/static/js/libs/jquery-1.4.2.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery JavaScript Library v1.4.2
3 | * http://jquery.com/
4 | *
5 | * Copyright 2010, John Resig
6 | * Dual licensed under the MIT or GPL Version 2 licenses.
7 | * http://jquery.org/license
8 | *
9 | * Includes Sizzle.js
10 | * http://sizzlejs.com/
11 | * Copyright 2010, The Dojo Foundation
12 | * Released under the MIT, BSD, and GPL Licenses.
13 | *
14 | * Date: Sat Feb 13 22:33:48 2010 -0500
15 | */
16 | (function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll("left")}catch(a){setTimeout(ma,1);return}c.ready()}}function Qa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChild(b)}function X(a,b,d,f,e,j){var i=a.length;if(typeof b==="object"){for(var o in b)X(a,o,b[o],f,e,d);return a}if(d!==w){f=!j&&f&&c.isFunction(d);for(o=0;o)[^>]*$|^#([\w-]+)$/,Ua=/^.[^:#\[\.,]*$/,Va=/\S/,
21 | Wa=/^(\s|\u00A0)+|(\s|\u00A0)+$/g,Xa=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,P=navigator.userAgent,xa=false,Q=[],L,$=Object.prototype.toString,aa=Object.prototype.hasOwnProperty,ba=Array.prototype.push,R=Array.prototype.slice,ya=Array.prototype.indexOf;c.fn=c.prototype={init:function(a,b){var d,f;if(!a)return this;if(a.nodeType){this.context=this[0]=a;this.length=1;return this}if(a==="body"&&!b){this.context=s;this[0]=s.body;this.selector="body";this.length=1;return this}if(typeof a==="string")if((d=Ta.exec(a))&&
22 | (d[1]||!b))if(d[1]){f=b?b.ownerDocument||b:s;if(a=Xa.exec(a))if(c.isPlainObject(b)){a=[s.createElement(a[1])];c.fn.attr.call(a,b,true)}else a=[f.createElement(a[1])];else{a=sa([d[1]],[f]);a=(a.cacheable?a.fragment.cloneNode(true):a.fragment).childNodes}return c.merge(this,a)}else{if(b=s.getElementById(d[2])){if(b.id!==d[2])return T.find(a);this.length=1;this[0]=b}this.context=s;this.selector=a;return this}else if(!b&&/^\w+$/.test(a)){this.selector=a;this.context=s;a=s.getElementsByTagName(a);return c.merge(this,
23 | a)}else return!b||b.jquery?(b||T).find(a):c(b).find(a);else if(c.isFunction(a))return T.ready(a);if(a.selector!==w){this.selector=a.selector;this.context=a.context}return c.makeArray(a,this)},selector:"",jquery:"1.4.2",length:0,size:function(){return this.length},toArray:function(){return R.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this.slice(a)[0]:this[a]},pushStack:function(a,b,d){var f=c();c.isArray(a)?ba.apply(f,a):c.merge(f,a);f.prevObject=this;f.context=this.context;if(b===
24 | "find")f.selector=this.selector+(this.selector?" ":"")+d;else if(b)f.selector=this.selector+"."+b+"("+d+")";return f},each:function(a,b){return c.each(this,a,b)},ready:function(a){c.bindReady();if(c.isReady)a.call(s,c);else Q&&Q.push(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(R.apply(this,arguments),"slice",R.call(arguments).join(","))},map:function(a){return this.pushStack(c.map(this,
25 | function(b,d){return a.call(b,d,b)}))},end:function(){return this.prevObject||c(null)},push:ba,sort:[].sort,splice:[].splice};c.fn.init.prototype=c.fn;c.extend=c.fn.extend=function(){var a=arguments[0]||{},b=1,d=arguments.length,f=false,e,j,i,o;if(typeof a==="boolean"){f=a;a=arguments[1]||{};b=2}if(typeof a!=="object"&&!c.isFunction(a))a={};if(d===b){a=this;--b}for(;b
33 | 
30 | {% else %}
31 | 
32 | {% endif %}
33 | 
70 | 
94 | 
121 | 
161 | 
197 | 
230 | 
301 |