Integrate Mermaid Diagrams in SAP GUI Containers
Source Code of mermaid release 9.3.0 is included as SMW0 Object (downloaded from https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js)
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).
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
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( ).
Simplest possible example, basically the code that is mentioned in the preview section.
Example in a classic screen, with a couple of different diagrams.
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.
