',this.drawChart(s,r)}},mermaid.init();
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2b0103d43..c909cd94a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -66,24 +66,32 @@ mermaid.addEdges = function (edges, g) {
type = edge.type;
}
+ if(type === 'arrow_open'){
+ aHead = 'none';
+ }
+ else{
+ aHead = 'vee';
+ }
+
+
var edgeText;
//console.log(vertice);
if (edge.text === 'undefined') {
if(typeof edge.style === 'undefined'){
- g.setEdge(edge.start, edge.end,{ arrowheadStyle: "fill: #333"});
+ g.setEdge(edge.start, edge.end,{ arrowheadStyle: "fill: #333", arrowhead: aHead});
}else{
g.setEdge(edge.start, edge.end, {
- style: edge.style, arrowheadStyle: "fill: #333"
+ style: edge.style, arrowheadStyle: "fill: #333", arrowhead: aHead
});
}
}
else {
if(typeof edge.style === 'undefined'){
- g.setEdge(edge.start, edge.end,{label: edge.text, arrowheadStyle: "fill: #333"});
+ g.setEdge(edge.start, edge.end,{label: edge.text, arrowheadStyle: "fill: #33f", arrowhead: aHead});
}else{
g.setEdge(edge.start, edge.end, {
- style: edge.style, arrowheadStyle: "fill: #333", label: edge.text
+ style: edge.style, arrowheadStyle: "fill: #333", label: edge.text, arrowhead: aHead
});
}
}
@@ -123,7 +131,6 @@ mermaid.drawChart = function (text, id) {
// Create the input mermaid.graph
var g = new dagreD3.graphlib.Graph()
.setGraph({
- //rankdir: "LR",
rankdir: dir,
marginx: 20,
marginy: 20
@@ -164,6 +171,24 @@ mermaid.drawChart = function (text, id) {
};
return shapeSvg;
};
+
+ // Add our custom arrow - an empty arrowhead
+ render.arrows().none = function normal(parent, id, edge, type) {
+ var marker = parent.append("marker")
+ .attr("id", id)
+ .attr("viewBox", "0 0 10 10")
+ .attr("refX", 9)
+ .attr("refY", 5)
+ .attr("markerUnits", "strokeWidth")
+ .attr("markerWidth", 8)
+ .attr("markerHeight", 6)
+ .attr("orient", "auto");
+
+ var path = marker.append("path")
+ .attr("d", "M 0 0 L 0 0 L 0 0 z");
+ dagreD3.util.applyStyle(path, edge[type + "Style"]);
+ };
+
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("#" + id);
svgGroup = d3.select("#" + id + " g");
@@ -180,29 +205,20 @@ mermaid.drawChart = function (text, id) {
mermaid.init = function () {
var arr = document.querySelectorAll('.mermaid');
-
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 = '';
-
this.drawChart(chartText, id);
}
;
diff --git a/test/web.html b/test/web.html
index f5f39ff61..51cea595c 100644
--- a/test/web.html
+++ b/test/web.html
@@ -31,24 +31,24 @@
- graph TD;A(Astrid)==>B[Irene];
- A==>C[Christer];
- B==>D[Micke];
- B==>E[Maria];
- E==>F[Hjalte];
- E==>G[Embla];
- E==>J[Vidar];
- E==>H[Bjarke];
- E==>I[Ingvild];
+ graph TD;A(Astrid)-->B[Irene];
+ A-->C[Christer];
+ B-->D[Micke];
+ B-->E[Maria];
+ E-->F[Hjalte];
+ E-->G[Embla];
+ E-->J[Vidar];
+ E-->H[Bjarke];
+ E-->I[Ingvild];
graph TD;
- eag-book[Läsa bok]==>b;
- b{Fundera}==>|Klocka|c(Vidar);
- b==>|Lego text|d(Bjarke går);
+ eag[Läsa bok]-->b;
+ b{Fundera}---|Klocka|c(Vidar);
+ b-->|Lego text|d(Bjarke går);
e(orphan);
- style eag-book fill:#6ff,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
+ style eag fill:#6ff,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
style #2 stroke:#0f0;