feat: use yaml instead of directive for new mermaid diagram types

mermaid is deprecating directives for new diagram types: https://github.com/mermaid-js/mermaid/issues/4630
This commit is contained in:
Marcel Beck 2023-07-28 21:13:56 +02:00
parent f0d7a38552
commit be45120c46
3 changed files with 27 additions and 13 deletions

View file

@ -62,6 +62,7 @@
<script src="{{"js/d3/d3-timer.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script> <script src="{{"js/d3/d3-timer.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-transition.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script> <script src="{{"js/d3/d3-transition.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-zoom.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script> <script src="{{"js/d3/d3-zoom.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/js-yaml.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- if isset .Params "custommermaidurl" }} {{- if isset .Params "custommermaidurl" }}
<script src="{{ .Params.customMermaidURL }}" defer></script> <script src="{{ .Params.customMermaidURL }}" defer></script>
{{- else if isset .Site.Params "custommermaidurl" }} {{- else if isset .Site.Params "custommermaidurl" }}

2
static/js/js-yaml.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -166,11 +166,11 @@ function initMermaid( update, attrs ) {
var GRAPH=3; 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 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 yaml = {};
var dir = {}; var dir = {};
var content = graph; var content = graph;
if( m && m.length == 4 ){ if( m && m.length == 4 ){
yaml = m[YAML] ? m[YAML] : yaml; yaml = m[YAML] ? jsyaml.load(m[YAML].replaceAll("---", "")) : yaml;
dir = m[INIT] ? JSON.parse( '{ "init": ' + m[INIT] ).init : dir; dir = m[INIT] ? JSON.parse( '{ "init": ' + m[INIT] ).init : dir;
content = m[GRAPH] ? m[GRAPH] : content; content = m[GRAPH] ? m[GRAPH] : content;
} }
@ -179,8 +179,10 @@ function initMermaid( update, attrs ) {
}; };
var serializeGraph = function( graph ){ var serializeGraph = function( graph ){
var s = graph.yaml + '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content; if (JSON.stringify(graph.dir) === "{}") {
return s; return "---\n" + jsyaml.dump(graph.yaml) + "---\n" + graph.content;
}
return "---\n" + jsyaml.dump(graph.yaml) + "---\n" + "%%{init: " + JSON.stringify(graph.dir) + "}%%\n" + graph.content;
}; };
var init_func = function( attrs ){ var init_func = function( attrs ){
@ -189,12 +191,21 @@ function initMermaid( update, attrs ) {
document.querySelectorAll('.mermaid').forEach( function( element ){ document.querySelectorAll('.mermaid').forEach( function( element ){
var parse = parseGraph( decodeHTML( element.innerHTML ) ); var parse = parseGraph( decodeHTML( element.innerHTML ) );
if( parse.dir.theme ){ if (JSON.stringify(parse.dir) === "{}") {
if (parse.yaml.theme) {
parse.yaml.relearn_user_theme = true;
}
if (!parse.yaml.relearn_user_theme) {
parse.yaml.theme = theme;
}
} else {
if (parse.dir.theme) {
parse.dir.relearn_user_theme = true; parse.dir.relearn_user_theme = true;
} }
if( !parse.dir.relearn_user_theme ){ if (!parse.dir.relearn_user_theme) {
parse.dir.theme = theme; parse.dir.theme = theme;
} }
}
is_initialized = true; is_initialized = true;
var graph = serializeGraph( parse ); var graph = serializeGraph( parse );
@ -215,10 +226,10 @@ function initMermaid( update, attrs ) {
var code = e.querySelector( '.mermaid-code' ); var code = e.querySelector( '.mermaid-code' );
var parse = parseGraph( decodeHTML( code.innerHTML ) ); var parse = parseGraph( decodeHTML( code.innerHTML ) );
if( parse.dir.relearn_user_theme ){ if (parse.dir.relearn_user_theme || parse.yaml.relearn_user_theme) {
return; return;
} }
if( parse.dir.theme == theme ){ if (parse.dir.theme == theme || parse.yaml.theme == theme) {
return; return;
} }
is_initialized = true; is_initialized = true;