Skip to content

Commit 027ea7f

Browse files
badboybadboy
committed
Enable Mermaid plugin
1 parent 0fb5ff1 commit 027ea7f

File tree

4 files changed

+384
-0
lines changed

4 files changed

+384
-0
lines changed

‎book.toml

+4
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,7 @@ title = "Firefox Data Documentation"
33

44
[build]
55
create-missing = false
6+
7+
[output.html]
8+
additional-css = ["mermaid.css"]
9+
additional-js = ["mermaid.min.js", "mermaid-init.js"]

‎mermaid-init.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
mermaid.initialize({startOnLoad:true});

‎mermaid.css

+351
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,351 @@
1+
/* Flowchart variables */
2+
/* Sequence Diagram variables */
3+
/* Gantt chart variables */
4+
.mermaid .mermaid .label {
5+
color: #333;
6+
}
7+
.mermaid .node rect,
8+
.mermaid .node circle,
9+
.mermaid .node ellipse,
10+
.mermaid .node polygon {
11+
fill: #ECECFF;
12+
stroke: #CCCCFF;
13+
stroke-width: 1px;
14+
}
15+
.mermaid .arrowheadPath {
16+
fill: #333333;
17+
}
18+
.mermaid .edgePath .path {
19+
stroke: #333333;
20+
}
21+
.mermaid .edgeLabel {
22+
background-color: #e8e8e8;
23+
}
24+
.mermaid .cluster rect {
25+
fill: #ffffde !important;
26+
rx: 4 !important;
27+
stroke: #aaaa33 !important;
28+
stroke-width: 1px !important;
29+
}
30+
.mermaid .cluster text {
31+
fill: #333;
32+
}
33+
.mermaid .actor {
34+
stroke: #CCCCFF;
35+
fill: #ECECFF;
36+
}
37+
.mermaid text.actor {
38+
fill: black;
39+
stroke: none;
40+
}
41+
.mermaid .actor-line {
42+
stroke: grey;
43+
}
44+
.mermaid .messageLine0 {
45+
stroke-width: 1.5;
46+
stroke-dasharray: "2 2";
47+
marker-end: "url(#arrowhead)";
48+
stroke: #333;
49+
}
50+
.mermaid .messageLine1 {
51+
stroke-width: 1.5;
52+
stroke-dasharray: "2 2";
53+
stroke: #333;
54+
}
55+
.mermaid #arrowhead {
56+
fill: #333;
57+
}
58+
.mermaid #crosshead path {
59+
fill: #333 !important;
60+
stroke: #333 !important;
61+
}
62+
.mermaid .messageText {
63+
fill: #333;
64+
stroke: none;
65+
}
66+
.mermaid .labelBox {
67+
stroke: #CCCCFF;
68+
fill: #ECECFF;
69+
}
70+
.mermaid .labelText {
71+
fill: black;
72+
stroke: none;
73+
}
74+
.mermaid .loopText {
75+
fill: black;
76+
stroke: none;
77+
}
78+
.mermaid .loopLine {
79+
stroke-width: 2;
80+
stroke-dasharray: "2 2";
81+
marker-end: "url(#arrowhead)";
82+
stroke: #CCCCFF;
83+
}
84+
.mermaid .note {
85+
stroke: #aaaa33;
86+
fill: #fff5ad;
87+
}
88+
.mermaid .noteText {
89+
fill: black;
90+
stroke: none;
91+
font-family: 'trebuchet ms', verdana, arial;
92+
font-size: 14px;
93+
}
94+
/** Section styling */
95+
.mermaid .section {
96+
stroke: none;
97+
opacity: 0.2;
98+
}
99+
.mermaid .section0 {
100+
fill: rgba(102, 102, 255, 0.49);
101+
}
102+
.mermaid .section2 {
103+
fill: #fff400;
104+
}
105+
.mermaid .section1,
106+
.mermaid .section3 {
107+
fill: white;
108+
opacity: 0.2;
109+
}
110+
.mermaid .sectionTitle0 {
111+
fill: #333;
112+
}
113+
.mermaid .sectionTitle1 {
114+
fill: #333;
115+
}
116+
.mermaid .sectionTitle2 {
117+
fill: #333;
118+
}
119+
.mermaid .sectionTitle3 {
120+
fill: #333;
121+
}
122+
.mermaid .sectionTitle {
123+
text-anchor: start;
124+
font-size: 11px;
125+
text-height: 14px;
126+
}
127+
/* Grid and axis */
128+
.mermaid .grid .tick {
129+
stroke: lightgrey;
130+
opacity: 0.3;
131+
shape-rendering: crispEdges;
132+
}
133+
.mermaid .grid path {
134+
stroke-width: 0;
135+
}
136+
/* Today line */
137+
.mermaid .today {
138+
fill: none;
139+
stroke: red;
140+
stroke-width: 2px;
141+
}
142+
/* Task styling */
143+
/* Default task */
144+
.mermaid .task {
145+
stroke-width: 2;
146+
}
147+
.mermaid .taskText {
148+
text-anchor: middle;
149+
font-size: 11px;
150+
}
151+
.mermaid .taskTextOutsideRight {
152+
fill: black;
153+
text-anchor: start;
154+
font-size: 11px;
155+
}
156+
.mermaid .taskTextOutsideLeft {
157+
fill: black;
158+
text-anchor: end;
159+
font-size: 11px;
160+
}
161+
/* Specific task settings for the sections*/
162+
.mermaid .taskText0,
163+
.mermaid .taskText1,
164+
.mermaid .taskText2,
165+
.mermaid .taskText3 {
166+
fill: white;
167+
}
168+
.mermaid .task0,
169+
.mermaid .task1,
170+
.mermaid .task2,
171+
.mermaid .task3 {
172+
fill: #8a90dd;
173+
stroke: #534fbc;
174+
}
175+
.mermaid .taskTextOutside0,
176+
.mermaid .taskTextOutside2 {
177+
fill: black;
178+
}
179+
.mermaid .taskTextOutside1,
180+
.mermaid .taskTextOutside3 {
181+
fill: black;
182+
}
183+
/* Active task */
184+
.mermaid .active0,
185+
.mermaid .active1,
186+
.mermaid .active2,
187+
.mermaid .active3 {
188+
fill: #bfc7ff;
189+
stroke: #534fbc;
190+
}
191+
.mermaid .activeText0,
192+
.mermaid .activeText1,
193+
.mermaid .activeText2,
194+
.mermaid .activeText3 {
195+
fill: black !important;
196+
}
197+
/* Completed task */
198+
.mermaid .done0,
199+
.mermaid .done1,
200+
.mermaid .done2,
201+
.mermaid .done3 {
202+
stroke: grey;
203+
fill: lightgrey;
204+
stroke-width: 2;
205+
}
206+
.mermaid .doneText0,
207+
.mermaid .doneText1,
208+
.mermaid .doneText2,
209+
.mermaid .doneText3 {
210+
fill: black !important;
211+
}
212+
/* Tasks on the critical line */
213+
.mermaid .crit0,
214+
.mermaid .crit1,
215+
.mermaid .crit2,
216+
.mermaid .crit3 {
217+
stroke: #ff8888;
218+
fill: red;
219+
stroke-width: 2;
220+
}
221+
.mermaid .activeCrit0,
222+
.mermaid .activeCrit1,
223+
.mermaid .activeCrit2,
224+
.mermaid .activeCrit3 {
225+
stroke: #ff8888;
226+
fill: #bfc7ff;
227+
stroke-width: 2;
228+
}
229+
.mermaid .doneCrit0,
230+
.mermaid .doneCrit1,
231+
.mermaid .doneCrit2,
232+
.mermaid .doneCrit3 {
233+
stroke: #ff8888;
234+
fill: lightgrey;
235+
stroke-width: 2;
236+
cursor: pointer;
237+
shape-rendering: crispEdges;
238+
}
239+
.mermaid .doneCritText0,
240+
.mermaid .doneCritText1,
241+
.mermaid .doneCritText2,
242+
.mermaid .doneCritText3 {
243+
fill: black !important;
244+
}
245+
.mermaid .activeCritText0,
246+
.mermaid .activeCritText1,
247+
.mermaid .activeCritText2,
248+
.mermaid .activeCritText3 {
249+
fill: black !important;
250+
}
251+
.mermaid .titleText {
252+
text-anchor: middle;
253+
font-size: 18px;
254+
fill: black;
255+
}
256+
.mermaid g.classGroup text {
257+
fill: #9370DB;
258+
stroke: none;
259+
font-family: 'trebuchet ms', verdana, arial;
260+
font-size: 10px;
261+
}
262+
.mermaid g.classGroup rect {
263+
fill: #ECECFF;
264+
stroke: #9370DB;
265+
}
266+
.mermaid g.classGroup line {
267+
stroke: #9370DB;
268+
stroke-width: 1;
269+
}
270+
.mermaid svg .classLabel .box {
271+
stroke: none;
272+
stroke-width: 0;
273+
fill: #ECECFF;
274+
opacity: 0.5;
275+
}
276+
.mermaid svg .classLabel .label {
277+
fill: #9370DB;
278+
font-size: 10px;
279+
}
280+
.mermaid .relation {
281+
stroke: #9370DB;
282+
stroke-width: 1;
283+
fill: none;
284+
}
285+
.mermaid .composition {
286+
fill: #9370DB;
287+
stroke: #9370DB;
288+
stroke-width: 1;
289+
}
290+
.mermaid #compositionStart {
291+
fill: #9370DB;
292+
stroke: #9370DB;
293+
stroke-width: 1;
294+
}
295+
.mermaid #compositionEnd {
296+
fill: #9370DB;
297+
stroke: #9370DB;
298+
stroke-width: 1;
299+
}
300+
.mermaid .aggregation {
301+
fill: #ECECFF;
302+
stroke: #9370DB;
303+
stroke-width: 1;
304+
}
305+
.mermaid #aggregationStart {
306+
fill: #ECECFF;
307+
stroke: #9370DB;
308+
stroke-width: 1;
309+
}
310+
.mermaid #aggregationEnd {
311+
fill: #ECECFF;
312+
stroke: #9370DB;
313+
stroke-width: 1;
314+
}
315+
.mermaid #dependencyStart {
316+
fill: #9370DB;
317+
stroke: #9370DB;
318+
stroke-width: 1;
319+
}
320+
.mermaid #dependencyEnd {
321+
fill: #9370DB;
322+
stroke: #9370DB;
323+
stroke-width: 1;
324+
}
325+
.mermaid #extensionStart {
326+
fill: #9370DB;
327+
stroke: #9370DB;
328+
stroke-width: 1;
329+
}
330+
.mermaid #extensionEnd {
331+
fill: #9370DB;
332+
stroke: #9370DB;
333+
stroke-width: 1;
334+
}
335+
.mermaid .node text {
336+
font-family: 'trebuchet ms', verdana, arial;
337+
font-size: 14px;
338+
}
339+
.mermaid div.mermaidTooltip {
340+
position: absolute;
341+
text-align: center;
342+
max-width: 200px;
343+
padding: 2px;
344+
font-family: 'trebuchet ms', verdana, arial;
345+
font-size: 12px;
346+
background: #ffffde;
347+
border: 1px solid #aaaa33;
348+
border-radius: 2px;
349+
pointer-events: none;
350+
z-index: 100;
351+
}

‎mermaid.min.js

+28
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)