marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 10:06:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Version that renders graphs (and some test files)

Browse Source
This commit is contained in:
Knut Sveidqvist
2014-11-09 18:08:05 +01:00
committed by knsv
parent e54a0fcb0f
commit f55336259b
6 changed files with 425 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/dagreTest.js Normal file
View File

@@ -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)));
});

98
src/index.html Normal file
View File

@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app"></div>
<svg width="100%" height="100">
// make sure to give a distinct ID for the second graph placeholder
<g id=DIAGRAM1 transform="translate(20,20)"/>
</svg>
<scrpt src="../vendor/d3/d3.js"></scrpt>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../lib/dagre-d3.min.js"></script>
<style id="css">
/* This sets the color for "TK" nodes to a light blue green. */
g.type-TK > rect {
fill: #00ffd0;
}
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #999;
fill: #fff;
stroke-width: 1.5px;
}
.edgePath path {
stroke: #333;
stroke-width: 1.5px;
}
</style>
<script>
// Create the renderer
var render = new dagreD3.render();
// Create a new directed graph
//var g = new dagre.graphlib.Graph();
// Create the input graph
var g = new dagreD3.graphlib.Graph()
.setGraph({})
.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" });
g.setNode("swilliams", { label: "Saul Williams som är en \nfinurlig \n åöä filivipp som gillar \natt hoppa och dansa"});
g.setNode("bpitt", { label: "Brad Pitt", width: 78, height: 100 });
g.setNode("hford", { label: "Harrison Ford", width: 138, height: 100 });
g.setNode("lwilson", { label: "Luke Wilson", width: 114, height: 100 });
g.setNode("kbacon", { label: "Kevin Bacon", width: 91, 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");
g.nodes().forEach(function(v) {
var node = g.node(v);
// Round the corners of the nodes
node.rx = node.ry = 5;
});
//dagre.layout(g);
// Create the renderer
var render = new dagreD3.render();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
svgGroup = svg.append("g");
// Run the renderer. This is what draws the final graph.
render(d3.select("svg g#DIAGRAM1"), 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);
</script>
</body>
</html>

78
src/index2.html Normal file
View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app"></div>
<svg width="100%" height="100">
// make sure to give a distinct ID for the second graph placeholder
<g id=DIAGRAM1 transform="translate(20,20)"/>
</svg>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../lib/dagre-d3.min.js"></script>
<style id="css">
/* This sets the color for "TK" nodes to a light blue green. */
g.type-TK > rect {
fill: #00ffd0;
}
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #999;
fill: #fff;
stroke-width: 1.5px;
}
.edgePath path {
stroke: #333;
stroke-width: 1.5px;
}
</style>
<script>
// Create the input graph
var g = new dagreD3.graphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(function() { return {}; });
console.log(g);
// 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("A", { label: "chimpansen hoppar" });
g.setNode("B", { label: "gorillan hoppar" });
g.setEdge("A","B");
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();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
svgGroup = svg.append("g");
// Run the renderer. This is what draws the final graph.
render(d3.select("svg g#DIAGRAM1"), 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);
</script>
</body>
</html>

10
src/init.js Normal file
View File

@@ -0,0 +1,10 @@
require.config({
// Karma serves files from '/base'
baseUrl: './'
});
require(['mermaid'],function(mermaid){
mermaid.init();
});

45
src/mermaid.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../lib/dagre-d3.min.js"></script>
<script data-main="init.js" src="../vendor/requirejs/require.js"></script>
<style id="css">
/* This sets the color for "TK" nodes to a light blue green. */
g.type-TK > rect {
fill: #00ffd0;
}
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #999;
fill: #fff;
stroke-width: 1.5px;
}
.edgePath path {
stroke: #333;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div class="mermaid2">
A-->B;
B-->D;
A[AnnaStina]-->C|Fullgubbe;
C-->D(Bjarke trummar pa bordet);
B-->C{Obs};
</div>
<div class="mermaid">
a[Lasa bok]-->b;
b-->c(Vidar)|Klocka;
b{Fundera}-->d(Bjarke)|Lego;
</div>
</body>
</html>

154
src/mermaid.js Normal file
View File

@@ -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<arr.length;i++){
var element = arr[i];
var id;
//if(element.id.length === 0){
id='mermaidChart'+cnt;
//arr[i].id = id;
cnt++;
//}
//else{
// id=element.id;
//}
var chartText = element.textContent.trim();
console.log(element);
element.innerHTML = '<svg id="' + id + '" width="100%">'+
'<g />'+
'</svg>';
drawChart(chartText,id);
};
}
};
return mermaid;
});