mermaid - npm Package Compare versions

Comparing version 6.0.0 to 7.0.0

build/content/index.md

@@ -89,2 +89,5 @@ ---
 * [Vim Plugin](https://github.com/kannokanno/previm)
+* [Sphinx extension](https://github.com/mgaitan/sphinxcontrib-mermaid)
+* [Pandoc filter](https://github.com/raghur/mermaid-filter)
+* [hads](https://github.com/sinedied/hads)
 
@@ -96,5 +99,5 @@ # Online live editor
 * save the result as a svg
-* get a link to a viewer of the diagram 
+* get a link to a viewer of the diagram
 * get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back
- 
+
 * [Editor](http://knsv.github.io/mermaid/live_editor)

build/content/mermaidAPI.md

@@ -29,3 +29,3 @@ ---
 **startOnLoad** - This options controls whether or mermaid starts when the page loads
-**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.
@@ -32,0 +32,0 @@ ### flowchart

build/content/sequenceDiagram.md

@@ -193,3 +193,3 @@ ---
 
-or if there is sequence that is optionat (if without else).
+or if there is sequence that is optional (if without else).
 
@@ -196,0 +196,0 @@ ```

build/content/usage.md

@@ -18,5 +18,6 @@ ---
 
-Or download javascript files as per the url below, note that #version# should be replaced with version of choice:
+Or download a javascript bundle and a stylesheet, e.g. the urls below are for the default style and the all-in-one javascript - note that #version# should be replaced with version of choice:
 
 ```
+https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.css
 https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js
@@ -26,7 +27,8 @@ ```
 Ex:
-* [version 0.5.1](https://cdn.rawgit.com/knsv/mermaid/0.5.1/dist/mermaid.min.js)
+* [js version 6.0.0](https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js)
 
+Checkout the [latest version](https://github.com/knsv/mermaid/releases) and [other styles](https://github.com/knsv/mermaid/tree/master/dist) such as `forest` and `dark`.
 
 There are some bundles to choose from:
-* mermaid.js, mermaid.min.js This bundle contains everything you need to run mermaid
+* mermaid.js, mermaid.min.js This bundle contains all the javascript libraries you need to run mermaid
 * mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place
@@ -52,6 +54,6 @@ * mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.
 
-```
+```html
+<link rel="stylesheet" href="mermaid.css">
 &lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
 &lt;script&gt;mermaid.initialize({startOnLoad:true});&lt;/script&gt;
-
 ```
@@ -83,3 +85,3 @@
 
-###Labels out of bounds
+### Labels out of bounds
 
@@ -86,0 +88,0 @@ If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the

docs/content/flowchart.md

@@ -348,2 +348,3 @@ ---
 
+
 ```
@@ -400,3 +401,3 @@ classDef className fill:#f9f,stroke:#333,stroke-width:4px;
 
-It is possible to add icons from fontawesome. In order to do so, you need to add the fontwesome as described in the instructions at 
+It is possible to add icons from fontawesome. In order to do so, you need to add the fontawesome as described in the instructions at 
 [the fontawesome web site](https://fortawesome.github.io/Font-Awesome/).
@@ -403,0 +404,0 @@

docs/content/index.md

@@ -89,2 +89,5 @@ ---
 * [Vim Plugin](https://github.com/kannokanno/previm)
+* [Sphinx extension](https://github.com/mgaitan/sphinxcontrib-mermaid)
+* [Pandoc filter](https://github.com/raghur/mermaid-filter)
+* [hads](https://github.com/sinedied/hads)
 
@@ -96,5 +99,5 @@ # Online live editor
 * save the result as a svg
-* get a link to a viewer of the diagram 
+* get a link to a viewer of the diagram
 * get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back
- 
+
 * [Editor](http://knsv.github.io/mermaid/live_editor)

docs/content/sequenceDiagram.md

@@ -193,3 +193,3 @@ ---
 
-or if there is sequence that is optionat (if without else).
+or if there is sequence that is optional (if without else).
 
@@ -196,0 +196,0 @@ ```

docs/content/usage.md

@@ -18,5 +18,6 @@ ---
 
-Or download javascript files as per the url below, note that #version# should be replaced with version of choice:
+Or download a javascript bundle and a stylesheet, e.g. the urls below are for the default style and the all-in-one javascript - note that #version# should be replaced with version of choice:
 
 ```
+https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.css
 https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js
@@ -26,7 +27,8 @@ ```
 Ex:
-* [version 0.5.1](https://cdn.rawgit.com/knsv/mermaid/0.5.1/dist/mermaid.min.js)
+* [js version 6.0.0](https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js)
 
+Checkout the [latest version](https://github.com/knsv/mermaid/releases) and [other styles](https://github.com/knsv/mermaid/tree/master/dist) such as `forest` and `dark`.
 
 There are some bundles to choose from:
-* mermaid.js, mermaid.min.js This bundle contains everything you need to run mermaid
+* mermaid.js, mermaid.min.js This bundle contains all the javascript libraries you need to run mermaid
 * mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place
@@ -52,6 +54,6 @@ * mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.
 
-```
+```html
+<link rel="stylesheet" href="mermaid.css">
 &lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
 &lt;script&gt;mermaid.initialize({startOnLoad:true});&lt;/script&gt;
-
 ```
@@ -83,4 +85,37 @@
 
-###Labels out of bounds
+### Simple full example:
+```html
+<!DOCTYPE html>
+<html lang="en">
 
+<head>
+  <meta charset="utf-8">
+  <!-- Downloaded as per http://knsv.github.io/mermaid/#installation -->
+  <!-- Stored in the same directory as html file                     -->
+  <link rel="stylesheet" href="mermaid.css">
+
+  <!-- Optional to use fontawesome                                   -->
+  <!-- Downloaded as per http://fontawesome.io/get-started/          -->
+  <!-- Stored in the same directory as html file                     -->
+  <script src="https://use.fontawesome.com/7065416dc9.js"></script>
+
+</head>
+<body>
+
+  <!-- Include mermaid on your web page:                             -->
+  <script src="mermaid.min.js"></script>
+  <script>mermaid.initialize({startOnLoad:true});</script>
+
+  <div class="mermaid">
+  graph LR
+      A --- B
+      B-->C[fa:fa-ban forbidden]
+      B-->D(fa:fa-spinner);
+  </div>
+
+</body>
+</html>
+```
+### Labels out of bounds
+
 If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the 
@@ -87,0 +122,0 @@ whole page to have been loaded (dom + assets, particularly the fonts file).

lib/cli.js

@@ -24,2 +24,3 @@ var fs = require('fs')
         , outputDir: 'o'
+        , outputSuffix: 'O'
         , svg: 's'
@@ -33,4 +34,4 @@ , verbose: 'v'
       }
-    , 'boolean': ['help', 'png', 'svg']
-    , 'string': ['outputDir']
+    , 'boolean': ['help', 'png', 'svg', 'verbose']
+    , 'string': ['outputDir', 'outputSuffix']
   }
@@ -50,2 +51,3 @@
     , "  -o --outputDir       Directory to save files, will be created automatically, defaults to `cwd`"
+    , "  -O --outputSuffix    Suffix to output filenames in front of '.svg' or '.png', defaults to ''"
     , "  -e --phantomPath     Specify the path to the phantomjs executable"
@@ -85,3 +87,3 @@ , "  -t --css             Specify the path to a CSS file to be included when processing output"
     // ensure that parameter-expecting options have parameters
-    ;['outputDir', 'phantomPath', 'sequenceConfig', 'ganttConfig', 'css'].forEach(function(i) {
+    ;['outputDir', 'outputSuffix', 'phantomPath', 'sequenceConfig', 'ganttConfig', 'css'].forEach(function(i) {
       if(typeof options[i] !== 'undefined') {
@@ -101,9 +103,23 @@ if (typeof options[i] !== 'string' || options[i].length < 1) {
     }
-
+  
     if (options.sequenceConfig) {
-      options.sequenceConfig = checkConfig(options.sequenceConfig)
+      try {
+        fs.accessSync(options.sequenceConfig, fs.R_OK)
+      
+      } catch (err) {
+        this.errors.push(err)
+      }
+    } else {
+      options.sequenceConfig = null
     }
-
+  
     if (options.ganttConfig) {
-      options.ganttConfig = checkConfig(options.ganttConfig)
+      try {
+        fs.accessSync(options.ganttConfig, fs.R_OK)
+      
+      } catch (err) {
+        this.errors.push(err)
+      }
+    } else {
+      options.ganttConfig = null
     }
@@ -113,5 +129,4 @@
       try {
-        options.css = fs.readFileSync(options.css, 'utf8')
+        fs.accessSync(options.css, fs.R_OK)
 
-
       } catch (err) {
@@ -121,3 +136,3 @@ this.errors.push(err)
     } else {
-        options.css = fs.readFileSync(path.join(__dirname, '..', 'dist', 'mermaid.css'))
+        options.css = path.join(__dirname, '..', 'dist', 'mermaid.css')
     }
@@ -146,13 +161,2 @@
 
-function checkConfig(configPath) {
-  try {
-    var text = fs.readFileSync(configPath, 'utf8');
-    JSON.parse(text)
-    return text
-  } catch (e) {
-      console.log(e);
-    return null;
-  }
-}
-
 function createCheckPhantom(_phantomPath) {
@@ -159,0 +163,0 @@ var phantomPath = _phantomPath

lib/index.js

@@ -15,2 +15,3 @@ var os = require('os')
     , outputDir = options.outputDir || process.cwd()
+    , outputSuffix = options.outputSuffix || ''
     , next = _next || function() {}
@@ -22,3 +23,3 @@ , phantomArgs = [
         , options.svg
-        , options.css || ''
+        , options.css
         , options.sequenceConfig
@@ -28,2 +29,3 @@ , options.ganttConfig
         , options.width
+        , outputSuffix
       ];
@@ -30,0 +32,0 @@

lib/phantomscript.js

@@ -31,5 +31,4 @@ /**
 
-
 var page = webpage.create()
-  , files = system.args.slice(9, system.args.length)
+  , files = system.args.slice(10, system.args.length)
   , width = system.args[8]
@@ -44,18 +43,12 @@
       , svg: system.args[3] === 'true' ? true : false
-      , css: system.args[4] !== '' ? system.args[4] : '* {  margin: 0; padding: 0; }'
-      , sequenceConfig: system.args[5]
-      , ganttConfig: system.args[6]
+      , css: fs.read(system.args[4])
+      , sequenceConfig: system.args[5] !== 'null' ? JSON.parse(fs.read(system.args[5])) : {}
+      , ganttConfig: system.args[6] !== 'null' ? JSON.parse(fs.read(system.args[6])) : {}
       , verbose: system.args[7] === 'true' ? true : false
       , width: width
+      , outputSuffix: system.args[9]
     }
   , log = logger(options.verbose)
+options.sequenceConfig.useMaxWidth = false;
 
-  // If no css is suuplied make sure a fixed witdth is given to the gant renderer
-  if(system.args[3] !== ''){
-    if(typeof options.ganttConfig === 'undefined'){
-      options.ganttConfig = {};
-    }
-    options.ganttConfig.useWidth = 1200;
-  }
-
 page.content = [
@@ -102,4 +95,5 @@ '<html>'
   oDOM = oParser.parseFromString(svgContent, "text/xml")
-
+  
   resolveSVGElement(oDOM.firstChild)
+  setSVGStyle(oDOM.firstChild, options.css)
 
@@ -112,3 +106,4 @@ // traverse the SVG, and replace all foreignObject elements
   }
-
+  
+  var outputPath=options.outputDir + fs.separator + filename + options.outputSuffix;
   if (options.png) {
@@ -120,3 +115,3 @@ page.viewportSize = {
 
-    page.render(options.outputDir + fs.separator + filename + '.png')
+    page.render(outputPath+'.png')
     console.log('saved png: ' + filename + '.png')
@@ -127,5 +122,4 @@ }
     var serialize = new XMLSerializer();
-    fs.write(
-        options.outputDir + fs.separator + filename + '.svg'
-      , serialize.serializeToString(oDOM)
+    fs.write(outputPath+'.svg'
+      , serialize.serializeToString(oDOM)+'\n'
       , 'w'
@@ -200,2 +194,9 @@ )
 
+function setSVGStyle(svg, css) {
+  if (!css || !svg) {return}
+  var styles=svg.getElementsByTagName('style');
+  if (!styles || styles.length==0) { return }
+  styles[0].textContent = css;
+}
+
 function resolveForeignObjects(element) {
@@ -228,4 +229,4 @@ return;
     , contents = data.contents
-    , sequenceConfig = data.sequenceConfig
-    , ganttConfig = data.ganttConfig
+    , sequenceConfig = JSON.stringify(data.sequenceConfig)
+    , ganttConfig = JSON.stringify(data.ganttConfig).replace(/"(function.*})"/, "$1")
     , toRemove
@@ -240,4 +241,4 @@ , el
     , confWidth = data.confWidth
-
-  toRemove = document.getElementsByClassName('mermaid')
+  
+  var toRemove = document.getElementsByClassName('mermaid')
   if (toRemove && toRemove.length) {
@@ -249,43 +250,19 @@ for (var i = 0, len = toRemove.length; i < len; i++) {
 
-  el = document.createElement("div")
+  var el = document.createElement("div")
   el.className = 'mermaid'
-  elContent = document.createTextNode(contents)
-  el.appendChild(elContent)
-  //el.innerText = '<b>hello</b>\uD800' //contents;
-
+  el.appendChild(document.createTextNode(contents))
   document.body.appendChild(el)
+  
+  var config = {
+    sequenceDiagram: JSON.parse(sequenceConfig),
+    flowchart: {useMaxWidth: false},
+    logLevel: 1
+  };
+  
+  mermaid.initialize(config);
+  
+  var sc = document.createElement("script")
+  sc.appendChild(document.createTextNode('mermaid.ganttConfig = ' + ganttConfig + ';'))
+  document.body.appendChild(sc)
 
-  mermaid.initialize({
-    sequenceDiagram:{useMaxWidth:false},
-    flowchart:{useMaxWidth:false},
-    logLevel:1
-  });
-  //console.log('after initialize',sequenceConfig);
-
-    if(typeof sequenceConfig !== undefined && sequenceConfig !== 'undefined'){
-        //sc = document.createElement("script")
-        //scContent = document.createTextNode('mermaid.sequenceConfig = JSON.parse(' + JSON.stringify(sequenceConfig) + ');')
-        //sc.appendChild(scContent)
-
-        //document.body.appendChild(sc)
-      mermaid.initialize({
-        sequenceDiagram:JSON.parse(sequenceConfig)
-      });
-    }
-
-  //console.log('after initialize 2');
-    if(typeof ganttConfig !== undefined && ganttConfig !== 'undefined'){
-        sc = document.createElement("script")
-        scContent = document.createTextNode('mermaid.ganttConfig = JSON.parse(' + JSON.stringify(ganttConfig) + ');')
-        sc.appendChild(scContent)
-
-        document.body.appendChild(sc)
-    }else{
-        sc = document.createElement("script")
-        scContent = document.createTextNode('mermaid.ganttConfig = {useWidth:1200};')
-        sc.appendChild(scContent)
-
-        document.body.appendChild(sc)
-    }
-
   mermaid.init();
@@ -323,5 +300,5 @@
 
-  svgValue = xmlSerializer.serializeToString(svg)
+  svgValue = xmlSerializer.serializeToString(svg)+"\n";
   //console.log('confWidth: '+document.head.outerHTML);
   return svgValue
 }

package.json

@@ -1,4 +0,4 @@
-{
+    {
   "name": "mermaid",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.",
@@ -30,3 +30,3 @@ "main": "src/mermaid.js",
     "dist-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid    -o dist/mermaid.js         && cat dist/mermaid.js         | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.min.js",
-    "dist-mermaid-nomin": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid    -o dist/mermaid.js && node bin/mermaid -v -s testgitgraph.mm && testgitgraph.mm.svg",
+    "dist-mermaid-nomin": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid  -o dist/mermaid.js",
     "dist-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.js      && cat dist/mermaidAPI.js      | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.min.js",
@@ -33,0 +33,0 @@ "dist": "npm run dist-slim-mermaid && npm run dist-slim-mermaidAPI && npm run dist-mermaid && npm run dist-mermaidAPI"

README.md

@@ -15,6 +15,7 @@
 <table>
-<tr><th>Code</th><th>Rendered diagram</th></tr>
-<tr><td>
-<pre>
-<code>
+    <tr><th>Code</th><th>Rendered diagram</th></tr>
+    <tr>
+        <td>
+            <pre>
+                <code>
 graph TD;
@@ -25,13 +26,15 @@ A-->B;
     C-->D;
-<code>
-</pre>
-</td>
-<td>
-<img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
-</td>
-</tr>
-<tr>
-<td>
-<pre>
-<code>
+                </code>
+            </pre>
+        </td>
+        <td>
+            <p align="center">
+                <img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
+            </p>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <pre>
+                <code>
 sequenceDiagram
@@ -48,9 +51,34 @@ participant Alice
     Bob-->>John: Jolly good!
-</code>
-</pre>
-</td>
-<td>
-<img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
-</td>
-</tr>
+                </code>
+            </pre>
+        </td>
+        <td>
+            <img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <pre>
+                <code>
+classDiagram
+    Class01 <|-- AveryLongClass : Cool
+    Class03 *-- Class04
+    Class05 o-- Class06
+    Class07 .. Class08
+    Class09 --> C2 : Where am i?
+    Class09 --* C3
+    Class09 --|> Class07
+    Class07 : equals()
+    Class07 : Object[] elementData
+    Class01 : size()
+    Class01 : int chimp
+    Class01 : int gorilla
+    Class08 <--> C2: Cool label
+                </code>
+            </pre>
+        </td>
+        <td>
+            <img src='./docs/img/class-diagram.png' alt='Example 3'>
+        </td>
+    </tr>
 </table>
@@ -57,0 +85,0 @@

src/d3.js

@@ -5,3 +5,3 @@ /* global window */
 
-if (require) {
+if (typeof require!=='undefined') {
   try {
@@ -495,2 +495,2 @@ d3 = require('d3');
 })();
-/* jshint ignore:end */
+/* jshint ignore:end */

src/diagrams/flowchart/flowRenderer.js

@@ -137,3 +137,4 @@ /**
                 _shape = 'rect';
-                verticeText = '';
+                // Need to create a text node if using svg labels, see #367
+                verticeText = conf.htmlLabels ? '' : document.createElementNS('http://www.w3.org/2000/svg', 'text');
                 break;
@@ -429,2 +430,21 @@ default:
 
+    // 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.
@@ -431,0 +451,0 @@ var svg = d3.select('#' + id);

src/diagrams/flowchart/graphDb.js

@@ -6,2 +6,3 @@ /**
 var log = new Logger.Log();
+var utils = require('../../utils');
 
@@ -71,3 +72,3 @@ var d3 = require('../../d3');
 exports.addLink = function (start, end, type, linktext) {
-    log.debug('Got edge', start, end);
+    log.info('Got edge...', start, end);
     var edge = {start: start, end: end, type: undefined, text: ''};
@@ -114,2 +115,5 @@ linktext = type.text;
     }else{
+        if(utils.isSubstringInArray('fill', style) === -1) {
+            style.push('fill:none');
+        }
         edges[pos].style = style;
@@ -116,0 +120,0 @@ }

src/diagrams/sequenceDiagram/sequenceDiagram.spec.js

@@ -26,2 +26,9 @@ var proxyquire = require('proxyquire');
 
+function addConf(conf, key, value) {
+  if (value !== undefined) {
+    conf[key]=value;
+  }
+  return conf;
+}
+
 var str;
@@ -765,3 +772,5 @@ describe('when parsing a sequenceDiagram',function() {
     });
-    it('it should handle one actor', function () {
+    ['tspan','fo','old',undefined].forEach(function(textPlacement) {
+      it('it should handle one actor, when textPlacement is '+textPlacement, function () {
+        sd.setConf(addConf(conf, 'textPlacement', textPlacement));
         sd.bounds.init();
@@ -779,3 +788,3 @@ var str = 'sequenceDiagram\n' +
         expect(bounds.stopy ).toBe(conf.height);
-
+      });
     });
@@ -993,3 +1002,5 @@ it('it should handle one actor and a centered note', function () {
     });
-    it('it should handle one actor', function () {
+    ['tspan','fo','old',undefined].forEach(function(textPlacement) {
+      it('it should handle one actor, when textPlacement is'+textPlacement, function () {
+        sd.setConf(addConf(conf, 'textPlacement', textPlacement));
         sd.bounds.init();
@@ -1007,4 +1018,4 @@ var str = 'sequenceDiagram\n' +
         expect(bounds.stopy ).toBe(2*conf.height+2*conf.boxMargin);
-
+      });
     });
 });

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -35,6 +35,8 @@ /**
     // width of activation box
-    activationWidth:10
+    activationWidth:10,
+
+    //text placement as: tspan | fo | old only text as before 
+    textPlacement: 'tspan', 
 };
 
-//var bb = getBBox('path');
 exports.bounds = {
@@ -225,4 +227,4 @@ data:{
         //textWidth = getBBox(textElem).width; //.getComputedTextLength()
-        textWidth = textElem[0][0].getBoundingClientRect();  
-        //textWidth = textElem[0][0].getComputedTextLength();  
+        textWidth = textElem[0][0].getBoundingClientRect();
+        //textWidth = textElem[0][0].getComputedTextLength();
     }
@@ -278,2 +280,3 @@
 
+
 module.exports.drawActors = function(diagram, actors, actorKeys,verticalPos){
@@ -482,3 +485,3 @@ var i;
     var width = (box.stopx - box.startx) + (2 * conf.diagramMarginX);
-    
+
     if(title) {
@@ -490,3 +493,3 @@ diagram.append('text')
     }
-    
+
     if(conf.useMaxWidth) {
@@ -493,0 +496,0 @@ diagram.attr('height', '100%');

src/diagrams/sequenceDiagram/svgDraw.js

@@ -115,13 +115,8 @@ /**
 
-    g.append('text')      // text label for the x axis
-        .attr('x', center)
-        .attr('y', verticalPos + (conf.height/2)+5)
-        .attr('class','actor')
-        .style('text-anchor', 'middle')
-        .text(description)
-    ;
+    _drawTextCandidateFunc(conf)(description, g, 
+        rect.x, rect.y, rect.width, rect.height, {'class':'actor'});
 };
 
 exports.anchorElement = function(elem) {
-    return elem.append('g');  
+    return elem.append('g');
 };
@@ -273,1 +268,66 @@ /**
 };
+
+var _drawTextCandidateFunc = (function() {
+    function byText(content, g, x, y, width, height, textAttrs) {
+      var text = g.append('text')
+        .attr('x', x + width / 2).attr('y', y + height / 2 + 5)
+        .style('text-anchor', 'middle')
+        .text(content);
+      _setTextAttrs(text, textAttrs);
+    }
+
+    function byTspan(content, g, x, y, width, height, textAttrs) {
+      var text = g.append('text')
+        .attr('x', x + width / 2).attr('y', y) 
+        .style('text-anchor', 'middle');
+      text.append('tspan')
+        .attr('x', x + width / 2).attr('dy', '0') 
+        .text(content);
+
+      if(typeof(text.textwrap) !== 'undefined'){
+        text.textwrap({ //d3textwrap
+              x: x + width / 2, y: y, width: width, height: height
+        }, 0);
+        //vertical aligment after d3textwrap expans tspan to multiple tspans
+        var tspans = text.selectAll('tspan');
+        if (tspans.length > 0 && tspans[0].length > 0) {
+          tspans = tspans[0];
+          //set y of <text> to the mid y of the first line 
+          text.attr('y', y + (height/2.0 - text[0][0].getBBox().height*(1 - 1.0/tspans.length)/2.0))
+            .attr("dominant-baseline", "central")
+            .attr("alignment-baseline", "central");
+        }
+      } 
+      _setTextAttrs(text, textAttrs);
+    }
+
+    function byFo(content, g, x, y, width, height, textAttrs) {
+        var s = g.append('switch');
+        var f = s.append("foreignObject")
+                  .attr('x', x).attr('y', y)
+                  .attr('width', width).attr('height', height);
+
+        var text = f.append('div').style('display', 'table')
+          .style('height', '100%').style('width', '100%');
+
+        text.append('div').style('display', 'table-cell')
+           .style('text-align', 'center').style('vertical-align', 'middle')
+           .text(content);
+
+        byTspan(content, s, x, y, width, height, textAttrs);
+        _setTextAttrs(text, textAttrs);
+    }
+
+    function _setTextAttrs(toText, fromTextAttrsDict) {
+      for (var key in fromTextAttrsDict) {
+        if (fromTextAttrsDict.hasOwnProperty(key)) {
+          toText.attr(key, fromTextAttrsDict[key]);
+        }
+      }
+    }
+
+    return function(conf) {
+      return conf.textPlacement==='fo' ? byFo : (
+          conf.textPlacement==='old' ? byText: byTspan);
+    };
+})();

src/logger.js

@@ -56,2 +56,6 @@ /**
 
+function format(level) {
+  const time = formatTime(new Date());
+  return '%c ' + time  +' :%c' + level + ': ';
+}
 
@@ -74,3 +78,5 @@ function Log(level) {
                     console.log.apply(console, args.map(function(a){
-                        if (typeof a === "object") return JSON.stringify(a, null, 2);
+                        if (typeof a === "object") {
+                          return a.toString() + JSON.stringify(a, null, 2);
+                        }
                         return a;
@@ -83,33 +89,10 @@ }));
 
-    this.trace = function(str) {
-        var args = Array.prototype.slice.call(arguments);
-        args.unshift(LEVELS.trace);
-        this.log.apply(this, args);
-    };
+    this.trace = window.console.debug.bind(window.console, format('TRACE', name), 'color:grey;', 'color: grey;');
+    this.debug = window.console.debug.bind(window.console, format('DEBUG', name), 'color:grey;', 'color: green;');
+    this.info  = window.console.debug.bind(window.console, format('INFO',  name), 'color:grey;', 'color: blue;');
+    this.warn  = window.console.debug.bind(window.console, format('WARN',  name), 'color:grey;', 'color: orange;');
+    this.error = window.console.debug.bind(window.console, format('ERROR', name), 'color:grey;', 'color: red;');
 
-    this.debug = function(str) {
-        var args = Array.prototype.slice.call(arguments);
-        args.unshift(LEVELS.debug);
-        this.log.apply(this, args);
-    };
-
-    this.info = function(str) {
-        var args = Array.prototype.slice.call(arguments);
-        args.unshift(LEVELS.info);
-        this.log.apply(this, args);
-    };
-
-    this.warn = function(str) {
-        var args = Array.prototype.slice.call(arguments);
-        args.unshift(LEVELS.warn);
-        this.log.apply(this, args);
-    };
-
-    this.error = function(str) {
-        var args = Array.prototype.slice.call(arguments);
-        args.unshift(LEVELS.error);
-        this.log.apply(this, args);
-    };
 }
 
 exports.Log = Log;

src/mermaid.spec.js

@@ -153,3 +153,3 @@ /**
                     expect(options.arrowhead).toBe('none');
-                    expect(options.style).toBe('stroke:val1;stroke-width:val2;');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
                 }
@@ -187,3 +187,3 @@ };
                     expect(options.label.match('the text')).toBeTruthy();
-                    expect(options.style).toBe('stroke:val1;stroke-width:val2;');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
                 }
@@ -194,2 +194,35 @@ };
         });
+
+        it('should set fill to "none" by default when handling edges', function () {
+            flow.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;');
+            flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+            var mockG = {
+                setEdge:function(start, end,options){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('none');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
+                }
+            };
+
+            flowRend.addEdges(edges,mockG);
+        });
+
+        it('should not set fill to none if fill is set in linkStyle', function () {
+            flow.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2,fill:blue;');
+            flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+            var mockG = {
+                setEdge:function(start, end,options){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('none');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:blue;');
+                }
+            };
+
+            flowRend.addEdges(edges,mockG);
+        });
     });
@@ -196,0 +229,0 @@

src/mermaidAPI.js

@@ -74,3 +74,3 @@ /**
     /**
-     * **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.
@@ -350,4 +350,2 @@ */
 
-
-
     return txt;
@@ -381,2 +379,4 @@ };
     if(typeof container !== 'undefined'){
+        container.innerHTML = '';
+
         d3.select(container).append('div')
@@ -391,2 +391,7 @@ .attr('id', 'd'+id)
     else{
+        var element = document.querySelector('#' + 'd'+id);
+        if(element){
+            element.innerHTML = '';
+        }
+
         d3.select('body').append('div')
@@ -547,2 +552,3 @@ .attr('id', 'd'+id)
 };
+
 exports.initialize = function(options){
@@ -549,0 +555,0 @@ log.debug('Initializing mermaidAPI');

src/utils.js

@@ -115,3 +115,3 @@ /**
                 if (classes[className].styles instanceof Array) {
-                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n';
+                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>circle, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n';
                 }
@@ -143,1 +143,18 @@ }
 exports.cloneCssStyles = cloneCssStyles;
+
+
+/**
+ * @function isSubstringInArray
+ * Detects whether a substring in present in a given array
+ * @param {string} str The substring to detect
+ * @param {array} arr The array to search
+ * @returns {number} the array index containing the substring or -1 if not present
+ **/
+var isSubstringInArray = function (str, arr) {
+  for (var i = 0; i < arr.length; i++) {
+      if (arr[i].match(str)) return i;
+  }
+  return -1;
+};
+
+exports.isSubstringInArray = isSubstringInArray;

src/utils.spec.js

@@ -199,4 +199,4 @@ /**
             '.node-square { stroke: #bbbbbb;}',
-            '#mermaid-01 .node-square>rect, .node-square>polygon, .node-square>ellipse { fill:#eeeeee; stroke:#aaaaaa; }',
-            '#mermaid-01 .node-circle>rect, .node-circle>polygon, .node-circle>ellipse { fill:#444444; stroke:#111111; }'
+            '#mermaid-01 .node-square>rect, .node-square>polygon, .node-square>circle, .node-square>ellipse { fill:#eeeeee; stroke:#aaaaaa; }',
+            '#mermaid-01 .node-circle>rect, .node-circle>polygon, .node-circle>circle, .node-circle>ellipse { fill:#444444; stroke:#111111; }'
         ]);
@@ -206,1 +206,13 @@ });
 
+describe('when finding substring in array ', function () {
+    it('should return the array index that contains the substring', function () {
+        var arr = ['stroke:val1', 'fill:val2'];
+        var result = utils.isSubstringInArray('fill', arr);
+        expect(result).toEqual(1);
+    });
+    it('should return -1 if the substring is not found in the array', function () {
+      var arr = ['stroke:val1', 'stroke-width:val2'];
+      var result = utils.isSubstringInArray('fill', arr);
+      expect(result).toEqual(-1);
+    });
+});

test/cli_test-output.js

@@ -16,4 +16,3 @@ var fs = require('fs')
   phantomCmd = 'node_modules/.bin/phantomjs.cmd'
-  console.log('is win');
-  console.log('is win');
+  console.log('is win')
 }
@@ -25,11 +24,21 @@ else{
         files: [fileTestMermaid]
-      , outputDir:  path.join(process.cwd(),'test/tmp2/')
+      , outputDir:  path.join(process.cwd(),'test/tmp_single')
       , phantomPath: path.join(process.cwd(),phantomCmd)
       , width : 1200
+      , css: path.join(__dirname, '..', 'dist', 'mermaid.css')
+      , sequenceConfig: null
+      , ganttConfig: null
     }
   , multiFile = {
-        files: [path.join('test','fixtures','test.mermaid'), path.join('test','fixtures','test2.mermaid')]
-      , outputDir: 'test/tmp2/'
+        files: [path.join('test','fixtures','test.mermaid'), 
+                path.join('test','fixtures','test2.mermaid'),
+                path.join('test','fixtures','gantt.mermaid'),
+                path.join('test','fixtures','sequence.mermaid'),
+                ]
+      , outputDir: 'test/tmp_multi'
       , phantomPath: path.join(process.cwd(),phantomCmd)
       , width : 1200
+      , css: path.join(__dirname, '..', 'dist', 'mermaid.css')
+      , sequenceConfig: null
+      , ganttConfig: null
     }
@@ -43,5 +52,6 @@
 
-  opt = clone(singleFile)
+  var opt = clone(singleFile)
+  opt.outputDir += '_png'
   opt.png = true
-
+ 
   mermaid.process(opt.files, opt, function(code) {
@@ -57,5 +67,7 @@ t.equal(code, 0, 'has clean exit code')
 
-  var expected = ['test.mermaid.png', 'test2.mermaid.png']
+  var expected = ['test.mermaid.png', 'test2.mermaid.png', 
+    'gantt.mermaid.png', 'sequence.mermaid.png']
 
-  opt = clone(multiFile)
+  var opt = clone(multiFile)
+  opt.outputDir += '_png'
   opt.png = true
@@ -75,3 +87,4 @@
 
-  opt = clone(singleFile)
+  var opt = clone(singleFile)
+  opt.outputDir += '_svg'
   opt.svg = true
@@ -89,5 +102,7 @@
 
-  var expected = ['test.mermaid.svg', 'test2.mermaid.svg']
+  var expected = ['test.mermaid.svg', 'test2.mermaid.svg', 
+    'gantt.mermaid.svg', 'sequence.mermaid.svg']
 
-  opt = clone(multiFile)
+  var opt = clone(multiFile)
+  opt.outputDir += '_svg'
   opt.svg = true
@@ -113,3 +128,5 @@
   opt.png = true
+  opt.outputDir += '_css_png'
   opt2.png = true
+  opt2.outputDir += '_css_png'
 
@@ -121,17 +138,9 @@
     one = fs.statSync(filename)
-      //console.log('one: '+opt.files[0]);
 
-    opt2.css = fs.readFileSync(path.join('test','fixtures','test.css'), 'utf8')
-      //console.log(opt2.css);
+    opt2.css = path.join('test','fixtures','test.css')
 
-      console.log('Generating #2');
-      //console.log('two: '+opt2.files[0]);
+    console.log('Generating #2');
     mermaid.process(opt2.files, opt2, function(code) {
       t.equal(code, 0, 'has clean exit code')
       two = fs.statSync(filename)
-
-        //console.log('one: '+one.size);
-        //console.log('two: '+two.size);
-
-
       t.notEqual(one.size, two.size)
@@ -156,4 +165,5 @@
         t.notOk(err, 'all files passed')
-
-        rimraf(dir, function(rmerr) {
+        var delete_tmps = true
+        var _rimraf=delete_tmps ? rimraf : function(dir, f) { f(0); }
+        _rimraf(dir, function(rmerr) {
           t.notOk(rmerr, 'cleaned up')
@@ -160,0 +170,0 @@ t.end()

test/sconf.json

 {
-  "diagramMarginX": 50,
-  "diagramMarginY": 10,
-  "actorMargin": 50,
-  "width": 150,
-  "height": 15,
-  "boxMargin": 10,
-  "boxTextMargin": 5,
-  "noteMargin": 10,
-  "messageMargin": 35,
+
   "mirrorActors":false
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16078746

increased by2.85%

Number of package files

280

increased by16.18%

Lines of code

287547

increased by0.18%

Number of lines in readme file

100

increased by38.89%

Worsened metrics

Number of medium supply chain risk alerts

22

increased by4.76%

No dependency changes