Merge branch 'master' of https://github.com/knsv/mermaid

src/diagrams/flowchart/flowRenderer.js

@@ -425,6 +425,25 @@ exports.draw = function (text, id,isDot) {
         dagreD3.util.applyStyle(path, edge[type + 'Style']);
     };
 
+    // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.
+    render.arrows().normal = 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 10 5 L 0 10 z")
+        .attr("class", "arrowheadPath")
+        .style("stroke-width", 1)
+        .style("stroke-dasharray", "1,0");
+    };
+
     // Set up an SVG group so that we can translate the final graph.
     var svg = d3.select('#' + id);
     //svgGroup = d3.select('#' + id + ' g');

src/less/dark/flow.less

@@ -9,6 +9,11 @@
   stroke-width: 1px;
 }
 
+
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
 }

src/less/dark/variables.less

@@ -5,6 +5,7 @@
 @lineColor: @mainContrastColor;
 @border1: #81B1DB;
 @border2: rgba(255, 255, 255, 0.25);
+@arrowheadColor: @mainContrastColor;
 
 
 /* Flowchart variables */

src/less/default/flow.less

@@ -9,6 +9,10 @@
   stroke-width: 1px;
 }
 
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
 }

src/less/default/variables.less

@@ -3,6 +3,7 @@
 @lineColor: #333333;
 @border1:#CCCCFF;
 @border2:#aaaa33;
+@arrowheadColor: #333333;
 
 /* Flowchart variables */
 @nodeBkg:@mainBkg;

src/less/forest/flow.less

@@ -12,6 +12,10 @@ color:#333
   stroke-width: 1px;
 }
 
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
   stroke-width: 1.5px;

src/less/forest/variables.less

@@ -4,6 +4,7 @@
 @lineColor: green;
 @border1: #13540c;
 @border2: #6eaa49;
+@arrowheadColor: green;
 
 /* Flowchart variables */
 @nodeBkg:@mainBkg;

src/less/neutral/classDiagram.less

@@ -0,0 +1,69 @@
+g.classGroup text {
+  fill: @nodeBorder;
+  stroke:none;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+}
+
+g.classGroup rect {
+  fill:@nodeBkg;
+  stroke: @nodeBorder;
+}
+
+g.classGroup line {
+  stroke: @nodeBorder;
+  stroke-width:1;
+}
+
+svg .classLabel .box {
+  stroke: none;
+  stroke-width:0;
+  fill: @nodeBkg;
+  opacity: 0.5;
+}
+
+svg .classLabel .label {
+  fill: @nodeBorder;
+}
+
+.relation {
+  stroke: @nodeBorder;
+  stroke-width: 1;
+  fill:none;
+}
+
+.composition{
+  fill : @nodeBorder;
+  stroke: @nodeBorder;
+  stroke-width:1;
+}
+#compositionStart {
+  .composition;
+}
+#compositionEnd {
+  .composition;
+}
+.aggregation{
+  fill : @nodeBkg;
+  stroke: @nodeBorder;
+  stroke-width:1;
+}
+#aggregationStart {
+  .aggregation;
+}
+#aggregationEnd {
+  .aggregation;
+}
+
+#dependencyStart {
+  .composition;
+}
+#dependencyEnd {
+  .composition;
+}
+#extensionStart {
+  .composition;
+}
+#extensionEnd {
+  .composition;
+}

src/less/neutral/flow.less

@@ -0,0 +1,30 @@
+.mermaid .label { color: @text }
+
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
+  fill: @mainBkg;
+  stroke: @nodeBorder;
+  stroke-width: 1px;
+}
+
+.edgePath .path {
+  stroke: @lineColor;
+  stroke-width: 1.5px;
+}
+
+.edgeLabel {
+  background-color: @edgeLabelBackground;
+}
+
+.cluster rect {
+  fill: @secondBkg !important;
+  rx: 4 !important;
+  stroke: @clusterBorder !important;
+  stroke-width: 1px !important;
+}
+
+.cluster text {
+  fill: @titleColor;
+}

src/less/neutral/gantt.less

@@ -0,0 +1,135 @@
+/** Section styling */
+.section {
+  stroke: none;
+  opacity:0.2;
+}
+.section0{
+  fill: @sectionBkgColor;
+}
+.section2 {
+  fill: @sectionBkgColor2;
+}
+.section1,.section3 {
+  fill: @altSectionBkgColor;
+  opacity: 0.2;
+}
+
+.sectionTitle0 { fill: @titleColor;}
+.sectionTitle1 { fill: @titleColor;}
+.sectionTitle2 { fill: @titleColor;}
+.sectionTitle3 { fill: @titleColor;}
+
+
+.sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px;
+}
+
+/* Grid and axis */
+.grid .tick {
+  stroke: @gridColor;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.grid path {
+  stroke-width: 0;
+}
+
+/* Today line */
+.today {
+  fill: none;
+  stroke: @todayLineColor;
+  stroke-width: 2px;
+}
+
+/* Task styling */
+/* Default task */
+.task {
+  stroke-width: 2;
+}
+
+.taskText {
+  text-anchor: middle;
+  font-size: 11px;
+}
+.taskTextOutsideRight {
+  fill: @taskTextDarkColor;
+  text-anchor: start;
+  font-size: 11px;
+}
+.taskTextOutsideLeft {
+  fill: @taskTextDarkColor;
+  text-anchor: end;
+  font-size: 11px;
+}
+
+/* Specific task settings for the sections*/
+
+.taskText0, .taskText1, .taskText2, .taskText3 {
+  fill: @taskTextColor;
+}
+
+.task0, .task1, .task2, .task3 {
+  fill: @taskBkgColor;
+  stroke: @taskBorderColor;
+}
+
+.taskTextOutside0,.taskTextOutside2, {
+  fill: @taskTextOutsideColor;
+}
+.taskTextOutside1, .taskTextOutside3 {
+  fill: @taskTextOutsideColor;
+}
+
+/* Active task */
+.active0, .active1, .active2, .active3 {
+  fill: @activeTaskBkgColor;
+  stroke: @activeTaskBorderColor;
+}
+
+.activeText0, .activeText1, .activeText2, .activeText3 {
+  fill: @taskTextDarkColor !important;
+}
+/* Completed task */
+.done0, .done1, .done2, .done3 {
+  stroke: @doneTaskBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width: 2;
+}
+
+.doneText0, .doneText1, .doneText2, .doneText3 {
+  fill: @taskTextDarkColor !important;
+}
+
+/* Tasks on the critical line */
+.crit0, .crit1, .crit2, .crit3 {
+  stroke:@critBorderColor;
+  fill: @critBkgColor;
+  stroke-width: 2;
+}
+.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+  stroke: @critBorderColor;
+  fill: @activeTaskBkgColor;
+  stroke-width: 2;
+}
+.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+  stroke: @critBorderColor;
+  fill:  @doneTaskBkgColor;
+  stroke-width: 2;
+  cursor: pointer;
+  //shape-rendering: crispEdges;
+}
+.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+  fill: @taskTextDarkColor !important;
+}
+.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+  fill: @taskTextDarkColor !important;
+}
+
+.titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: @taskTextDarkColor;
+}
+

src/less/neutral/mermaid.less

@@ -0,0 +1,24 @@
+@import "variables";
+@import "flow";
+@import "sequenceDiagram";
+@import "gantt";
+@import "classDiagram";
+
+.node text {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size:14px;
+}
+
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  background: @secondBkg;
+  border: 1px solid @border2;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index:100;
+}

src/less/neutral/sequenceDiagram.less

@@ -0,0 +1,75 @@
+
+
+.actor {
+  stroke: @actorBorder;
+  fill: @actorBkg;
+}
+text.actor {
+  fill: @actorTextColor;
+  stroke: none;
+}
+
+.actor-line {
+  stroke: @actorLineColor;
+}
+
+.messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: "2 2";
+  marker-end: "url(#arrowhead)";
+  stroke: @signalColor;
+}
+
+.messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: "2 2";
+  stroke: @signalColor;
+}
+
+#arrowhead {
+  fill: @signalColor;
+}
+#crosshead path {
+  fill: @signalColor !important;
+  stroke: @signalColor !important;
+
+}
+.messageText {
+  fill: @signalTextColor;
+  stroke: none;
+}
+
+.labelBox {
+  stroke: @labelBoxBorderColor;
+  fill: @labelBoxBkgColor;
+}
+
+.labelText {
+  fill: @labelTextColor;
+  stroke: none;
+}
+
+.loopText {
+  fill: @labelTextColor;
+  stroke: none;
+}
+
+.loopLine {
+  stroke-width: 2;
+  stroke-dasharray: "2 2";
+  marker-end: "url(#arrowhead)";
+  stroke: @labelBoxBorderColor;
+}
+
+.note {
+  //stroke: #decc93;
+  stroke: @noteBorderColor;
+  fill: @noteBkgColor;
+}
+
+.noteText {
+  fill: black;
+  stroke: none;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+}

src/less/neutral/variables.less

@@ -0,0 +1,66 @@
+@mainBkg:   #eee;
+@secondBkg: lighten(@contrast, 55%);
+@lineColor: #666;
+@border1:   #999;
+@border2:   @contrast;
+
+@note:      #ffa;
+@text:      #333;
+@contrast:  #26a;
+@critical:  #d42;
+@done:      #bbb;
+
+/* Flowchart variables */
+@nodeBkg: @mainBkg;
+@nodeBorder: @border1;
+
+@clusterBkg: @secondBkg;
+@clusterBorder: @border2;
+
+@defaultLinkColor: @lineColor;
+
+@titleColor: @text;
+
+@edgeLabelBackground: white;
+
+/* Sequence Diagram variables */
+@actorBorder: @border1;
+@actorBkg:    @mainBkg;
+@actorTextColor: @text;
+@actorLineColor: @lineColor;
+
+@signalColor: @text;
+@signalTextColor: @text;
+
+@labelBoxBkgColor: @contrast;
+@labelBoxBorderColor: @contrast;
+@labelTextColor: white;
+
+@noteBorderColor: darken(@note, 60%);
+@noteBkgColor:    @note;
+
+/* Gantt chart variables */
+@sectionBkgColor: lighten(@contrast, 30%);
+@altSectionBkgColor: white;
+@sectionBkgColor2: lighten(@contrast, 30%);
+
+@taskBorderColor: darken(@contrast, 10%);
+@taskBkgColor: @contrast;
+@taskTextColor: @taskTextLightColor;
+@taskTextOutsideColor: @taskTextDarkColor;
+
+@activeTaskBorderColor: @taskBorderColor;
+@activeTaskBkgColor: @mainBkg;
+
+@gridColor: lighten(@border1, 30%);
+
+@doneTaskBkgColor: @done;
+@doneTaskBorderColor: @lineColor;
+
+@critBorderColor: darken(@critBkgColor, 10%);
+@critBkgColor: @critical;
+
+@taskTextLightColor: white;
+@taskTextDarkColor: @text;
+
+@todayLineColor: @critBkgColor;

src/mermaidAPI.js

@@ -71,7 +71,7 @@ var config = {
     startOnLoad: true,
 
     /**
-     * **arrowMarkerAbsolute** - This options controls whether or arrow markers in html code will be absolute pats or
+     * **arrowMarkerAbsolute** - This options controls whether or arrow markers in html code will be absolute paths or
      * an anchor, #. This matters if you are using base tag settings.
      */
     arrowMarkerAbsolute: false,