Skip to content

Commit 462852b

Browse files
MpdreamzMpdreamz
committed
stage
1 parent 2088fc6 commit 462852b

File tree

8 files changed

+1102
-26
lines changed

8 files changed

+1102
-26
lines changed

‎docs/syntax/diagrams.md‎

Lines changed: 115 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,122 @@ D <--> J[JATS]
4343
:::::
4444

4545

46+
## Sequence Diagram
47+
4648

4749
```mermaid
48-
flowchart LR
49-
A[Jupyter Notebook] --> C
50-
B[MyST Markdown] --> C
51-
C(mystmd) --> D{AST}
52-
D <--> E[LaTeX]
53-
E --> F[PDF]
54-
D --> G[Word]
55-
D --> H[React]
56-
D --> I[HTML]
57-
D <--> J[JATS]
50+
sequenceDiagram
51+
participant Alice
52+
participant Bob
53+
Alice->>John: Hello John, how are you?
54+
loop HealthCheck
55+
John->>John: Fight against hypochondria
56+
end
57+
Note right of John: Rational thoughts <br/>prevail!
58+
John-->>Alice: Great!
59+
John->>Bob: How about you?
60+
Bob-->>John: Jolly good!
61+
```
62+
63+
## Gant charts
64+
65+
```mermaid
66+
gantt
67+
dateFormat YYYY-MM-DD
68+
title Adding GANTT diagram to mermaid
69+
excludes weekdays 2014-01-10
70+
71+
section A section
72+
Completed task :done, des1, 2014-01-06,2014-01-08
73+
Active task :active, des2, 2014-01-09, 3d
74+
Future task : des3, after des2, 5d
75+
Future task2 : des4, after des3, 5d
76+
```
77+
78+
## Class Diagram
79+
80+
```mermaid
81+
classDiagram
82+
Class01 <|-- AveryLongClass : Cool
83+
Class03 *-- Class04
84+
Class05 o-- Class06
85+
Class07 .. Class08
86+
Class09 --> C2 : Where am i?
87+
Class09 --* C3
88+
Class09 --|> Class07
89+
Class07 : equals()
90+
Class07 : Object[] elementData
91+
Class01 : size()
92+
Class01 : int chimp
93+
Class01 : int gorilla
94+
Class08 <--> C2: Cool label
5895
```
5996

97+
## Git Graph
98+
99+
```mermaid
100+
gitGraph
101+
commit
102+
commit
103+
branch develop
104+
commit
105+
commit
106+
commit
107+
checkout main
108+
commit
109+
commit
110+
```
111+
112+
113+
## Entity Relation Diagram
114+
115+
```mermaid
116+
erDiagram
117+
CUSTOMER ||--o{ ORDER : places
118+
ORDER ||--|{ LINE-ITEM : contains
119+
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
120+
```
121+
122+
## User Journey
123+
124+
```mermaid
125+
journey
126+
title My working day
127+
section Go to work
128+
Make tea: 5: Me
129+
Go upstairs: 3: Me
130+
Do work: 1: Me, Cat
131+
section Go home
132+
Go downstairs: 5: Me
133+
Sit down: 5: Me
134+
```
135+
136+
## Quadrant Chart
137+
138+
```mermaid
139+
quadrantChart
140+
title Reach and engagement of campaigns
141+
x-axis Low Reach --> High Reach
142+
y-axis Low Engagement --> High Engagement
143+
quadrant-1 We should expand
144+
quadrant-2 Need to promote
145+
quadrant-3 Re-evaluate
146+
quadrant-4 May be improved
147+
Campaign A: [0.3, 0.6]
148+
Campaign B: [0.45, 0.23]
149+
Campaign C: [0.57, 0.69]
150+
Campaign D: [0.78, 0.34]
151+
Campaign E: [0.40, 0.34]
152+
Campaign F: [0.35, 0.78]
153+
```
154+
155+
## XY Chart
156+
157+
```mermaid
158+
xychart-beta
159+
title "Sales Revenue"
160+
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
161+
y-axis "Revenue (in $)" 4000 --> 11000
162+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
163+
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
164+
```

‎src/Elastic.Markdown/Assets/main.ts‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
import { initCopyButton } from './copybutton'
2-
import { initDismissibleBanner } from './dismissible-banner'
3-
import { initHighlight } from './hljs'
4-
import { openDetailsWithAnchor } from './open-details-with-anchor'
5-
import { initNav } from './pages-nav'
6-
import { initSmoothScroll } from './smooth-scroll'
7-
import { initTabs } from './tabs'
8-
import { initTocNav } from './toc-nav'
1+
import {initCopyButton} from './copybutton'
2+
import {initDismissibleBanner} from './dismissible-banner'
3+
import {initHighlight} from './hljs'
4+
import {openDetailsWithAnchor} from './open-details-with-anchor'
5+
import {initNav} from './pages-nav'
6+
import {initSmoothScroll} from './smooth-scroll'
7+
import {initTabs} from './tabs'
8+
import {initTocNav} from './toc-nav'
99
import 'htmx-ext-head-support'
1010
import 'htmx-ext-preload'
1111
import 'htmx.org'
12-
import { $, $$ } from 'select-dom'
13-
import { UAParser } from 'ua-parser-js'
12+
import {$, $$} from 'select-dom'
13+
import {UAParser} from 'ua-parser-js'
14+
import mermaid from 'mermaid'
1415

15-
const { getOS } = new UAParser()
16+
const {getOS} = new UAParser()
1617

1718
document.addEventListener('htmx:load', function () {
1819
initTocNav()
@@ -23,6 +24,25 @@ document.addEventListener('htmx:load', function () {
2324
initSmoothScroll()
2425
openDetailsWithAnchor()
2526
initDismissibleBanner()
27+
mermaid.initialize({
28+
startOnLoad: true, theme: 'base',
29+
themeVariables: {
30+
fontFamily: 'inherit',
31+
altFontFamily: 'inherit',
32+
fontSize: '0.875em',
33+
primaryColor: 'var(--color-purple-50)',
34+
primaryBorderColor: 'var(--color-purple-100)'
35+
},
36+
fontFamily: 'inherit', altFontFamily: 'inherit',
37+
"sequence": {
38+
"actorFontFamily": "inherit",
39+
"noteFontFamily": "inherit",
40+
"messageFontFamily": "inherit"
41+
},
42+
"journey": {
43+
"taskFontFamily": "inherit"
44+
}
45+
})
2646
})
2747

2848
// Don't remove style tags because they are used by the elastic global nav.
@@ -38,9 +58,9 @@ document.addEventListener('htmx:beforeRequest', function (event) {
3858
event.detail.requestConfig.verb === 'get' &&
3959
event.detail.requestConfig.triggeringEvent
4060
) {
41-
const { ctrlKey, metaKey, shiftKey }: PointerEvent =
61+
const {ctrlKey, metaKey, shiftKey}: PointerEvent =
4262
event.detail.requestConfig.triggeringEvent
43-
const { name: os } = getOS()
63+
const {name: os} = getOS()
4464
const modifierKey: boolean = os === 'macOS' ? metaKey : ctrlKey
4565
if (shiftKey || modifierKey) {
4666
event.preventDefault()

‎src/Elastic.Markdown/Assets/markdown/mermaid.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.mermaid {
2+
@apply bg-grey-10 border-grey-20 rounded-xs border-1 font-mono;
3+
4+
font-size: 0.875em !important;
5+
6+
.nodeLabel {
7+
@apply font-mono;
8+
font-size: 0.875em !important;
9+
}
10+
.labelText {
11+
@apply font-mono;
12+
font-size: 0.875em !important;
13+
}
14+
.loopText {
15+
@apply font-mono;
16+
font-size: 0.875em !important;
17+
}
18+
.noteText {
19+
@apply font-mono;
20+
font-size: 0.875em !important;
21+
}
22+
.messageText {
23+
@apply font-mono;
24+
font-size: 0.875em !important;
25+
}
26+
text.actor {
27+
@apply font-mono;
28+
font-size: 0.875em !important;
29+
}
30+
.actor {
31+
stroke: var(--color-blue-elastic-50);
32+
fill: var(--color-blue-elastic-10);
33+
}
34+
text.actor {
35+
fill: var(--color-ink-dark);
36+
stroke: none;
37+
@apply font-mono;
38+
font-size: 0.875em !important;
39+
}
40+
41+
.actor-line {
42+
stroke: var(--color-grey-70);
43+
}
44+
45+
.messageLine0 {
46+
stroke-width: 1.5;
47+
stroke: black;
48+
}
49+
50+
.messageLine1 {
51+
stroke-width: 1.5;
52+
stroke: var(--color-ink-dark);
53+
}
54+
55+
#arrowhead {
56+
fill: var(--color-ink-dark);
57+
}
58+
59+
.messageText {
60+
fill: var(--color-ink-dark);
61+
stroke: none;
62+
@apply font-mono;
63+
font-size: 1em;
64+
}
65+
66+
.labelBox {
67+
stroke: #ccccff;
68+
fill: #ececff;
69+
}
70+
71+
.labelText {
72+
fill: var(--color-ink-dark);
73+
stroke: none;
74+
@apply font-mono;
75+
}
76+
77+
.loopText {
78+
fill: var(--color-ink-dark);
79+
stroke: none;
80+
font-size: 1em;
81+
}
82+
.note {
83+
fill: var(--color-yellow-10) !important;
84+
stroke: var(--color-yellow-50) !important;
85+
font-size: 1em !important;
86+
}
87+
}

‎src/Elastic.Markdown/Assets/styles.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import './markdown/list.css';
66
@import './markdown/tabs.css';
77
@import './markdown/code.css';
8+
@import './markdown/mermaid.css';
89
@import './copybutton.css';
910
@import './markdown/admonition.css';
1011
@import './markdown/dropdown.css';

‎src/Elastic.Markdown/Slices/Layout/_Footer.cshtml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,3 @@
3434
</footer>
3535

3636
<script src="@Model.Static("main.js")"></script>
37-
<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
38-
<script>mermaid.initialize({startOnLoad:true});</script>

‎src/Elastic.Markdown/Slices/_Layout.cshtml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,5 @@
8080
</div>
8181
</aside>
8282
}
83-
<script>mermaid.initialize({startOnLoad:true});</script>
8483
</body>
8584
</html>

0 commit comments

Comments
 (0)