forked from mermaid-js/mermaid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweb_style_html_label.html
145 lines (129 loc) · 4.8 KB
/
web_style_html_label.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
labelStyle:'hmtl'
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</div>
</body>
</html>