Interactive Graphviz graphs in clojurescript with KLIPSE and viz.js.

First include reagent:

(require '[reagent.core :as r])

Then define some helper functions:


(defn graph->svg [s engine]
  (let [g (js/Viz s #js {:format "svg" :engine engine})]
    (-> (clojure.string/split-lines g)
        (nthrest 6))))

(defn viz [g engine]
  [:div.graphviz {:dangerouslySetInnerHTML {:__html (graph->svg g engine)}}])

(defn dot [g]
  (viz g "dot"))

(defn circo [g]
  (viz g "circo"))

(defn neato [g]
  (viz g "neato"))

(defn osage [g]
  (viz g "osage"))

(defn twopi [g]
  (viz g "twopi"))

Now draw some graphs:


[dot "digraph { a -> b; }"]

Some examples taken from here:


[circo "graph { 
		a -- b; 
		b -- c; 
		a -- c; 
		d -- c; 
		e -- c; 
		e -- a; 
	}"]

[circo "graph {
		a -- b;
		b -- c;
		c -- d;
		d -- e;
		e -- f;
		a -- f;
		a -- c;
		a -- d;
		a -- e;
		b -- d;
		b -- e;
		b -- f;
		c -- e;
		c -- f;
		d -- f;
	}"]

[circo "digraph {
		a -> b;
		b -> c;
		c -> d;
		d -> a;
	}"]

[dot "digraph { 
		subgraph cluster_0 {
			label=\"Subgraph A\";
			a -> b;
			b -> c;
			c -> d;
		}
		
		subgraph cluster_1 {
			label=\"Subgraph B\";
			a -> f;
			f -> c;
		}
	}
	"]