diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index bf7125717..84de183c8 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -305,4 +305,52 @@ describe('Class diagram', () => { ); cy.get('svg'); }); + + it('13: should render a simple class diagram with css classes applied', () => { + imgSnapshotTest( + ` + classDiagram + class Class10 { + int[] id + List~int~ ids + test(List~int~ ids) List~bool~ + testArray() bool[] + } + + cssClass "Class10" exClass + `, + {} + ); + cy.get('svg'); + }); + + it('14: should render a simple class diagram with css classes applied directly', () => { + imgSnapshotTest( + ` + classDiagram + class Class10:::exClass { + int[] id + List~int~ ids + test(List~int~ ids) List~bool~ + testArray() bool[] + } + `, + {} + ); + cy.get('svg'); + }); + + it('15: should render a simple class diagram with css classes applied two multiple classes', () => { + imgSnapshotTest( + ` + classDiagram + class Class10 + class Class20 + + cssClass "Class10, class20" exClass + `, + {} + ); + cy.get('svg'); + }); }); diff --git a/dist/info.html b/dist/info.html deleted file mode 100644 index 31b678f1d..000000000 --- a/dist/info.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Mermaid Quick Test Page - - - -
info - showInfo -
- - - - - diff --git a/dist/xssi.html b/dist/xssi.html deleted file mode 100644 index 1ab21073c..000000000 --- a/dist/xssi.html +++ /dev/null @@ -1,202 +0,0 @@ - - - - - - Mermaid Quick Test Page - - - - - -
- info -
-
- graph LR; - alert`xss`-->B; - click B "javaSc -ript:alert`salt`" "This is a tooltip for a link" -
-
- graph LR; - alert`xss`-->B; - click B "java -script:alert`xss`" "This is a tooltip for a link" -
-
- graph LR; - alert`base64`-->B; - click B "data:image/png;base64,HNjcmlwdD5hbGVydCgiSGVsbG8iKTs8L3NjcmlwdD4=" -
- -
- graph TD - A["If bold then xssChristmas"] -->|Get If bold then xss money| B(Go If bold then xss shopping) - B --> C{Let me thinksssss
ssssssssssssssssssssss
sssssssssssssssssssssssssss} - C -->|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[Car] -
-
-graph TB - subgraph "If bold then xss" - a1-->a2 - end -
-
-graph TD -A[Click on] -->|Get happines| BBBB(Clickable) -BBBB --> C{Let me think} -C -->|One| D[Laptop] -C -->|Two| E[iPhone] -C -->|Three| F[Car] -click A "http://localhost:9000/index.html#link-clicked" "link test" -click BBBB testClick "click test" -click C "javascript:alert" "link test" -classDef someclass fill:#f96; -class A someclass; -
-
- graph LR; - alert`md5_salt`-->B; - click alert`md5_salt` eval "Tooltip for a callback" - click B "javascript:alert`salt`" "This is a tooltip for a link" -
-
- gantt - dateFormat YYYY-MM-DD - axisFormat %d/%m - title Adding GANTT diagram to mermaid - excludes weekdays 2014-01-10 - - section A section - Completed task :done, des1, 2014-01-06,2014-01-08 - Active task :active, des2, 2014-01-09, 3d - Future task : des3, after des2, 5d - Future task2 : des4, after des3, 5d - - section Critical tasks - Completed task in the critical line :crit, done, 2014-01-06,24h - Implement parser and jison :crit, done, after des1, 2d - Create tests for parser :crit, active, 3d - Future task in critical line :crit, 5d - Create tests for renderer :2d - Add to mermaid :1d - - section Documentation - Describe gantt syntax :active, a1, after des1, 3d - Add gantt diagram to demo page :after a1 , 20h - Add another diagram to demo page :doc1, after a1 , 48h - - section Clickable - Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10 - Calling a Callback (look at the console log) :cl2, after cl1, 3d - - click cl1 href "javascript:alert`salt`" - click cl2 call ganttTestClick("test", test, test) - - section Last section - Describe gantt syntax :after doc1, 3d - Add gantt diagram to demo page : 20h - Add another diagram to demo page : 48h -
-
-sequenceDiagram -participant "Alice" -participant Bob -participant John as John
Second Line -Alice ->> Bob: Hello Bob, how are you? -Bob-->>John: How about you If bold then xssJohn? -Bob--x Alice: I am good thanks! -Bob-x John: I am good thanks! -Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. -Bob-->Alice: Checking with John... -alt either this -Alice->>John: Yes -else or this -Alice->>John: No -else or this will happen -Alice->John: Maybe -end -par this happens in parallel -Alice -->> Bob: Parallel message 1 -and -Alice -->> John: Parallel message 2 -end -
- -
-classDiagram -Class01 <|-- AveryLongClass : CoIf bold then xssol -Class03 "0" *-- "0..n" Class04 -Class05 "1" o-- "many" Class06 -Class07 .. Class08 -Class09 "many" --> "1" C2 : Where am i? -Class09 "0" --* "1..n" C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -Class08 <--> C2: Cool label -
-
- graph LR - - SavePropertyController --> SavePropertyCommand - SavePropertyCommand --> SavePropertyCommandHandler - SavePropertyCommandHandler --> EventElastica[elastica.postupdate] - SavePropertyCommandHandler --> EventProperty[property.postdisable] - - SavePropertyController --> Exceptions - Exceptions --> ExceptionList(SecurityException
EmptyRequestBodyException
Throwable) - - classDef Ui fill:#FFFFFF - classDef object fill:#1E98EC - classDef event fill:#ECB11E - - class EventElastica,EventProperty event - class SavePropertyCommand,SavePropertyCommandHandler object - class SavePropertyController Ui -
- - - - - - - diff --git a/docs/classDiagram.md b/docs/classDiagram.md index ebf0787ab..8a5bcff58 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -1,8 +1,9 @@ # Class diagrams + **Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/classDiagram.md) > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." - Wikipedia +> Wikipedia The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling translating the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. @@ -32,6 +33,7 @@ Mermaid can render class diagrams. } ``` + ```mermaid classDiagram Animal <|-- Duck @@ -63,9 +65,10 @@ Mermaid can render class diagrams. UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them. A single instance of a class in the diagram contains three compartments: - - The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class. - - The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase. - - The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase. + +- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class. +- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase. + The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase. ``` classDiagram @@ -74,7 +77,9 @@ classDiagram BankAccount : +Bigdecimal balance BankAccount : +deposit(amount) BankAccount : +withdrawl(amount) + ``` + ```mermaid classDiagram class BankAccount @@ -83,9 +88,11 @@ classDiagram BankAccount : +deposit(amount) BankAccount : +withdrawl(amount) ``` + ## Define a class There are two ways to define a class: + - Explicitly defining a class using keyword **class** like `class Animal`. This defines the Animal class - Define two classes via a **relationship** between them `Vehicle <|-- Car`. This defines two classes Vehicle and Car along with their relationship. @@ -94,6 +101,7 @@ classDiagram class Animal Vehicle <|-- Car ``` + ```mermaid classDiagram class Animal @@ -108,28 +116,29 @@ UML provides mechanisms to represent class members, such as attributes and metho 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. - 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 : + - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: - ``` +``` + class BankAccount + BankAccount : +String owner + BankAccount : +BigDecimal balance + BankAccount : +deposit(amount) + BankAccount : +withdrawal(amount) +``` + +```mermaid + classDiagram class BankAccount BankAccount : +String owner BankAccount : +BigDecimal balance BankAccount : +deposit(amount) - BankAccount : +withdrawal(amount) - ``` - - ``` mermaid - classDiagram - class BankAccount - BankAccount : +String owner - BankAccount : +BigDecimal balance - BankAccount : +deposit(amount) - BankAccount : +withdrawl(amount) - ``` + BankAccount : +withdrawl(amount) +``` - Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example: + ``` class BankAccount{ +String owner @@ -138,6 +147,7 @@ class BankAccount{ +withdrawl(amount) } ``` + ```mermaid classDiagram class BankAccount{ @@ -149,8 +159,10 @@ class BankAccount{ ``` #### Return Type + Optionally you can end the method/function definition with the data type that will be returned (note: there must be a space between the final `)` of the method definition and return type example: + ``` class BankAccount{ +String owner @@ -159,6 +171,7 @@ class BankAccount{ +withdrawl(amount) int } ``` + ```mermaid classDiagram class BankAccount{ @@ -170,6 +183,7 @@ class BankAccount{ ``` #### Generic Types + Members can be defined using generic types, such as `List`, for fields, parameters and return types by enclosing the type within `~` (**tilde**). Note: **nested** type declarations (such as `List>`) are not currently supported This can be done as part of either class definition method: @@ -203,39 +217,43 @@ Square : +getMessages() List~string~ ``` #### Return Type + Optionally you can end the method/function definition with the data type that will be returned #### Visibility + To specify the visibility of a class member (i.e. any attribute or method), these notations may be placed before the member's name, but it is optional: -- `+` Public -- `-` Private -- `#` Protected -- `~` Package/Internal +- `+` Public +- `-` Private +- `#` Protected +- `~` Package/Internal + +> _note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`: ->_note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`: > - `*` Abstract e.g.: `someAbstractMethod()*` > - `$` Static e.g.: `someStaticMethod()$` - ## Defining Relationship + A relationship is a general term covering the specific types of logical connections found on class and object diagrams. + ``` [classA][Arrow][ClassB]:LabelText ``` There are different types of relations defined for classes under UML which are currently supported: -Type | Description ---- | --- -<\|-- | Inheritance -*-- | Composition -o-- | Aggregation ---> | Association --- | Link (Solid) -..> | Dependency -..\|> | Realization -.. | Link (Dashed) +| Type | Description | +| ----- | ------------- | +| <\|-- | Inheritance | +| \*-- | Composition | +| o-- | Aggregation | +| --> | Association | +| -- | Link (Solid) | +| ..> | Dependency | +| ..\|> | Realization | +| .. | Link (Dashed) | ``` classDiagram @@ -262,7 +280,9 @@ classM <|.. classN classO .. classP ``` + We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well : + ``` classDiagram classA --|> classB : Inheritance @@ -286,68 +306,80 @@ classI -- classJ : Link(Solid) classK ..> classL : Dependency classM ..|> classN : Realization classO .. classP : Link(Dashed) - - ``` + ## Labels on Relations It is possible to add a label text to a relation: + ``` [classA][Arrow][ClassB]:LabelText ``` + ``` classDiagram classA <|-- classB : implements classC *-- classD : composition classE o-- classF : association ``` + ```mermaid classDiagram classA <|-- classB : implements classE o-- classF : association ``` + ## Cardinality / Multiplicity on relations + Multiplicity or cardinality in class diagrams indicates the number of instances of one class linked to one instance of the other class. For example, one company will have one or more employees, but each employee works for just one company. Multiplicity notations are placed near the ends of an association. The different cardinality options are : -- `0..1` Zero or one -- `1` Only 1 -- `0..1` Zero or One -- `1..*` One or more -- `*` Many -- `n` n {where n>1} -- `0..n` zero to n {where n>1} -- `1..n` one to n {where n>1} + +- `0..1` Zero or one +- `1` Only 1 +- `0..1` Zero or One +- `1..*` One or more +- `*` Many +- `n` n {where n>1} +- `0..n` zero to n {where n>1} +- `1..n` one to n {where n>1} Cardinality can be easily defined by placing cardinality text within qoutes `"` before(optional) and after(optional) a given arrow. + ``` [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText ``` + ``` classDiagram Customer "1" --> "*" Ticket Student "1" --> "1..*" Course Galaxy --> "many" Star : Contains ``` + ```mermaid classDiagram Customer "1" --> "*" Ticket Student "1" --> "1..*" Course Galaxy --> "many" Star : Contains ``` + ## Annotations on classes It is possible to annotate classes with a specific marker text which is like meta-data for the class, giving a clear indication about its nature. Some common annotations examples could be: -- `<>` To represent an Interface class -- `<>` To represent an abstract class -- `<>` To represent a service class + +- `<>` To represent an Interface class +- `<>` To represent an abstract class +- `<>` To represent a service class - `<>` To represent an enum Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class and regardless of the syntax used output will be same. The two ways are : -- In a ***separate line*** after a class is defined. For example: + +- In a **_separate line_** after a class is defined. For example: + ``` classDiagram class Shape @@ -361,7 +393,8 @@ class Shape Shape : noOfVertices Shape : draw() ``` -- In a ***nested structure*** along with class definition. For example: + +- In a **_nested structure_** along with class definition. For example: ``` classDiagram @@ -400,7 +433,7 @@ class Color{ ## Comments -Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax +Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax ``` classDiagram @@ -423,14 +456,14 @@ You would define these actions on a separate line after all classes have been de 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.) +- _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: +### Examples -*URL Link:* +_URL Link:_ ``` classDiagram @@ -438,7 +471,7 @@ class Shape link Shape "http://www.github.com" "This is a tooltip for a link" ``` -*Callback:* +_Callback:_ ``` classDiagram @@ -465,6 +498,7 @@ classDiagram > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. Beginners tip, a full example using interactive links in an html context: + ```
@@ -490,12 +524,12 @@ Beginners tip, a full example using interactive links in an html context: +run() } - callback Duck callback "Tooltip" - click Zebra "http://www.github.com" "This is a link" + callback Duck callback "Tooltip" + click Zebra "http://www.github.com" "This is a link"