Merge branch 'takac-mermaid-front-matter-support'

This commit is contained in:
Sören Weber 2023-06-09 21:46:59 +02:00
commit 882688711f
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 24 additions and 12 deletions

View file

@ -117,11 +117,13 @@ mermaidZoom = true
## Examples ## Examples
### Flowchart with Non-Default Mermaid Theme ### Flowchart with YAML-Title
````go ````go
{{</* mermaid */>}} {{</* mermaid */>}}
%%{init:{"theme":"forest"}}%% ---
title: Example Diagram
---
graph LR; graph LR;
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>} B --> C{<strong>Decision</strong>}
@ -131,7 +133,9 @@ graph LR;
```` ````
{{< mermaid >}} {{< mermaid >}}
%%{init:{"theme":"forest"}}%% ---
title: Example Diagram
---
graph LR; graph LR;
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>} B --> C{<strong>Decision</strong>}
@ -247,10 +251,11 @@ stateDiagram-v2
closed --> open: Open closed --> open: Open
{{< /mermaid >}} {{< /mermaid >}}
### Entity Relationship Model ### Entity Relationship Model with Non-Default Mermaid Theme
````go ````go
{{</* mermaid */>}} {{</* mermaid */>}}
%%{init:{"theme":"forest"}}%%
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@ -264,6 +269,7 @@ erDiagram
```` ````
{{< mermaid >}} {{< mermaid >}}
%%{init:{"theme":"forest"}}%%
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places

View file

@ -158,21 +158,27 @@ function initMermaid( update, attrs ) {
}; };
var parseGraph = function( graph ){ 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 m = d.exec( graph );
var yaml = '';
var dir = {}; var dir = {};
var content = graph; var content = graph;
if( m && m.length == 3 ){ if( m && m.length == 4 ){
dir = JSON.parse( '{ "dummy": ' + m[2] ).dummy; yaml = m[YAML] ? m[YAML] : yaml;
content = graph.substring( d.lastIndex ); dir = m[INIT] ? JSON.parse( '{ "init": ' + m[INIT] ).init : dir;
content = m[GRAPH] ? m[GRAPH] : content;
} }
content = content.trim(); var ret = { yaml: yaml, dir: dir, content: content.trim() }
return { dir: dir, content: content }; return ret;
}; };
var serializeGraph = function( graph ){ var serializeGraph = function( graph ){
var s = '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n'; var s = graph.yaml + '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content;
s += graph.content;
return s; return s;
}; };