mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-04 04:44:08 +01:00
258 lines
6.6 KiB
HTML
258 lines
6.6 KiB
HTML
<html>
|
|
<head>
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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); */
|
|
/* background:#333; */
|
|
font-family: 'Courier New', Courier, monospace;
|
|
/* font-size: 18px !important; */
|
|
}
|
|
h1 {
|
|
color: grey;
|
|
}
|
|
.mermaid2 {
|
|
display: none;
|
|
}
|
|
.mermaid {
|
|
border: 1px solid red;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
/* font-size: 18px !important; */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>info below</div>
|
|
<div class="">
|
|
<pre class="mermaid2" style="width: 100%; height: 400px">
|
|
flowchart TB;subgraph "number as labels";1;end;
|
|
</pre>
|
|
<pre class="mermaid2" style="width: 100%; height: 400px">
|
|
flowchart TB;a[APA];
|
|
</pre>
|
|
<pre class="mermaid2" style="margin-left: 100px">
|
|
graph TD
|
|
work --> sleep
|
|
sleep --> work
|
|
eat --> sleep
|
|
work --> eat
|
|
</pre>
|
|
<pre class="mermaid2" style="margin-left: 100px">
|
|
flowchart TD
|
|
work --> sleep
|
|
sleep --> work
|
|
eat --> sleep
|
|
work --> eat
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
graph TB
|
|
A
|
|
B
|
|
subgraph foo[Foo SubGraph]
|
|
C
|
|
D
|
|
end
|
|
subgraph bar[Bar SubGraph]
|
|
E
|
|
F
|
|
end
|
|
G
|
|
|
|
A-->B
|
|
B-->C
|
|
C-->D
|
|
B-->D
|
|
D-->E
|
|
E-->A
|
|
E-->F
|
|
F-->D
|
|
F-->G
|
|
B-->G
|
|
G-->D
|
|
|
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
|
style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
graph TB
|
|
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
A
|
|
B
|
|
subgraph foo[Foo SubGraph]
|
|
C
|
|
D
|
|
end
|
|
subgraph bar[Bar SubGraph]
|
|
E
|
|
F
|
|
end
|
|
G
|
|
|
|
A-->B
|
|
B-->C
|
|
C-->D
|
|
B-->D
|
|
D-->E
|
|
E-->A
|
|
E-->F
|
|
F-->D
|
|
F-->G
|
|
B-->G
|
|
G-->D
|
|
|
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
graph TD
|
|
A[Christmas] ==> D
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
A[Christmas] ==> C
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
graph TD
|
|
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
A[Christmas] ==> D
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
A[Christmas] ==> C
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
flowchart TD
|
|
A[Christmas] ==> D
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
A[Christmas] ==> C
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
flowchart TD
|
|
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
A[Christmas] ==> D
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
A[Christmas] ==> C
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
flowchart LR
|
|
a["<strong>Haiya</strong>"]---->b
|
|
</pre>
|
|
<pre class="mermaid" style="">
|
|
flowchart LR
|
|
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
a["<strong>Haiya</strong>"]---->b
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
flowchart TD
|
|
A[Christmas] ==> D
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
A[Christmas] ==> C
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
flowchart TD
|
|
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
A[Christmas] ==> D
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
A[Christmas] ==> C
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
|
classDiagram-v2
|
|
Class01 <|-- AveryLongClass : Cool
|
|
<<interface>> Class01
|
|
Class03 *-- Class04
|
|
Class05 o-- Class06
|
|
Class07 .. Class08
|
|
Class09 --> C2 : Where am i?
|
|
Class09 --* C3
|
|
Class09 --|> Class07
|
|
Class12 <|.. Class08
|
|
Class11 ..>Class12
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
Class01 : -int privateChimp
|
|
Class01 : +int publicGorilla
|
|
Class01 : #int protectedMarmoset
|
|
Class08 <--> C2: Cool label
|
|
class Class10 {
|
|
<<service>>
|
|
int id
|
|
test()
|
|
}
|
|
</pre>
|
|
<pre class="mermaid2" style="">
|
|
classDiagram-v2
|
|
Class01 <|-- AveryLongClass : Cool
|
|
<<interface>> Class01
|
|
Class03 *-- Class04
|
|
Class05 o-- Class06
|
|
Class07 .. Class08
|
|
Class09 --> C2 : Where am i?
|
|
Class09 --* C3
|
|
Class09 --|> Class07
|
|
Class12 <|.. Class08
|
|
Class11 ..>Class12
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
Class01 : -int privateChimp
|
|
Class01 : +int publicGorilla
|
|
Class01 : #int protectedMarmoset
|
|
Class08 <--> C2: Cool label
|
|
class Class10 {
|
|
<<service>>
|
|
int id
|
|
test()
|
|
}
|
|
</pre>
|
|
<pre class="mermaid" style="">
|
|
flowchart BT
|
|
subgraph S1
|
|
sub1 -->sub2
|
|
end
|
|
subgraph S2
|
|
sub4
|
|
end
|
|
S1 --> S2
|
|
sub1 --> sub4
|
|
</pre>
|
|
</div>
|
|
<script src="./mermaid.js"></script>
|
|
<script>
|
|
mermaid.parseError = function (err, hash) {
|
|
// console.error('Mermaid error: ', err);
|
|
};
|
|
mermaid.initialize({
|
|
// theme: 'neutral',
|
|
// arrowMarkerAbsolute: true,
|
|
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
|
logLevel: 0,
|
|
flowchart: { curve: 'cardinal', htmlLabels: false },
|
|
// htmlLabels: true,
|
|
// gantt: { axisFormat: '%m/%d/%Y' },
|
|
// sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
|
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
|
// fontFamily: '"times", sans-serif',
|
|
fontFamily: 'courier',
|
|
// fontSize: 18,
|
|
// curve: 'cardinal',
|
|
securityLevel: 'loose',
|
|
// themeVariables: {relationLabelColor: 'red'}
|
|
});
|
|
function callback() {
|
|
alert('It worked');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|