ZMSDiagrams / Mermaid BPMN

[cmeier76]

Find enclosed an initial rough draft to proof the concept of web-based tooling for Diagrams and Charts in ZMS.

See example files for XML-Import and BPMN-Upload.

This approach utilizes Mermaid.js for rendering Markdown-inspired text definitions to create and modify diagrams dynamically.

https://github.com/mermaid-js/mermaid

In addition, the viewer of BPMN.io is used to display BPMN 2.0 (Business Process Model and Notation) and DMN 1.3 (Decision Model and Notation) diagrams in the browser.

https://github.com/bpmn-io

At the moment the ZMI preview rendering lacks due to

• interferences with Turbolinks and jQuery

Furthermore, the user interface of the ZMSDiagram should be optimized

• integrate ACE Code Editor as implemented in content object modelling (invoked on double click)
  and/or as in the CodeBlock object
• provide an instant preview on content object editing
• integrate BPMN.io viewer with its resources into ZMS site rendering
• remove jQuery dependency of BPMN viewer code
• package external JavaScript/CSS resources with zms.diagrams
• OK for BPMN-Viewer-11.4.1
  • https://github.com/zms-publishing/ZMS/pull/126/files#diff-ce1804b80ae6137266db11f4df780a5b37dfe1a2698a335ac4edc4ef16c8e9cfR109
• Keep Mermaid-9.4.0 as CDN Reference due to JS-Module-Imports...
  • https://github.com/zms-publishing/ZMS/pull/126/files#diff-e4f2b9312fc3502ae931b54c66b53e57422d643a73666ed27946e8c7084614f2R25
  • https://github.com/zms-publishing/ZMS/pull/126/files#diff-1a2595c39147b3598de6b42daefe290749b94c1db3ac8d82fbfa0e19bc8c5574R15
• fit all BPMN diagrams on a page - not only the last one
  see 012d430#diff-1a2595c39147b3598de6b42daefe290749b94c1db3ac8d82fbfa0e19bc8c5574R47

[drfho]

turbolinks seems to be a blocker; even this solution
https://stackoverflow.com/questions/50120824/turbolinks-load-event-doesnt-work-on-page-load
does not work, of the ZMI page is loaded via turbolinks. Blocking turbolinks "ex-post" makes mermaid work more constantly:

ZMS/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/standard_html.zpt

Lines 11 to 19 in 12cfc75

	<script type="module"
	tal:define="dgrm_load python:request.set('dgrm_load',request.get('dgrm_load',0)+1)"
	tal:condition="python:request.get('dgrm_load',0)==1">
	import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
	$(document).on('ready turbolinks:load', function() {
	$('body').attr('data-turbolinks','false');
	mermaid.initialize({ startOnLoad: true });
	});
	</script>

[drfho]

Now on code-change the mermaid chart will be re-rendered in the ZMI:

Hint: the JS code for the re-rendering basically is inspirated by
https://mermaid.js.org/config/usage.html#api-usage
Actually the jquery context tends to provoke callback errors, so the code looks like this:

ZMS/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/interface_mermaid.zpt

Lines 17 to 35 in ac5e068

	<script type="module">
	//<!--
	import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
	$(document).on('ready turbolinks:load', function() {
	$('body').attr('data-turbolinks','false');
	mermaid.initialize({ startOnLoad: true });
	$('textarea[id^="diagram_code"]').on('keydown',function(){
	let dgrm_code = $('textarea[id^="diagram_code"]').prop('value').trim();
	let dgrm_html = `<pre class="mermaid" id="diagram_code_rendered">${dgrm_code}</pre>`;
	$('#diagram_code_preview').html(dgrm_html);
	//debugger;
	let test = mermaid.parse(dgrm_code);
	$('#diagram_code_preview').html('<pre>Mermaid Parsing = ' + test + '</pre>');
	let svg = mermaid.render("diagram_code_rendered", dgrm_code);
	$('#diagram_code_preview').html(svg);
	});
	});
	//-->
	</script>

[drfho]

ACE Editor on Dblclick

[drfho]

added error handling: 0bc023f

[drfho]

errror case: multiple canvas elements on a page.
solution: a global var for each canvas id based on it's ZMS id