Skip to content

WegnerDan/abapMermaid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 

Repository files navigation

abapMermaid

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)

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

image

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( ).

image image

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. image

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.

image

abapMermaidDocflow

See Details

About

Integrate Mermaid Diagrams in SAP GUI Containers

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages