4.0 KB134 lines
Blame
1<html>
2 <head>
3 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
4 <link
5 rel="stylesheet"
6 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
7 />
8 <link
9 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
10 rel="stylesheet"
11 />
12 <style>
13 body {
14 background: rgb(221, 208, 208);
15 font-family: 'Arial';
16 }
17 h1 {
18 color: white;
19 }
20 .mermaid2 {
21 display: none;
22 }
23 .customCss > rect,
24 .customCss {
25 fill: #ff0000 !important;
26 stroke: #ffff00 !important;
27 stroke-width: 4px !important;
28 }
29 </style>
30 </head>
31 <body>
32 <h1>info below</h1>
33 <pre class="mermaid" style="width: 100%; height: 20%">
34 %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
35 classDiagram
36 class BankAccount{
37 +String owner
38 +BigDecimal balance
39 +deposit(amount) bool
40 +withdrawal(amount) int
41 }
42 cssClass "BankAccount" customCss
43
44 </pre>
45 <pre class="mermaid" style="width: 100%; height: 20%">
46 %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
47 classDiagram-v2
48classA <|-- classB : implements
49classC *-- classD : composition
50classE o-- classF : aggregation
51 </pre>
52 <pre class="mermaid2" style="width: 100%; height: 20%">
53 %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
54 classDiagram
55 class BankAccount{
56 +String owner
57 +BigDecimal balance
58 +deposit(amount) bool
59 +withdrawal(amount) int
60 }
61 Class01~T~ <|-- AveryLongClass : Cool
62 Class03~T~ *-- Class04~T~
63 Class01 : size()
64 Class01 : int chimp
65 Class01 : int gorilla
66 Class08 <--> C2: Cool label
67 class Class10~T~ {
68 &lt;&lt;service&gt;&gt;
69 int id
70 test()
71 }
72 callback Class01 "callback" "A Tooltip"
73
74 </pre>
75 <pre class="mermaid2" style="width: 100%; height: 20%">
76 flowchart TB
77 a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
78 a_a --> c --> d_d --> c_c
79 classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
80 class a_a apa;
81 click a_a "https://www.aftonbladet.se" "apa"
82
83 </pre>
84
85 <pre class="mermaid2" style="width: 100%; height: 20%">
86 classDiagram-v2
87
88 classA -- classB : Inheritance
89 classA -- classC : link
90 classC -- classD : link
91 classB -- classD
92 classA --|> classB : Inheritance
93 classC --* classD : Composition
94 classE --o classF : Aggregation
95 classG --> classH : Association
96 classI -- classJ : Link(Solid)
97 classK ..> classL : Dependency
98 classM ..|> classN : Realization
99 classO .. classP : Link(Dashed)
100 classA : +attr1
101 classA : attr2
102 classA : method1()
103 &lt;&lt;interface&gt;&gt; classB
104 classB : method2() int
105
106 Customer "1" --> "*" Ticket
107 Student "1" --> "1..*" Course
108 Galaxy --> "many" Star : Contains
109 &lt;&lt;interface&gt;&gt; Customer
110
111 class Shape
112 callback Shape "callbackFunction" "This is a tooltip for a callback"
113
114 </pre>
115 <script type="module">
116 import mermaid from './mermaid.esm.mjs';
117 mermaid.parseError = function (err, hash) {
118 // console.error('Mermaid error: ', err);
119 };
120 mermaid.initialize({
121 theme: 'default',
122 logLevel: 0,
123 flowchart: { curve: 'linear', htmlLabels: true },
124 sequence: { actorMargin: 50, showSequenceNumbers: true },
125 curve: 'linear',
126 securityLevel: 'loose',
127 });
128 function callback() {
129 alert('It worked');
130 }
131 </script>
132 </body>
133</html>
134