diff --git a/src/dagreTest.js b/src/dagreTest.js
new file mode 100644
index 000000000..be59c7268
--- /dev/null
+++ b/src/dagreTest.js
@@ -0,0 +1,40 @@
+/**
+ * Created by knut on 14-11-08.
+ */
+
+var dagre = require("dagre");
+
+// Create a new directed graph
+var g = new dagre.graphlib.Graph();
+
+// Set an object for the graph label
+g.setGraph({});
+
+// Default to assigning a new object as a label for each new edge.
+g.setDefaultEdgeLabel(function() { return {}; });
+
+// Add nodes to the graph. The first argument is the node id. The second is
+// metadata about the node. In this case we're going to add labels to each of
+// our nodes.
+g.setNode("kspacey", { label: "Kevin Spacey", width: 144, height: 100 });
+g.setNode("swilliams", { label: "Saul Williams", width: 160, height: 100 });
+g.setNode("bpitt", { label: "Brad Pitt", width: 108, height: 100 });
+g.setNode("hford", { label: "Harrison Ford", width: 168, height: 100 });
+g.setNode("lwilson", { label: "Luke Wilson", width: 144, height: 100 });
+g.setNode("kbacon", { label: "Kevin Bacon", width: 121, height: 100 });
+
+// Add edges to the graph.
+g.setEdge("kspacey", "swilliams");
+g.setEdge("swilliams", "kbacon");
+g.setEdge("bpitt", "kbacon");
+g.setEdge("hford", "lwilson");
+g.setEdge("lwilson", "kbacon");
+
+dagre.layout(g);
+
+g.nodes().forEach(function(v) {
+ console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
+});
+g.edges().forEach(function(e) {
+ console.log("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(g.edge(e)));
+});
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 000000000..976cc8d28
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index2.html b/src/index2.html
new file mode 100644
index 000000000..e389db0c5
--- /dev/null
+++ b/src/index2.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/init.js b/src/init.js
new file mode 100644
index 000000000..8002fa2f1
--- /dev/null
+++ b/src/init.js
@@ -0,0 +1,10 @@
+
+require.config({
+ // Karma serves files from '/base'
+ baseUrl: './'
+
+});
+
+require(['mermaid'],function(mermaid){
+ mermaid.init();
+});
\ No newline at end of file
diff --git a/src/mermaid.html b/src/mermaid.html
new file mode 100644
index 000000000..ce49aa125
--- /dev/null
+++ b/src/mermaid.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+ A-->B;
+ B-->D;
+ A[AnnaStina]-->C|Fullgubbe;
+ C-->D(Bjarke trummar pa bordet);
+ B-->C{Obs};
+
+
+ a[Lasa bok]-->b;
+ b-->c(Vidar)|Klocka;
+ b{Fundera}-->d(Bjarke)|Lego;
+
+
+
\ No newline at end of file
diff --git a/src/mermaid.js b/src/mermaid.js
new file mode 100644
index 000000000..f2cde6ce7
--- /dev/null
+++ b/src/mermaid.js
@@ -0,0 +1,154 @@
+/**
+ * Created by knut on 14-11-06.
+ */
+// Now we're ready to require JointJS and write our application code.
+define(['parser/graph','parser/mermaid'],function(graph,parser){
+ var addVertices = function(vert,g){
+ var keys = Object.keys(vert);
+
+ keys.forEach(function(id){
+ var vertice = vert[id];
+ var verticeText;
+ //console.log(vertice);
+ if(vertice.text === undefined){
+ verticeText = vertice.id;
+ }
+ else{
+ verticeText = vertice.text;
+ }
+ console.log('g.setNode("'+vertice.id+'", { label: "'+verticeText+'" });');
+ if(vertice.type==='round'){
+ g.setNode(vertice.id, { label: verticeText,rx:5,ry:5 });
+ }else{
+ if(vertice.type==='diamond'){
+ g.setNode(vertice.id, {shape: "house", label: verticeText,rx:0,ry:0 });
+ }else{
+ g.setNode(vertice.id, { label: verticeText,rx:0,ry:0 });
+ }
+ }
+ });
+ };
+
+ var addEdges = function(edges,g){
+ edges.forEach(function(edge){
+ var edgeText;
+ //console.log(vertice);
+ if(edge.text === undefined){
+ g.setEdge(edge.start,edge.end);
+ }
+ else{
+ g.setEdge(edge.start,edge.end,{ label: edge.text });
+ }
+ console.log('g.setEdge("'+edge.start+'","'+edge.end+'")');
+
+ });
+ };
+ var drawChart = function(text,id){
+
+ console.log('drawing char with id:'+id);
+ console.log(text);
+ graph.clear();
+ parser.yy = graph;
+
+ var err = function(){
+ console.log('Syntax error!!!');
+ };
+
+ parser.parse(text);
+
+ var vert = graph.getVertices();
+ var edges = graph.getEdges();
+
+ var keys = Object.keys(vert);
+
+ // Create the input graph
+ var g = new dagreD3.graphlib.Graph()
+ .setGraph({
+ //rankdir: "LR",
+ marginx: 20,
+ marginy: 20
+ })
+ .setDefaultEdgeLabel(function() { return {}; });
+
+ console.log(g);
+
+ addVertices(vert,g);
+ addEdges(edges,g);
+
+ /*g.nodes().forEach(function(v) {
+ var node = g.node(v);
+ // Round the corners of the nodes
+ node.rx = node.ry = 5;
+ });
+*/
+ // Create the renderer
+ var render = new dagreD3.render();
+// Add our custom shape (a house)
+ render.shapes().house = function(parent, bbox, node) {
+ var w = bbox.width,
+ h = bbox.height*3,
+ points = [
+ { x: w/2, y: 0 },
+ { x: w, y: -h/2 },
+ { x: w/2, y: -h },
+ { x: 0, y: -h /2 }
+ ];
+ shapeSvg = parent.insert("polygon", ":first-child")
+ .attr("points", points.map(function(d) { return d.x + "," + d.y; }).join(" "))
+ .style("fill", "#fff")
+ .style("stroke", "#333")
+ .attr("transform", "translate(" + (-w/2) + "," + (h * 2/4) + ")");
+ node.intersect = function(point) {
+ return dagreD3.intersect.polygon(node, points, point);
+ };
+ return shapeSvg;
+ };
+ // Set up an SVG group so that we can translate the final graph.
+ var svg = d3.select("#"+id);
+ svgGroup = d3.select("#"+id+" g");
+
+ // Run the renderer. This is what draws the final graph.
+ render(d3.select("#"+id+" g"), g);
+
+ // Center the graph
+ var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
+ //svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
+ svg.attr("height", g.graph().height + 40);
+ };
+
+
+ var mermaid = {
+ init:function(){
+ console.log('Init');
+
+ var arr = document.querySelectorAll('.mermaid');
+ console.log(typeof arr);
+ var cnt = 0;
+ for(i=0;i'+
+ ''+
+ '';
+
+
+ drawChart(chartText,id);
+ };
+ }
+
+ };
+ return mermaid;
+});
\ No newline at end of file