Mermaid for diagrams and charts

My old Asciidoc solution supported DITAA, but Obsidian supports Mermaid. I don't have a lot of experience with it — the Mermaid documentation is here.

Sample class diagram

classDiagram
	Animal <|-- Duck
	Animal <|-- Fish
	Animal <|-- Zebra
	Animal : +int age
	Animal : +String gender
	Animal: +isMammal()
	Animal: +mate()
	class Duck {
		+String beakColor	
		+swim()	
		+quack()
	}
	class Fish {
		-int sizeInFeet
		-canEat()
	}
	class Zebra {
		+bool is_wild
		+run()
	}

classDiagram
    %% Example showing the use of cardinalities

    %% Defining the classes
    class Company {
        +String name
        +String address
        +hireEmployee(Employee)
    }
    class Employee {
        +String firstName
        +String lastName
        +int employeeID
        +workFor(Company)
    }
    class Project {
        +String projectName
        +Date projectDeadline
        +addMember(Employee)
    }

    %% Defining the relationships with cardinalities
    Company "1" --> "1..*" Employee : employs
    Employee "1" --> "0..1" Company : works for
    Employee "1..*" --> "1" Project : is involved in
    Project "1" --> "0..*" Employee : has member

    %% Adding a note to explain the diagram
    note for Company "A Company employs one or more Employees."
    note for Employee "An Employee may work for a Company and is involved in one Project."
    note for Project "A Project has multiple Employees as members."

    %% Applying CSS classes using shorthand notation
    class Company:::companyStyle
    class Employee:::employeeStyle
    class Project:::projectStyle

    %% Apply CSS classes using cssClass statement
    %% cssClass "Company, Employee, Project" generalClass

     style Company fill:#f9f,stroke:#333,stroke-width:4px
     style Employee fill:#f9f,stroke:#333,stroke-width:4px
     style Project fill:#263,stroke:#66f,stroke-width:2px,color:#fff,stroke-dasharray: 5 5