mermaid.js:クラス図
クラス図（class diagram）
mermaid.js:class diagram
Mermaid.jsでデザインパターン全23個のクラス図を書いてみた Zenn.icon
code:AbstractFactory.mermaid
classDiagram
class AbstractProductA {
<<abstract>>
}
AbstractProductA <|-- ConcreteProductA1
ConcreteProductA2 --|> AbstractProductA
class AbstractProductB {
<<abstract>>
}
AbstractProductB <|-- ConcreteProductB1
ConcreteProductB2 --|> AbstractProductB
class ConcreteFactory1 {
+createProductA() ProductA
+createProductB() ProductB
}
class AbstractFactory {
<<interface>>
+createProductA() ProductA
+createProductB() ProductB
}
class ConcreteFactory2 {
+createProductA() ProductA
+createProductB() ProductB
}
AbstractFactory <|.. ConcreteFactory1
ConcreteFactory2 ..|> AbstractFactory
class Client {
-factory: AbstractFactory
+Client(f: AbstractFactory)
+someOperation()
}
ConcreteFactory1 ..> ConcreteProductB1
ConcreteFactory1 ..> ConcreteProductA1
ConcreteFactory2 ..> ConcreteProductB2
ConcreteFactory2 ..> ConcreteProductA2
Client --> AbstractFactory
code:c.mermaid
%%{init:{'theme':'dark'}}%%
classDiagram
direction LR
class Interface {
<<interface>>
}
class Abstract {
<<abstract>>
+abstractMethod()* type
}
class Class {
+type publicStaticField$
+type publicField
-type privateField
#type protectedField
~type packagePrivateField
+publicStaticMethod(arg: type)$ type
+publicMethod(arg: type) type
-privateMethod(arg: type) type
#protectedMethod(arg: type) type
~packagePrivateMethod(arg: type) type
}
Interface <|.. Abstract
Abstract <|-- Class
#mermaid.js