-
Notifications
You must be signed in to change notification settings - Fork 1
/
flow.html
97 lines (82 loc) · 3.36 KB
/
flow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>胡思乱想的博客主页-github by caozhilong</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/mermaid.forest.min.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">胡思乱想的博客主页-github</h1>
<h2 class="project-tagline">我的博客主页</h2>
</section>
<section class="normal markdown-section">
<h1 id="demos">Demos</h1>
<h2 id="basic-sequence-diagram">Basic sequence diagram</h2>
<pre><code class="lang-mermaid">sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
</code></pre>
<h2 id="basic-flowchart">Basic flowchart</h2>
<pre><code class="lang-mermaid">graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
</code></pre>
<h2 id="larger-flowchart-with-some-styling">Larger flowchart with some styling</h2>
<pre><code class="lang-mermaid">graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A subgraph
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
</code></pre>
<h2 id="loops-alt-and-opt">Loops, alt and opt</h2>
<pre><code class="lang-mermaid">sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
</code></pre>
<h2 id="message-to-self-in-loop">Message to self in loop</h2>
<pre><code class="lang-mermaid">sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
</code></pre>
</section>
</body>
<script src="/assets/js/mermaid.min.js"></script>
<script src="/assets/js/index.js"></script>
</html>