abapMermaid
Integrate Mermaid Diagrams in SAP GUI Containers
Source Code of mermaid release 11.12.0 is included as SMW0 Object (downloaded from https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js)
Disclaimer
This is a work in progress, there are bugs. The background color of the HTML container is determined with cl_gui_resources, but this might not work correctly if corrections described in SAP Note 3002961 are not applied in the System.
The font color and type are on the todo list (doesn't work yet).
Prerequisites
Mermaid does not work in the Internet Explorer Browser Control, so the Edge Chromium Control has to be used. More info in SAP Note 2913405
And SAP GUI version should be from 7.70 or higher.
Preview
DATA(diagram) = NEW zcl_wd_gui_mermaid_js_diagram( parent = some_instance_of_cl_gui_container ).
diagram->set_source_code_string( |graph TD\n|
&& |A[Client] --> B[Load Balancer]\n|
&& |B --> C[Server01]\n|
&& |B --> D[Server02]\n| ).
diagram->display( ).
Sample Programs
Program ZWD_MERMAID_SAMPLE_1
Simplest possible example, basically the code that is mentioned in the preview section.
Program ZWD_MERMAID_SAMPLE_2
Example in a classic screen, with a couple of different diagrams.
Program ZWD_MERMAID_TEST
Use this to test how a diagram looks in SAP GUI after designing with Mermaid Live Editor.
Includes basic error handling (parse errors are displayed in the bottom left corner) and configuration editable as JSON.
abapMermaidDocflow
See Details