Added support for Mermaid (#3050)

components.json

@@ -803,6 +803,10 @@
 			"title": "MEL",
 			"owner": "Golmote"
 		},
+		"mermaid": {
+			"title": "Mermaid",
+			"owner": "RunDevelopment"
+		},
 		"mizar": {
 			"title": "Mizar",
 			"owner": "Golmote"

components/prism-mermaid.js

@@ -0,0 +1,113 @@
+Prism.languages.mermaid = {
+	'comment': {
+		pattern: /%%.*/,
+		greedy: true
+	},
+
+	'style': {
+		pattern: /^([ \t]*(?:classDef|linkStyle|style)[ \t]+[\w$-]+[ \t]+)\w.*[^\s;]/m,
+		lookbehind: true,
+		inside: {
+			'property': /\b\w[\w-]*(?=[ \t]*:)/,
+			'operator': /:/,
+			'punctuation': /,/
+		}
+	},
+
+	'inter-arrow-label': {
+		pattern: /([^<>ox.=-])(?:-[-.]|==)(?![<>ox.=-])[ \t]*(?:"[^"\r\n]*"|[^\s".=-](?:[^\r\n.=-]*[^\s.=-])?)[ \t]*(?:\.+->?|--+[->]|==+[=>])(?![<>ox.=-])/,
+		lookbehind: true,
+		greedy: true,
+		inside: {
+			'arrow': {
+				pattern: /(?:\.+->?|--+[->]|==+[=>])$/,
+				alias: 'operator'
+			},
+			'label': {
+				pattern: /^([\s\S]{2}[ \t]*)\S(?:[\s\S]*\S)?/,
+				lookbehind: true,
+				alias: 'property'
+			},
+			'arrow-head': {
+				pattern: /^\S+/,
+				alias: ['arrow', 'operator']
+			}
+		}
+	},
+
+	'arrow': [
+		// This might look complex but it really isn't.
+		// There are many possible arrows (see tests) and it's impossible to fit all of them into one pattern. The
+		// problem is that we only have one lookbehind per pattern. However, we cannot disallow too many arrow
+		// characters in the one lookbehind because that would create too many false negatives. So we have to split the
+		// arrows into different patterns.
+		{
+			// ER diagram
+			pattern: /(^|[^{}|o.-])[|}][|o](?:--|\.\.)[|o][|{](?![{}|o.-])/,
+			lookbehind: true,
+			alias: 'operator'
+		},
+		{
+			// flow chart
+			// (?:==+|--+|-\.*-)
+			pattern: /(^|[^<>ox.=-])(?:[<ox](?:==+|--+|-\.*-)[>ox]?|(?:==+|--+|-\.*-)[>ox]|===+|---+|-\.+-)(?![<>ox.=-])/,
+			lookbehind: true,
+			alias: 'operator'
+		},
+		{
+			// sequence diagram
+			pattern: /(^|[^<>()x-])(?:--?(?:>>|[x>)])(?![<>()x])|(?:<<|[x<(])--?(?!-))/,
+			lookbehind: true,
+			alias: 'operator'
+		},
+		{
+			// class diagram
+			pattern: /(^|[^<>|*o.-])(?:[*o]--|--[*o]|<\|?(?:--|\.\.)|(?:--|\.\.)\|?>|--|\.\.)(?![<>|*o.-])/,
+			lookbehind: true,
+			alias: 'operator'
+		},
+	],
+
+	'label': {
+		pattern: /(^|[^|<])\|(?:[^\r\n"|]|"[^"\r\n]*")+\|/,
+		lookbehind: true,
+		greedy: true,
+		alias: 'property'
+	},
+
+	'text': {
+		pattern: /(?:[(\[{]+|\b>)(?:[^\r\n"()\[\]{}]|"[^"\r\n]*")+(?:[)\]}]+|>)/,
+		alias: 'string'
+	},
+	'string': {
+		pattern: /"[^"\r\n]*"/,
+		greedy: true
+	},
+
+	'annotation': {
+		pattern: /<<(?:abstract|choice|enumeration|fork|interface|join|service)>>|\[\[(?:choice|fork|join)\]\]/i,
+		alias: 'important'
+	},
+
+	'keyword': [
+		// This language has both case-sensitive and case-insensitive keywords
+		{
+			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,
+			lookbehind: true,
+			greedy: true
+		},
+		{
+			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,
+			lookbehind: true,
+			greedy: true
+		}
+	],
+
+	'entity': /#[a-z0-9]+;/,
+
+	'operator': {
+		pattern: /(\w[ \t]*)&(?=[ \t]*\w)|:::|:/,
+		lookbehind: true
+	},
+	'punctuation': /[(){};]/
+};

examples/prism-mermaid.html

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

tests/languages/mermaid/arrow_feature.test

@@ -0,0 +1,125 @@
+%% flow chart
+
+--- ---- -----
+--> ---> ---->
+<-- <--- <----
+=== ==== =====
+==> ===> ====>
+<== <=== <====
+-.- -..- -...-
+-.-> -..-> -...->
+<-.- <-..- <-...-
+--x ---x ----x
+--x -.-x -..-x
+x-- x--- x----
+x-- x-.- x-..-
+--o ---o ----o
+--o -.-o -..-o
+o-- o--- o----
+o-- o-.- o-..-
+
+<--> <----> <-..-> <====>
+x--x x----x x-..-x x====x
+o--o o----o o-..-o o====o
+
+%% sequence diagram
+
+-> --> ->> -->>
+<- <-- <<- <<--
+-x --x -) --)
+x- x-- (- (--
+
+%% class diagram
+
+<|-- *-- o-- <-- <.. <|..
+--|> --* --o --> ..> ..|>
+-- ..
+
+%% ER diagram
+
+|o--o|  |o..o|
+||--||  ||..||
+}o--o{  }o..o{
+}|--|{  }|..|{
+
+|o--o|  |o..o|
+||--o{  ||..o{
+}o--|{  }o..|{
+}|--||  }|..||
+
+----------------------------------------------------
+
+[
+	["comment", "%% flow chart"],
+
+	["arrow", "---"], ["arrow", "----"], ["arrow", "-----"],
+	["arrow", "-->"], ["arrow", "--->"], ["arrow", "---->"],
+	["arrow", "<--"], ["arrow", "<---"], ["arrow", "<----"],
+	["arrow", "==="], ["arrow", "===="], ["arrow", "====="],
+	["arrow", "==>"], ["arrow", "===>"], ["arrow", "====>"],
+	["arrow", "<=="], ["arrow", "<==="], ["arrow", "<===="],
+	["arrow", "-.-"], ["arrow", "-..-"], ["arrow", "-...-"],
+	["arrow", "-.->"], ["arrow", "-..->"], ["arrow", "-...->"],
+	["arrow", "<-.-"], ["arrow", "<-..-"], ["arrow", "<-...-"],
+	["arrow", "--x"], ["arrow", "---x"], ["arrow", "----x"],
+	["arrow", "--x"], ["arrow", "-.-x"], ["arrow", "-..-x"],
+	["arrow", "x--"], ["arrow", "x---"], ["arrow", "x----"],
+	["arrow", "x--"], ["arrow", "x-.-"], ["arrow", "x-..-"],
+	["arrow", "--o"], ["arrow", "---o"], ["arrow", "----o"],
+	["arrow", "--o"], ["arrow", "-.-o"], ["arrow", "-..-o"],
+	["arrow", "o--"], ["arrow", "o---"], ["arrow", "o----"],
+	["arrow", "o--"], ["arrow", "o-.-"], ["arrow", "o-..-"],
+
+	["arrow", "<-->"],
+	["arrow", "<---->"],
+	["arrow", "<-..->"],
+	["arrow", "<====>"],
+
+	["arrow", "x--x"],
+	["arrow", "x----x"],
+	["arrow", "x-..-x"],
+	["arrow", "x====x"],
+
+	["arrow", "o--o"],
+	["arrow", "o----o"],
+	["arrow", "o-..-o"],
+	["arrow", "o====o"],
+
+	["comment", "%% sequence diagram"],
+
+	["arrow", "->"], ["arrow", "-->"], ["arrow", "->>"], ["arrow", "-->>"],
+	["arrow", "<-"], ["arrow", "<--"], ["arrow", "<<-"], ["arrow", "<<--"],
+	["arrow", "-x"], ["arrow", "--x"], ["arrow", "-)"], ["arrow", "--)"],
+	["arrow", "x-"], ["arrow", "x--"], ["arrow", "(-"], ["arrow", "(--"],
+
+	["comment", "%% class diagram"],
+
+	["arrow", "<|--"],
+	["arrow", "*--"],
+	["arrow", "o--"],
+	["arrow", "<--"],
+	["arrow", "<.."],
+	["arrow", "<|.."],
+
+	["arrow", "--|>"],
+	["arrow", "--*"],
+	["arrow", "--o"],
+	["arrow", "-->"],
+	["arrow", "..>"],
+	["arrow", "..|>"],
+
+	["arrow", "--"],
+	["arrow", ".."],
+
+	["comment", "%% ER diagram"],
+
+	["arrow", "|o--o|"], ["arrow", "|o..o|"],
+	["arrow", "||--||"], ["arrow", "||..||"],
+	["arrow", "}o--o{"], ["arrow", "}o..o{"],
+	["arrow", "}|--|{"], ["arrow", "}|..|{"],
+
+	["arrow", "|o--o|"], ["arrow", "|o..o|"],
+	["arrow", "||--o{"], ["arrow", "||..o{"],
+	["arrow", "}o--|{"], ["arrow", "}o..|{"],
+	["arrow", "}|--||"], ["arrow", "}|..||"]
+]

tests/languages/mermaid/comment_feature.test

@@ -0,0 +1,7 @@
+%% comment
+
+----------------------------------------------------
+
+[
+	["comment", "%% comment"]
+]