diff --git a/docs/classDiagram.md b/docs/classDiagram.md index dfadabdbf..814fee196 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -105,7 +105,7 @@ Naming convention: a class name should be composed of alphanumeric (unicode allo UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them. -Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and others as attributes. +Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and others as attributes. To indicate a return type for a method, enclose the type within **square brackets** `[]` There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are : @@ -115,15 +115,15 @@ There are two ways to define the members of a class, and regardless of whichever class BankAccount BankAccount : +String owner BankAccount : +BigDecimal balance - BankAccount : +deposit(amount) - BankAccount : +withdrawl(amount) + BankAccount : +deposit(amount) [bool] + BankAccount : +withdrawal(amount) ``` ``` mermaid classDiagram class BankAccount BankAccount : +String owner BankAccount : +BigDecimal balance - BankAccount : +deposit(amount) + BankAccount : +deposit(amount) : bool BankAccount : +withdrawl(amount) ``` @@ -132,7 +132,7 @@ There are two ways to define the members of a class, and regardless of whichever class BankAccount{ +String owner +BigDecimal balance - +deposit(amount) + +deposit(amount) [bool] +withdrawl(amount) } ``` @@ -141,7 +141,7 @@ class BankAccount{ class BankAccount{ +String owner +BigDecimal balance - +deposit(amount) + +deposit(amount) : bool +withdrawl(amount) } ``` diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js index ca4bfba78..43c1d944f 100644 --- a/src/diagrams/class/classRenderer.js +++ b/src/diagrams/class/classRenderer.js @@ -288,23 +288,14 @@ const drawClass = function(elem, classDef) { } const addTspan = function(textEl, txt, isFirst) { + let isMethod = txt.indexOf(')') > 1; let displayText = txt; let cssStyle = ''; - let methodEnd = txt.indexOf(')') + 1; - if (methodEnd > 1 && methodEnd <= txt.length) { - let classifier = txt.substring(methodEnd); - - switch (classifier) { - case '*': - cssStyle = 'font-style:italic;'; - break; - case '$': - cssStyle = 'text-decoration:underline;'; - break; - } - - displayText = txt.substring(0, methodEnd); + if (isMethod) { + let method = buildDisplayTextForMethod(txt); + displayText = method.displayText; + cssStyle = method.cssStyle; } const tSpan = textEl @@ -322,6 +313,40 @@ const drawClass = function(elem, classDef) { }; const id = classDef.id; + const buildDisplayTextForMethod = function(txt) { + let cssStyle = ''; + let methodEnd = txt.indexOf(')') + 1; + let methodName = txt.substring(0, methodEnd); + + let classifier = txt.substring(methodEnd, methodEnd + 1); + + switch (classifier) { + case '*': + cssStyle = 'font-style:italic;'; + break; + case '$': + cssStyle = 'text-decoration:underline;'; + break; + } + + let method = { + methodname: methodName, + displayText: methodName, + cssStyle: cssStyle + }; + + let returnTypeStart = txt.indexOf('[') + 1; + let returnTypeEnd = txt.indexOf(']'); + + if (returnTypeStart > 1 && returnTypeEnd > returnTypeStart) { + let returnType = txt.substring(returnTypeStart, returnTypeEnd); + + method.displayText = methodName + ' : ' + returnType; + } + + return method; + } + const classInfo = { id: id, label: classDef.id,