diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md
index 63c8c289da..2156b636bc 100644
--- a/exampleSite/content/shortcodes/mermaid.en.md
+++ b/exampleSite/content/shortcodes/mermaid.en.md
@@ -117,11 +117,13 @@ mermaidZoom = true
## Examples
-### Flowchart with Non-Default Mermaid Theme
+### Flowchart with YAML-Title
````go
{{* mermaid */>}}
-%%{init:{"theme":"forest"}}%%
+---
+title: Example Diagram
+---
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
@@ -131,7 +133,9 @@ graph LR;
````
{{< mermaid >}}
-%%{init:{"theme":"forest"}}%%
+---
+title: Example Diagram
+---
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
@@ -247,10 +251,11 @@ stateDiagram-v2
closed --> open: Open
{{< /mermaid >}}
-### Entity Relationship Model
+### Entity Relationship Model with Non-Default Mermaid Theme
````go
{{* mermaid */>}}
+%%{init:{"theme":"forest"}}%%
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
@@ -264,6 +269,7 @@ erDiagram
````
{{< mermaid >}}
+%%{init:{"theme":"forest"}}%%
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
diff --git a/static/js/theme.js b/static/js/theme.js
index 752ce5f2c8..3e2cf010ad 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -158,21 +158,27 @@ function initMermaid( update, attrs ) {
};
var parseGraph = function( graph ){
- var d = /^\s*(%%\s*\{\s*\w+\s*:([^%]*?)%%\s*\n?)/g;
+ // See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10
+ // for reference on the regex originally taken from jekyll
+ var YAML=1;
+ var INIT=2;
+ var GRAPH=3;
+ var d = /^(?:\s*[\n\r])*(-{3}\s*[\n\r](?:.*?)[\n\r]-{3}(?:\s*[\n\r]+)+)?(?:\s*(?:%%\s*\{\s*\w+\s*:([^%]*?)%%\s*[\n\r]?))?(.*)$/s
var m = d.exec( graph );
+ var yaml = '';
var dir = {};
var content = graph;
- if( m && m.length == 3 ){
- dir = JSON.parse( '{ "dummy": ' + m[2] ).dummy;
- content = graph.substring( d.lastIndex );
+ if( m && m.length == 4 ){
+ yaml = m[YAML] ? m[YAML] : yaml;
+ dir = m[INIT] ? JSON.parse( '{ "init": ' + m[INIT] ).init : dir;
+ content = m[GRAPH] ? m[GRAPH] : content;
}
- content = content.trim();
- return { dir: dir, content: content };
+ var ret = { yaml: yaml, dir: dir, content: content.trim() }
+ return ret;
};
var serializeGraph = function( graph ){
- var s = '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n';
- s += graph.content;
+ var s = graph.yaml + '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content;
return s;
};