Skip to content

Commit b49d4e2

Browse files
jackycutejackycute
committed
Support mermaid in code block diagram and updated all diagram rendering method and styles
1 parent c43f978 commit b49d4e2

10 files changed

Lines changed: 354 additions & 23 deletions

File tree

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"markdown-it-mark": "^2.0.0",
4444
"markdown-it-ins": "^2.0.0",
4545
"markdown-it-sub": "^1.0.0",
46-
"markdown-it-sup": "^1.0.0"
46+
"markdown-it-sup": "^1.0.0",
47+
"mermaid": "^0.5.8"
4748
}
4849
}

‎public/css/html.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/css/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ body {
128128
overflow-y: auto;
129129
}
130130
.ui-status * {
131-
font-size: 16px;
131+
font-size: 16px !important;
132132
}
133133
.navbar-brand {
134134
font-weight: bold;

‎public/css/markdown.css‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -82,13 +82,6 @@
8282
content: ''
8383
}
8484

85-
.markdown-body .sequence-diagram, .markdown-body .flow-chart {
86-
text-align: center;
87-
}
88-
.markdown-body .flow-chart {
89-
margin-bottom: 40px;
90-
}
91-
9285
/*fixed style for rtl in pre and code*/
9386

9487
.markdown-body[dir='rtl'] pre {
@@ -100,7 +93,27 @@
10093
unicode-bidi: embed;
10194
}
10295

103-
svg {
104-
width: 100%;
105-
max-height: 70vh;
106-
}
96+
.markdown-body pre.flow-chart,
97+
.markdown-body pre.sequence-diagram,
98+
.markdown-body pre.graphviz,
99+
.markdown-body pre.mermaid {
100+
text-align: center;
101+
background-color: inherit;
102+
border-radius: 0;
103+
white-space: inherit;
104+
}
105+
106+
.markdown-body pre.flow-chart > code,
107+
.markdown-body pre.sequence-diagram > code,
108+
.markdown-body pre.graphviz > code,
109+
.markdown-body pre.mermaid > code {
110+
text-align: left;
111+
}
112+
113+
.markdown-body pre.flow-chart > svg,
114+
.markdown-body pre.sequence-diagram > svg,
115+
.markdown-body pre.graphviz > svg,
116+
.markdown-body pre.mermaid > svg {
117+
max-width: 100%;
118+
height: 100%;
119+
}

‎public/css/mermaid.css‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
/* Flowchart variables */
2+
/* Sequence Diagram variables */
3+
/* Gantt chart variables */
4+
.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 .edgePath .path {
16+
stroke: #333333;
17+
}
18+
.mermaid .edgeLabel {
19+
background-color: #e8e8e8;
20+
}
21+
.mermaid .cluster rect {
22+
fill: #ffffde !important;
23+
rx: 4 !important;
24+
stroke: #aaaa33 !important;
25+
stroke-width: 1px !important;
26+
}
27+
.mermaid .cluster text {
28+
fill: #333;
29+
}
30+
.mermaid .actor {
31+
stroke: #CCCCFF;
32+
fill: #ECECFF;
33+
}
34+
.mermaid text.actor {
35+
fill: black;
36+
stroke: none;
37+
}
38+
.mermaid .actor-line {
39+
stroke: grey;
40+
}
41+
.mermaid .messageLine0 {
42+
stroke-width: 1.5;
43+
stroke-dasharray: "2 2";
44+
marker-end: "url(#arrowhead)";
45+
stroke: #333;
46+
}
47+
.mermaid .messageLine1 {
48+
stroke-width: 1.5;
49+
stroke-dasharray: "2 2";
50+
stroke: #333;
51+
}
52+
.mermaid #arrowhead {
53+
fill: #333;
54+
}
55+
.mermaid #crosshead path {
56+
fill: #333 !important;
57+
stroke: #333 !important;
58+
}
59+
.mermaid .messageText {
60+
fill: #333;
61+
stroke: none;
62+
}
63+
.mermaid .labelBox {
64+
stroke: #CCCCFF;
65+
fill: #ECECFF;
66+
}
67+
.mermaid .labelText {
68+
fill: black;
69+
stroke: none;
70+
}
71+
.mermaid .loopText {
72+
fill: black;
73+
stroke: none;
74+
}
75+
.mermaid .loopLine {
76+
stroke-width: 2;
77+
stroke-dasharray: "2 2";
78+
marker-end: "url(#arrowhead)";
79+
stroke: #CCCCFF;
80+
}
81+
.mermaid .note {
82+
stroke: #aaaa33;
83+
fill: #fff5ad;
84+
}
85+
.mermaid .noteText {
86+
fill: black;
87+
stroke: none;
88+
font-family: 'trebuchet ms', verdana, arial;
89+
font-size: 14px;
90+
}
91+
/** Section styling */
92+
.mermaid .section {
93+
stroke: none;
94+
opacity: 0.2;
95+
}
96+
.mermaid .section0 {
97+
fill: rgba(102, 102, 255, 0.49);
98+
}
99+
.mermaid .section2 {
100+
fill: #fff400;
101+
}
102+
.mermaid .section1,
103+
.mermaid .section3 {
104+
fill: white;
105+
opacity: 0.2;
106+
}
107+
.mermaid .sectionTitle0 {
108+
fill: #333;
109+
}
110+
.mermaid .sectionTitle1 {
111+
fill: #333;
112+
}
113+
.mermaid .sectionTitle2 {
114+
fill: #333;
115+
}
116+
.mermaid .sectionTitle3 {
117+
fill: #333;
118+
}
119+
.mermaid .sectionTitle {
120+
text-anchor: start;
121+
font-size: 11px;
122+
text-height: 14px;
123+
}
124+
/* Grid and axis */
125+
.mermaid .grid .tick {
126+
stroke: lightgrey;
127+
opacity: 0.3;
128+
shape-rendering: crispEdges;
129+
}
130+
.mermaid .grid path {
131+
stroke-width: 0;
132+
}
133+
/* Today line */
134+
.mermaid .today {
135+
fill: none;
136+
stroke: red;
137+
stroke-width: 2px;
138+
}
139+
/* Task styling */
140+
/* Default task */
141+
.mermaid .task {
142+
stroke-width: 2;
143+
}
144+
.mermaid .taskText {
145+
text-anchor: middle;
146+
font-size: 11px;
147+
}
148+
.mermaid .taskTextOutsideRight {
149+
fill: black;
150+
text-anchor: start;
151+
font-size: 11px;
152+
}
153+
.mermaid .taskTextOutsideLeft {
154+
fill: black;
155+
text-anchor: end;
156+
font-size: 11px;
157+
}
158+
/* Specific task settings for the sections*/
159+
.mermaid .taskText0,
160+
.mermaid .taskText1,
161+
.mermaid .taskText2,
162+
.mermaid .taskText3 {
163+
fill: white;
164+
}
165+
.mermaid .task0,
166+
.mermaid .task1,
167+
.mermaid .task2,
168+
.mermaid .task3 {
169+
fill: #8a90dd;
170+
stroke: #534fbc;
171+
}
172+
.mermaid .taskTextOutside0,
173+
.mermaid .taskTextOutside2 {
174+
fill: black;
175+
}
176+
.mermaid .taskTextOutside1,
177+
.mermaid .taskTextOutside3 {
178+
fill: black;
179+
}
180+
/* Active task */
181+
.mermaid .active0,
182+
.mermaid .active1,
183+
.mermaid .active2,
184+
.mermaid .active3 {
185+
fill: #bfc7ff;
186+
stroke: #534fbc;
187+
}
188+
.mermaid .activeText0,
189+
.mermaid .activeText1,
190+
.mermaid .activeText2,
191+
.mermaid .activeText3 {
192+
fill: black !important;
193+
}
194+
/* Completed task */
195+
.mermaid .done0,
196+
.mermaid .done1,
197+
.mermaid .done2,
198+
.mermaid .done3 {
199+
stroke: grey;
200+
fill: lightgrey;
201+
stroke-width: 2;
202+
}
203+
.mermaid .doneText0,
204+
.mermaid .doneText1,
205+
.mermaid .doneText2,
206+
.mermaid .doneText3 {
207+
fill: black !important;
208+
}
209+
/* Tasks on the critical line */
210+
.mermaid .crit0,
211+
.mermaid .crit1,
212+
.mermaid .crit2,
213+
.mermaid .crit3 {
214+
stroke: #ff8888;
215+
fill: red;
216+
stroke-width: 2;
217+
}
218+
.mermaid .activeCrit0,
219+
.mermaid .activeCrit1,
220+
.mermaid .activeCrit2,
221+
.mermaid .activeCrit3 {
222+
stroke: #ff8888;
223+
fill: #bfc7ff;
224+
stroke-width: 2;
225+
}
226+
.mermaid .doneCrit0,
227+
.mermaid .doneCrit1,
228+
.mermaid .doneCrit2,
229+
.mermaid .doneCrit3 {
230+
stroke: #ff8888;
231+
fill: lightgrey;
232+
stroke-width: 2;
233+
cursor: pointer;
234+
shape-rendering: crispEdges;
235+
}
236+
.mermaid .doneCritText0,
237+
.mermaid .doneCritText1,
238+
.mermaid .doneCritText2,
239+
.mermaid .doneCritText3 {
240+
fill: black !important;
241+
}
242+
.mermaid .activeCritText0,
243+
.mermaid .activeCritText1,
244+
.mermaid .activeCritText2,
245+
.mermaid .activeCritText3 {
246+
fill: black !important;
247+
}
248+
.mermaid .titleText {
249+
text-anchor: middle;
250+
font-size: 18px;
251+
fill: black;
252+
}
253+
/*
254+
255+
256+
*/
257+
.mermaid .node text {
258+
font-family: 'trebuchet ms', verdana, arial;
259+
font-size: 14px;
260+
}
261+
.mermaid div.mermaidTooltip {
262+
position: absolute;
263+
text-align: center;
264+
max-width: 200px;
265+
padding: 2px;
266+
font-family: 'trebuchet ms', verdana, arial;
267+
font-size: 12px;
268+
background: #ffffde;
269+
border: 1px solid #aaaa33;
270+
border-radius: 2px;
271+
pointer-events: none;
272+
z-index: 100;
273+
}

0 commit comments

Comments
 (0)