diff --git a/index.js b/index.js
index 5d2acd2..452119c 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,5 @@
const doctrine = require('doctrine')
+const env = require('jsdoc/env');
/**
* @constant {string} JSDOC_MERMAID_TAG
@@ -7,16 +8,16 @@ const doctrine = require('doctrine')
const JSDOC_MERMAID_TAG = /@mermaid\b/
/**
- * @constant {string} MERMAID_VERSION
- * @description Semver Mermaid version
+ * @constant {string} MERMAID_HTML_SCRIPT
+ * @description Html tag that includes mermaid library
*/
-const MERMAID_VERSION = '8.4.8'
+const MERMAID_HTML_SCRIPT = ''
/**
- * @constant {string} MERMAID_HTML_SCRIPT
- * @description Html tag that include mermaid library
+ * @constant {string} MERMAID_INIT_SCRIPT
+ * @description Html script that include initializes Mermaid with config options
*/
-const MERMAID_HTML_SCRIPT = ``
+const MERMAID_INIT_SCRIPT = '\n'
/**
* @constant {Object} ESCAPE_HTML_MAPPING
@@ -30,6 +31,13 @@ const ESCAPE_HTML_MAPPING = {
"'": '''
}
+/**
+ * @constant {object} MERMAID_CONFIG
+ * @description Mermaid configuration options from the JSDoc configuration settings
+ */
+const MERMAID_CONFIG = env.conf.mermaid || {};
+
+
function escapeHtml(str) {
return str.replace(/[&<>"']/g, c => ESCAPE_HTML_MAPPING[c])
}
@@ -45,8 +53,12 @@ exports.handlers = {
recoverable: true
}).tags
+ let style = MERMAID_CONFIG.style ? ' style="' + MERMAID_CONFIG.style + '"' : ''
+
const htmls = tags.map(tag => [
- '
',
+ '
',
escapeHtml(tag.description),
'
'
].join(''))
@@ -54,8 +66,22 @@ exports.handlers = {
if (htmls) {
e.doclet.description = e.doclet.description || ''
- if (!isAddedMermaid[e.doclet.memberof]) {
- e.doclet.description += MERMAID_HTML_SCRIPT
+ if (!isAddedMermaid[e.doclet.memberof] && !MERMAID_CONFIG.disableScript) {
+ let version = MERMAID_CONFIG.version ? '@' + MERMAID_CONFIG.version : ''
+
+ // clone the Mermaid config so we can remove our unique options before rendering via JSON.stringify
+ let cloneMermaidConfig = {...MERMAID_CONFIG}
+ delete cloneMermaidConfig.version
+ delete cloneMermaidConfig.style
+
+ let MERMAID_VERSION = version;
+
+ const mermaidScript = tags.map(tag => [
+ MERMAID_HTML_SCRIPT.replace('${MERMAID_VERSION}', version),
+ MERMAID_INIT_SCRIPT.replace('${MERMAID_CONFIG}', JSON.stringify(cloneMermaidConfig)),
+ ].join(''))
+ e.doclet.description += mermaidScript
+
isAddedMermaid[e.doclet.memberof] = true
}
diff --git a/package.json b/package.json
index 263879f..e8e7355 100644
--- a/package.json
+++ b/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": {
diff --git a/readme.md b/readme.md
index 222541b..e3ffb8e 100644
--- a/readme.md
+++ b/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,44 @@ 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 supports 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 ```
``` tag (which also has class ```mermaid``` if you want to use a proper stylesheet).
+* ```disableScript```: When true, disables the generation of the script for including Mermaid and initializing it. This is sometimes needed when using a template that already has Mermaid scripting. Continues to provide ```
``` around the ```@mermaid``` sections.
+
+```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