Add support for Mermaid configuration options, version and style

index.js

@@ -1,5 +1,9 @@
 const doctrine = require('doctrine')
 
+// get access to configuration options
+const env = require('jsdoc/env');
+const config = env.conf.mermaid || {};
+
 const escapeHtmlChar = {
   '&': '&',
   '<': '&lt;',
@@ -18,11 +22,19 @@ exports.handlers = {
   newDoclet: function (e) {
     if (!e.doclet.comment || !/@mermaid\b/.test(e.doclet.comment)) return
     let tags = doctrine.parse(e.doclet.comment, { unwrap: true, tags: ['mermaid'], recoverable: true }).tags
-    let htmls = tags.map(tag => '<div class="mermaid">' + escapeHtml(tag.description) + '</div>')
+    var style = config.style ? ' style="' + config.style + '"' : ''
+    let htmls = tags.map(tag => '<div class="mermaid"' + style + '>' + escapeHtml(tag.description) + '</div>')
+
     if (htmls) {
       e.doclet.description = e.doclet.description || ''
       if (!isAddedMermaid[e.doclet.memberof]) {
-        e.doclet.description += '<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>'
+        var version = config.version ? '@' + config.version : ''
+        var altConfig = {...config}
+        delete altConfig.version
+        delete altConfig.style
+        e.doclet.description += 
+          '<script src="https://unpkg.com/mermaid' + version + '/dist/mermaid.min.js"></script>\n' +
+          '<script>mermaid.initialize(' + JSON.stringify(altConfig) + ');</script>\n'
         isAddedMermaid[e.doclet.memberof] = true
       }
       e.doclet.description += htmls.join('')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsdoc-mermaid",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A tool to automagically create flowcharts and diagrams in your jsdocs.",
   "main": "index.js",
   "scripts": {

readme.md

@@ -11,7 +11,7 @@ yarn add -D jsdoc-mermaid # OR npm install -D jsdoc-mermaid
 
 And then add `jsdoc-mermaid` to your jsdoc configuration file. That's it!
 
-```javascript
+```json
 {
     "plugins": ["jsdoc-mermaid"]
 }
@@ -49,6 +49,43 @@ When you open that page in JSDoc, you should have a shiny new graph!
 
 ![jsdoc-mermaid example](https://user-images.githubusercontent.com/2096353/31104126-b9159786-a7a0-11e7-95ed-689a7f158803.png)
 
+## Customizing Mermaid
+
+You can optionally include a section in your JSDoc configuration file (such as ```conf.json```) to define Mermaid custom configurations.  Simply add a section called ```"mermaid"```:
+
+```json
+{
+  "mermaid": {
+    "theme": "forest"
+  }
+}
+```
+
+This package also some new properties to the mermaid configuration:
+
+* ```version```: Let's you specify which Mermaid version to use.  If not provided, defaults to latest Mermaid.
+* ```style```: Let's you add optional CSS styles to the surrounding ```<div>``` tag (which also has class ```mermaid``` if you want to use a proper stylesheet).
+
+```json
+{
+  "mermaid": {
+    "theme": "nuetral",
+    "style": "display: flex",
+    "version": "8.3.0",
+    "flowchart": {
+      "curve": "cardinal",
+      "htmlLabels": false
+    }
+  }
+}
+```
+
+### Mermaid configuration documentation
+
+* [Mermaid API](https://mermaid-js.github.io/mermaid/#/mermaidAPI), however the properties are often incorrect
+* [Mermaid configuration defaults](https://mermaid-js.github.io/mermaid/#/mermaidAPI?id=mermaidapi-configuration-defaults) shows the defaults, and appears to be more accurate
+* [Source code for the API](https://github.com/mermaid-js/mermaid/blob/master/src/mermaidAPI.js) which is harder to parse but the most accurate
+
 
 ## Built With