Class diagram

Original mermaid js class diagram documentation

"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

To create a class diagram call Create method of ClassDiagram class

var diagram = ClassDiagram.Create(Orientation.RightToLeft);

Classes

Definition

var typeName = new TypeName("List", "int[]");
var listOfIntArrays = diagram.AddClass(typeName, "My list annotation", "customCssClass");

Properties

Examples: define property public abstract List<decimal> Foo { ... } use this

myClass.AddProperty(
    "Foo",
    new TypeName("List", "decimal"),
    Visibility.Abstract | Visibility.Public
);

Functions

Example: define method private static decimal Average(decimal[] values)

myClass.AddFunction(
    "Average",
    new TypeName("decimal", null),
    Visibility.Static | Visibility.Private,
    new FunctionArgument(
        "values",
        new TypeName("decimal[]", null)))

Relations

diagram.Relation(
    // related classes
    firstClass,
    secondClass,
    
    // first class relation
    Relationship.Aggregation,
    Cardinality.Many,
    
    // second class relation
    Relationship.Composition,
    Cardinality.ZeroToN,
    
    // relation link style and text
    RelationLink.Solid,
    "SomeLable");

Interaction

Callbacks

myClass.SetCallback("alert", "CALLBACK TOOLTIP");

Links

myClass.SetLink(new Uri("https://github.com"), "github toolTIP");

Generate markdown syntax

string markdownSyntax = diagram.Render();