Skip to content

Commit 148c1ec

Browse files
RunDevelopmentRunDevelopment
authored
Added support for Mermaid (#3050)
1 parent 8df825e commit 148c1ec

14 files changed

+2922
-1
lines changed

‎components.js

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

‎components.json

+4
Original file line numberDiff line numberDiff line change
@@ -803,6 +803,10 @@
803803
"title": "MEL",
804804
"owner": "Golmote"
805805
},
806+
"mermaid": {
807+
"title": "Mermaid",
808+
"owner": "RunDevelopment"
809+
},
806810
"mizar": {
807811
"title": "Mizar",
808812
"owner": "Golmote"

‎components/prism-mermaid.js

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
Prism.languages.mermaid = {
2+
'comment': {
3+
pattern: /%%.*/,
4+
greedy: true
5+
},
6+
7+
'style': {
8+
pattern: /^([ \t]*(?:classDef|linkStyle|style)[ \t]+[\w$-]+[ \t]+)\w.*[^\s;]/m,
9+
lookbehind: true,
10+
inside: {
11+
'property': /\b\w[\w-]*(?=[ \t]*:)/,
12+
'operator': /:/,
13+
'punctuation': /,/
14+
}
15+
},
16+
17+
'inter-arrow-label': {
18+
pattern: /([^<>ox.=-])(?:-[-.]|==)(?![<>ox.=-])[ \t]*(?:"[^"\r\n]*"|[^\s".=-](?:[^\r\n.=-]*[^\s.=-])?)[ \t]*(?:\.+->?|--+[->]|==+[=>])(?![<>ox.=-])/,
19+
lookbehind: true,
20+
greedy: true,
21+
inside: {
22+
'arrow': {
23+
pattern: /(?:\.+->?|--+[->]|==+[=>])$/,
24+
alias: 'operator'
25+
},
26+
'label': {
27+
pattern: /^([\s\S]{2}[ \t]*)\S(?:[\s\S]*\S)?/,
28+
lookbehind: true,
29+
alias: 'property'
30+
},
31+
'arrow-head': {
32+
pattern: /^\S+/,
33+
alias: ['arrow', 'operator']
34+
}
35+
}
36+
},
37+
38+
'arrow': [
39+
// This might look complex but it really isn't.
40+
// There are many possible arrows (see tests) and it's impossible to fit all of them into one pattern. The
41+
// problem is that we only have one lookbehind per pattern. However, we cannot disallow too many arrow
42+
// characters in the one lookbehind because that would create too many false negatives. So we have to split the
43+
// arrows into different patterns.
44+
{
45+
// ER diagram
46+
pattern: /(^|[^{}|o.-])[|}][|o](?:--|\.\.)[|o][|{](?![{}|o.-])/,
47+
lookbehind: true,
48+
alias: 'operator'
49+
},
50+
{
51+
// flow chart
52+
// (?:==+|--+|-\.*-)
53+
pattern: /(^|[^<>ox.=-])(?:[<ox](?:==+|--+|-\.*-)[>ox]?|(?:==+|--+|-\.*-)[>ox]|===+|---+|-\.+-)(?![<>ox.=-])/,
54+
lookbehind: true,
55+
alias: 'operator'
56+
},
57+
{
58+
// sequence diagram
59+
pattern: /(^|[^<>()x-])(?:--?(?:>>|[x>)])(?![<>()x])|(?:<<|[x<(])--?(?!-))/,
60+
lookbehind: true,
61+
alias: 'operator'
62+
},
63+
{
64+
// class diagram
65+
pattern: /(^|[^<>|*o.-])(?:[*o]--|--[*o]|<\|?(?:--|\.\.)|(?:--|\.\.)\|?>|--|\.\.)(?![<>|*o.-])/,
66+
lookbehind: true,
67+
alias: 'operator'
68+
},
69+
],
70+
71+
'label': {
72+
pattern: /(^|[^|<])\|(?:[^\r\n"|]|"[^"\r\n]*")+\|/,
73+
lookbehind: true,
74+
greedy: true,
75+
alias: 'property'
76+
},
77+
78+
'text': {
79+
pattern: /(?:[(\[{]+|\b>)(?:[^\r\n"()\[\]{}]|"[^"\r\n]*")+(?:[)\]}]+|>)/,
80+
alias: 'string'
81+
},
82+
'string': {
83+
pattern: /"[^"\r\n]*"/,
84+
greedy: true
85+
},
86+
87+
'annotation': {
88+
pattern: /<<(?:abstract|choice|enumeration|fork|interface|join|service)>>|\[\[(?:choice|fork|join)\]\]/i,
89+
alias: 'important'
90+
},
91+
92+
'keyword': [
93+
// This language has both case-sensitive and case-insensitive keywords
94+
{
95+
pattern: /(^[ \t]*)(?:action|callback|class|classDef|classDiagram|click|direction|erDiagram|flowchart|gantt|gitGraph|graph|journey|link|linkStyle|pie|requirementDiagram|sequenceDiagram|stateDiagram|stateDiagram-v2|style|subgraph)(?![\w$-])/m,
96+
lookbehind: true,
97+
greedy: true
98+
},
99+
{
100+
pattern: /(^[ \t]*)(?:activate|alt|and|as|autonumber|deactivate|else|end(?:[ \t]+note)?|loop|opt|par|participant|rect|state|note[ \t]+(?:over|(?:left|right)[ \t]+of))(?![\w$-])/im,
101+
lookbehind: true,
102+
greedy: true
103+
}
104+
],
105+
106+
'entity': /#[a-z0-9]+;/,
107+
108+
'operator': {
109+
pattern: /(\w[ \t]*)&(?=[ \t]*\w)|:::|:/,
110+
lookbehind: true
111+
},
112+
'punctuation': /[(){};]/
113+
};

‎components/prism-mermaid.min.js

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

‎examples/prism-mermaid.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<h2>Full example</h2>
2+
<pre><code>%% https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md#larger-flowchart-with-some-styling
3+
4+
graph TB
5+
sq[Square shape] --> ci((Circle shape))
6+
7+
subgraph A
8+
od>Odd shape]-- Two line&lt;br/>edge comment --> ro
9+
di{Diamond with &lt;br/> line break} -.-> ro(Rounded&lt;br>square&lt;br>shape)
10+
di==>ro2(Rounded square shape)
11+
end
12+
13+
%% Notice that no text in shape are added here instead that is appended further down
14+
e --> od3>Really long text with linebreak&lt;br>in an Odd shape]
15+
16+
%% Comments after double percent signs
17+
e((Inner / circle&lt;br>and some odd &lt;br>special characters)) --> f(,.?!+-*ز)
18+
19+
cyr[Cyrillic]-->cyr2((Circle shape Начало));
20+
21+
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
22+
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
23+
class sq,e green
24+
class di orange
25+
</code></pre>

‎tests/languages/mermaid/arrow_feature.test

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
%% flow chart
2+
3+
--- ---- -----
4+
--> ---> ---->
5+
<-- <--- <----
6+
=== ==== =====
7+
==> ===> ====>
8+
<== <=== <====
9+
-.- -..- -...-
10+
-.-> -..-> -...->
11+
<-.- <-..- <-...-
12+
--x ---x ----x
13+
--x -.-x -..-x
14+
x-- x--- x----
15+
x-- x-.- x-..-
16+
--o ---o ----o
17+
--o -.-o -..-o
18+
o-- o--- o----
19+
o-- o-.- o-..-
20+
21+
<--> <----> <-..-> <====>
22+
x--x x----x x-..-x x====x
23+
o--o o----o o-..-o o====o
24+
25+
%% sequence diagram
26+
27+
-> --> ->> -->>
28+
<- <-- <<- <<--
29+
-x --x -) --)
30+
x- x-- (- (--
31+
32+
%% class diagram
33+
34+
<|-- *-- o-- <-- <.. <|..
35+
--|> --* --o --> ..> ..|>
36+
-- ..
37+
38+
%% ER diagram
39+
40+
|o--o| |o..o|
41+
||--|| ||..||
42+
}o--o{ }o..o{
43+
}|--|{ }|..|{
44+
45+
|o--o| |o..o|
46+
||--o{ ||..o{
47+
}o--|{ }o..|{
48+
}|--|| }|..||
49+
50+
----------------------------------------------------
51+
52+
[
53+
["comment", "%% flow chart"],
54+
55+
["arrow", "---"], ["arrow", "----"], ["arrow", "-----"],
56+
["arrow", "-->"], ["arrow", "--->"], ["arrow", "---->"],
57+
["arrow", "<--"], ["arrow", "<---"], ["arrow", "<----"],
58+
["arrow", "==="], ["arrow", "===="], ["arrow", "====="],
59+
["arrow", "==>"], ["arrow", "===>"], ["arrow", "====>"],
60+
["arrow", "<=="], ["arrow", "<==="], ["arrow", "<===="],
61+
["arrow", "-.-"], ["arrow", "-..-"], ["arrow", "-...-"],
62+
["arrow", "-.->"], ["arrow", "-..->"], ["arrow", "-...->"],
63+
["arrow", "<-.-"], ["arrow", "<-..-"], ["arrow", "<-...-"],
64+
["arrow", "--x"], ["arrow", "---x"], ["arrow", "----x"],
65+
["arrow", "--x"], ["arrow", "-.-x"], ["arrow", "-..-x"],
66+
["arrow", "x--"], ["arrow", "x---"], ["arrow", "x----"],
67+
["arrow", "x--"], ["arrow", "x-.-"], ["arrow", "x-..-"],
68+
["arrow", "--o"], ["arrow", "---o"], ["arrow", "----o"],
69+
["arrow", "--o"], ["arrow", "-.-o"], ["arrow", "-..-o"],
70+
["arrow", "o--"], ["arrow", "o---"], ["arrow", "o----"],
71+
["arrow", "o--"], ["arrow", "o-.-"], ["arrow", "o-..-"],
72+
73+
["arrow", "<-->"],
74+
["arrow", "<---->"],
75+
["arrow", "<-..->"],
76+
["arrow", "<====>"],
77+
78+
["arrow", "x--x"],
79+
["arrow", "x----x"],
80+
["arrow", "x-..-x"],
81+
["arrow", "x====x"],
82+
83+
["arrow", "o--o"],
84+
["arrow", "o----o"],
85+
["arrow", "o-..-o"],
86+
["arrow", "o====o"],
87+
88+
["comment", "%% sequence diagram"],
89+
90+
["arrow", "->"], ["arrow", "-->"], ["arrow", "->>"], ["arrow", "-->>"],
91+
["arrow", "<-"], ["arrow", "<--"], ["arrow", "<<-"], ["arrow", "<<--"],
92+
["arrow", "-x"], ["arrow", "--x"], ["arrow", "-)"], ["arrow", "--)"],
93+
["arrow", "x-"], ["arrow", "x--"], ["arrow", "(-"], ["arrow", "(--"],
94+
95+
["comment", "%% class diagram"],
96+
97+
["arrow", "<|--"],
98+
["arrow", "*--"],
99+
["arrow", "o--"],
100+
["arrow", "<--"],
101+
["arrow", "<.."],
102+
["arrow", "<|.."],
103+
104+
["arrow", "--|>"],
105+
["arrow", "--*"],
106+
["arrow", "--o"],
107+
["arrow", "-->"],
108+
["arrow", "..>"],
109+
["arrow", "..|>"],
110+
111+
["arrow", "--"],
112+
["arrow", ".."],
113+
114+
["comment", "%% ER diagram"],
115+
116+
["arrow", "|o--o|"], ["arrow", "|o..o|"],
117+
["arrow", "||--||"], ["arrow", "||..||"],
118+
["arrow", "}o--o{"], ["arrow", "}o..o{"],
119+
["arrow", "}|--|{"], ["arrow", "}|..|{"],
120+
121+
["arrow", "|o--o|"], ["arrow", "|o..o|"],
122+
["arrow", "||--o{"], ["arrow", "||..o{"],
123+
["arrow", "}o--|{"], ["arrow", "}o..|{"],
124+
["arrow", "}|--||"], ["arrow", "}|..||"]
125+
]

‎tests/languages/mermaid/comment_feature.test

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
%% comment
2+
3+
----------------------------------------------------
4+
5+
[
6+
["comment", "%% comment"]
7+
]

0 commit comments

Comments
 (0)