Open
Description
Description
This class diagram will be shown fine here at Github, and will fail in minimalistic plain HTML:
classDiagram
AbstractFactory <|.. ConcreteFactory1
AbstractFactory <|.. ConcreteFactory2
AbstractProductA <|-- ProductA1
AbstractProductA <|-- ProductA2
AbstractProductB <|-- ProductB1
AbstractProductB <|-- ProductB2
Client --> AbstractFactory
Client --> AbstractProductA
Client --> AbstractProductB
class AbstractFactory {
+CreateProductA() : AbstractProductA
+CreateProductB() : AbstractProductB
}
class ConcreteFactory1 {
+CreateProductA() : ProductA1
+CreateProductB() : ProductB1
}
class ConcreteFactory2 {
+CreateProductA() : ProductA2
+CreateProductB() : ProductB2
}
class AbstractProductA {
<<interface>>
}
class AbstractProductB {
<<interface>>
}
class ProductA1
class ProductA2
class ProductB1
class ProductB2
Steps to reproduce
This is plain minimalistic HTML. Save it in filesystem and open in the browser: you will see error icon.
<!DOCTYPE html>
<html lang="en" charset="utf-8">
</head>
<body>
<h2 id="class-diagram-with--createproducta--producta1">Class Diagram with <code> +CreateProductA() : ProductA1</code></h2>
<br/>
<pre class="mermaid">classDiagram
AbstractFactory <|.. ConcreteFactory1
AbstractFactory <|.. ConcreteFactory2
AbstractProductA <|-- ProductA1
AbstractProductA <|-- ProductA2
AbstractProductB <|-- ProductB1
AbstractProductB <|-- ProductB2
Client --> AbstractFactory
Client --> AbstractProductA
Client --> AbstractProductB
class AbstractFactory {
+CreateProductA() : AbstractProductA
+CreateProductB() : AbstractProductB
}
class ConcreteFactory1 {
+CreateProductA() : ProductA1
+CreateProductB() : ProductB1
}
class ConcreteFactory2 {
+CreateProductA() : ProductA2
+CreateProductB() : ProductB2
}
class AbstractProductA {
<<interface>>
}
class AbstractProductB {
<<interface>>
}
class ProductA1
class ProductA2
class ProductB1
class ProductB2
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
Screenshots
No response
Code Sample
No response
Setup
- Mermaid version:
- Browser and Version: [Chrome, Edge, Firefox]
Suggested Solutions
No response
Additional Context
No response
Activity