From 591a104c80060858148962cc1c8466143d9a8d3f Mon Sep 17 00:00:00 2001 From: Justin Greywolf Date: Fri, 3 Jan 2020 10:14:07 -0800 Subject: [PATCH] 1064 Class diagram interactivity docs Updated documentation for Class Diagram with details for interactivity --- docs/classDiagram.md | 95 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) diff --git a/docs/classDiagram.md b/docs/classDiagram.md index dc61f79cf..f5987df35 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -345,6 +345,101 @@ class Shape{ ``` +## Interaction + +It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. + +You would define these actions on a separate line after all classes have been declared. + +``` +action className "reference" "tooltip" +``` + +* _action_ is either `link` or `callback`, depending on which type of interaction you want to have called +* _className_ is the id of the node that the action will be associated with +* _reference_ is either the url link, or the function name for callback. (note: callback function will be called with the nodeId as parameter). +* (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.) + +### Examples: + +*URL Link:* + +``` +classDiagram +class Shape +link Shape "http://www.github.com" "This is a tooltip for a link" +``` + +*Callback:* + +``` +classDiagram +class Shape +callback Shape "callbackFunction" "This is a tooltip for a callback" +``` + +``` + + +``` + ## Styling Styling of the class diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/class.scss