UNPKG

6.17 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
8 <script>
9 function xss(x){
10 alert(x + ' cause an xss attack');
11 }
12</script>
13<style>
14.label text { fill: red}
15</style>
16</head>
17<body>
18 <div class="mermaid">
19 info
20 </div>
21 <div class="mermaid">
22 graph LR;
23 alert`xss`-->B;
24 click B "javaSc
25ript:alert`salt`" "This is a tooltip for a link"
26 </div>
27 <div class="mermaid">
28 graph LR;
29 alert`xss`-->B;
30 click B "java
31script:alert`xss`" "This is a tooltip for a link"
32 </div>
33 <div class="mermaid">
34 graph LR;
35 alert`base64`-->B;
36 click B "data:image/png;base64,HNjcmlwdD5hbGVydCgiSGVsbG8iKTs8L3NjcmlwdD4="
37 </div>
38 <img src=xss.png />
39 <div class="mermaid">
40 graph TD
41 A["<strong>If bold then xss</strong>Christmas"] -->|Get <strong>If bold then xss</strong> money| B(Go <strong>If bold then xss</strong> shopping)
42 B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br />sssssssssssssssssssssssssss}
43 C -->|One| D[Laptop]
44 C -->|Two| E[iPhone]
45 C -->|Three| F[Car]
46 </div>
47 <div class="mermaid">
48graph TB
49 subgraph "<strong>If bold then xss</strong>"
50 a1-->a2
51 end
52 </div>
53 <div class="mermaid">
54graph TD
55A[Click on] -->|Get happines| BBBB(Clickable)
56BBBB --> C{Let me think}
57C -->|One| D[Laptop]
58C -->|Two| E[iPhone]
59C -->|Three| F[Car]
60click A "http://localhost:9000/index.html#link-clicked" "link test"
61click BBBB testClick "click test"
62click C "javascript:alert" "link test"
63classDef someclass fill:#f96;
64class A someclass;
65 </div>
66 <div class="mermaid">
67 graph LR;
68 alert`md5_salt`-->B;
69 click alert`md5_salt` eval "Tooltip for a callback"
70 click B "javascript:alert`salt`" "This is a tooltip for a link"
71 </div>
72 <div class="mermaid">
73 gantt
74 dateFormat YYYY-MM-DD
75 axisFormat %d/%m
76 title Adding GANTT diagram to mermaid
77 excludes weekdays 2014-01-10
78
79 section A section
80 Completed task :done, des1, 2014-01-06,2014-01-08
81 Active task :active, des2, 2014-01-09, 3d
82 Future task : des3, after des2, 5d
83 Future task2 : des4, after des3, 5d
84
85 section Critical tasks
86 Completed task in the critical line :crit, done, 2014-01-06,24h
87 Implement parser and jison :crit, done, after des1, 2d
88 Create tests for parser :crit, active, 3d
89 Future task in critical line :crit, 5d
90 Create tests for renderer :2d
91 Add to mermaid :1d
92
93 section Documentation
94 Describe gantt syntax :active, a1, after des1, 3d
95 Add gantt diagram to demo page :after a1 , 20h
96 Add another diagram to demo page :doc1, after a1 , 48h
97
98 section Clickable
99 Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
100 Calling a Callback (look at the console log) :cl2, after cl1, 3d
101
102 click cl1 href "javascript:alert`salt`"
103 click cl2 call ganttTestClick("test", test, test)
104
105 section Last section
106 Describe gantt syntax :after doc1, 3d
107 Add gantt diagram to demo page : 20h
108 Add another diagram to demo page : 48h
109 </div>
110 <div class="mermaid">
111sequenceDiagram
112participant "Alice"
113participant Bob
114participant John as John<br/>Second Line
115Alice ->> Bob: Hello Bob, how are you?
116Bob-->>John: How about you <strong>If bold then xss</strong>John?
117Bob--x Alice: I am good thanks!
118Bob-x John: I am good thanks!
119Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
120Bob-->Alice: Checking with John...
121alt either this
122Alice->>John: Yes
123else or this
124Alice->>John: No
125else or this will happen
126Alice->John: Maybe
127end
128par this happens in parallel
129Alice -->> Bob: Parallel message 1
130and
131Alice -->> John: Parallel message 2
132end
133 </div>
134
135 <div class="mermaid">
136classDiagram
137Class01 <|-- AveryLongClass : Co<strong>If bold then xss</strong>ol
138Class03 "0" *-- "0..n" Class04
139Class05 "1" o-- "many" Class06
140Class07 .. Class08
141Class09 "many" --> "1" C2 : Where am i?
142Class09 "0" --* "1..n" C3
143Class09 --|> Class07
144Class07 : equals()
145Class07 : Object[] elementData
146Class01 : size()
147Class01 : int chimp
148Class01 : int gorilla
149Class08 <--> C2: Cool label
150 </div>
151 <div class="mermaid">
152 graph LR
153
154 SavePropertyController --> SavePropertyCommand
155 SavePropertyCommand --> SavePropertyCommandHandler
156 SavePropertyCommandHandler --> EventElastica[elastica.postupdate]
157 SavePropertyCommandHandler --> EventProperty[property.postdisable]
158
159 SavePropertyController --> Exceptions
160 Exceptions --> ExceptionList(SecurityException<br/>EmptyRequestBodyException<br/>Throwable)
161
162 classDef Ui fill:#FFFFFF
163 classDef object fill:#1E98EC
164 classDef event fill:#ECB11E
165
166 class EventElastica,EventProperty event
167 class SavePropertyCommand,SavePropertyCommandHandler object
168 class SavePropertyController Ui
169 </div>
170
171 <script src="./mermaid.js"></script>
172 <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.2.1/dist/mermaid.min.js"></script> -->
173 <script>
174 mermaid.initialize({
175 theme: 'forest',
176 // themeCSS: '.node rect { fill: red; }',
177 logLevel: 4,
178 flowchart: { htmlLabels: false, curve: 'linear' },
179 gantt: { axisFormat: '%m/%d/%Y' },
180 sequence: { actorMargin: 50 },
181 // sequenceDiagram: { actorMargin: 300 } // deprecated
182 securityLevel:'strict',
183
184 });
185 </script>
186 <script>
187 function ganttTestClick(a, b, c){
188 console.log("a:", a)
189 console.log("b:", b)
190 console.log("c:", c)
191 }
192 function testClick(nodeId) {
193 console.log("clicked", nodeId)
194 var originalBgColor = document.querySelector('body').style.backgroundColor
195 document.querySelector('body').style.backgroundColor = 'yellow'
196 setTimeout(function() {
197 document.querySelector('body').style.backgroundColor = originalBgColor
198 }, 100)
199 }
200 </script>
201</body>
202</html>