mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-25 00:44:10 +02:00
134 lines
4.0 KiB
HTML
134 lines
4.0 KiB
HTML
<html>
|
|
<head>
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
|
|
/>
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<style>
|
|
body {
|
|
background: rgb(221, 208, 208);
|
|
font-family: 'Arial';
|
|
}
|
|
h1 {
|
|
color: white;
|
|
}
|
|
.mermaid2 {
|
|
display: none;
|
|
}
|
|
.customCss > rect,
|
|
.customCss {
|
|
fill: #ff0000 !important;
|
|
stroke: #ffff00 !important;
|
|
stroke-width: 4px !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>info below</h1>
|
|
<pre class="mermaid" style="width: 100%; height: 20%">
|
|
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
|
classDiagram
|
|
class BankAccount{
|
|
+String owner
|
|
+BigDecimal balance
|
|
+deposit(amount) bool
|
|
+withdrawl(amount) int
|
|
}
|
|
cssClass "BankAccount" customCss
|
|
|
|
</pre>
|
|
<pre class="mermaid" style="width: 100%; height: 20%">
|
|
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
|
classDiagram-v2
|
|
classA <|-- classB : implements
|
|
classC *-- classD : composition
|
|
classE o-- classF : aggregation
|
|
</pre>
|
|
<pre class="mermaid2" style="width: 100%; height: 20%">
|
|
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
|
classDiagram
|
|
class BankAccount{
|
|
+String owner
|
|
+BigDecimal balance
|
|
+deposit(amount) bool
|
|
+withdrawl(amount) int
|
|
}
|
|
Class01~T~ <|-- AveryLongClass : Cool
|
|
Class03~T~ *-- Class04~T~
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
Class08 <--> C2: Cool label
|
|
class Class10~T~ {
|
|
<<service>>
|
|
int id
|
|
test()
|
|
}
|
|
callback Class01 "callback" "A Tooltip"
|
|
|
|
</pre>
|
|
<pre class="mermaid2" style="width: 100%; height: 20%">
|
|
flowchart TB
|
|
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
|
|
a_a --> c --> d_d --> c_c
|
|
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
|
|
class a_a apa;
|
|
click a_a "https://www.aftonbladet.se" "apa"
|
|
|
|
</pre>
|
|
|
|
<pre class="mermaid2" style="width: 100%; height: 20%">
|
|
classDiagram-v2
|
|
|
|
classA -- classB : Inheritance
|
|
classA -- classC : link
|
|
classC -- classD : link
|
|
classB -- classD
|
|
classA --|> classB : Inheritance
|
|
classC --* classD : Composition
|
|
classE --o classF : Aggregation
|
|
classG --> classH : Association
|
|
classI -- classJ : Link(Solid)
|
|
classK ..> classL : Dependency
|
|
classM ..|> classN : Realization
|
|
classO .. classP : Link(Dashed)
|
|
classA : +attr1
|
|
classA : attr2
|
|
classA : method1()
|
|
<<interface>> classB
|
|
classB : method2() int
|
|
|
|
Customer "1" --> "*" Ticket
|
|
Student "1" --> "1..*" Course
|
|
Galaxy --> "many" Star : Contains
|
|
<<interface>> Customer
|
|
|
|
class Shape
|
|
callback Shape "callbackFunction" "This is a tooltip for a callback"
|
|
|
|
</pre>
|
|
<script type="module">
|
|
import mermaid from './mermaid.esm.mjs';
|
|
mermaid.parseError = function (err, hash) {
|
|
// console.error('Mermaid error: ', err);
|
|
};
|
|
mermaid.initialize({
|
|
theme: 'default',
|
|
logLevel: 0,
|
|
flowchart: { curve: 'linear', htmlLabels: true },
|
|
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
|
curve: 'linear',
|
|
securityLevel: 'loose',
|
|
});
|
|
function callback() {
|
|
alert('It worked');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|