How to create a class diagram with ComboStrap

About

The class-diagram component is a diagram component that permits to create a class diagram.

Example

  • The markup
<class-diagram>
classDiagram
	Class01 <|-- AveryLongClass : Cool
	Class03 *-- Class04
	Class05 o-- Class06
	Class07 .. Class08
	Class09 --> C2 : Where am i?
	Class09 --* C3
	Class09 --|> Class07
	Class07 : equals()
	Class07 : Object[] elementData
	Class01 : size()
	Class01 : int chimp
	Class01 : int gorilla
	Class08 <--> C2: Cool label
</class-diagram>
  • The output:
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

Syntax

The syntax is based on the mermaid class Diagram definition

<flowchart>
   ... Mermaid Class Diagram definition ...
</flowchart>

Mermaid offers a live editor that you can use to validate and develop your diagrams.

This component is based on the mermaid component.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
ComboStrap Diagram

ComboStrap is able to create and render diagrams . Example with a sequence Diagram. If your diagrams are in a svg format, you can just render them with the svg component. Otherwise, you can use the...
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion



Task Runner