mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-26 08:24:07 +01:00
3b2d55efec
* develop: (85 commits) fix Lint Update CHANGELOG.md Update CHANGELOG.md fix: fix exports Fix readme link Regenerate mermaid docs Add deepdwn to cspell Add Deepdwn to native integrations list docs: Fix changelog docs: v10 breaking changes Remove `null` from diagrams before render fix docs diagram Updated version Minor cleanup to trigger build. Fix spellings Wrap option working in test case Fix typos Minor cleanup Removed the deprecated use of mindmap in Demo Minor cleanup ...
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/4.7.0/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>
|