Skip to content

Commit a047dbe

Browse files
jackycutejackycute
authored
Merge pull request #8 from hackmdio/feature/graphviz
2 parents 7cba136 + 4e87914 commit a047dbe

5 files changed

Lines changed: 140 additions & 0 deletions

File tree

‎mode/graphviz/graphviz.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
(function(mod) {
2+
if (typeof exports == "object" && typeof module == "object") // CommonJS
3+
mod(require("../../lib/codemirror"), require("../../addon/mode/simple"));
4+
else if (typeof define == "function" && define.amd) // AMD
5+
define(["../../lib/codemirror", "../../addon/mode/simple"], mod);
6+
else // Plain browser env
7+
mod(CodeMirror);
8+
})(function(CodeMirror) {
9+
// Modify from https://github.com/Stephanvs/vscode-graphviz/blob/master/dot/syntaxes/dot.tmLanguage
10+
// and https://github.com/PhE/jupyterlab_graphviz/blob/master/src/mode.ts
11+
12+
13+
var TYPES = {
14+
'application/vnd.graphviz': {
15+
name: 'dot',
16+
extensions: ['.gv', '.dot'],
17+
engine: 'dot'
18+
},
19+
'application/vnd.graphviz.neato': {
20+
name: 'neato',
21+
extensions: ['.neato'],
22+
engine: 'neato'
23+
}
24+
};
25+
26+
var MODE_NAME = 'graphviz';
27+
28+
29+
var STATES = {
30+
start: [
31+
{regex: /'.*?'|".*?"/, token: "string"},
32+
{regex: /-+>?|=|:/, token: "operator"},
33+
{regex: /[;,]/, token: "comment"},
34+
{regex: /[{}[\]]/, token: "bracket"},
35+
36+
// storage type
37+
{regex: /(graph|digraph|strict|node|edge|subgraph)\b/i, token: "atom"},
38+
39+
// node attribute
40+
{regex: /\b(bottomlabel|color|comment|distortion|fillcolor|fixedsize|fontcolor|fontname|fontsize|group|height|label|layer|orientation|peripheries|regular|shape|shapefile|sides|skew|style|toplabel|URL|width|z)\b/, token: "property"},
41+
42+
// edge attribute
43+
{regex: /\b(arrowhead|arrowsize|arrowtail|color|comment|constraint|decorate|dir|fontcolor|fontname|fontsize|headlabel|headport|headURL|label|labelangle|labeldistance|labelfloat|labelcolor|labelfontname|labelfontsize|layer|lhead|ltail|minlen|samehead|sametail|splines|style|taillabel|tailport|tailURL|weight)\b/, token: "variable-3"},
44+
45+
// graph attribute
46+
{regex: /\b(bgcolor|center|clusterrank|color|comment|compound|concentrate|fillcolor|fontname|fontpath|fontsize|label|labeljust|labelloc|layers|margin|mclimit|nodesep|nslimit|nslimit1|ordering|orientation|page|pagedir|quantum|rank|rankdir|ranksep|ratio|remincross|rotate|samplepoints|searchsize|size|style|URL)\b/, token: "variable-3"},
47+
48+
// other attribute
49+
{regex: /\b(box|polygon|ellipse|oval|circle|point|egg|triangle|plaintext|plain|diamond|trapezium|parallelogram|house|pentagon|hexagon|septagon|octagon|doublecircle|doubleoctagon|tripleoctagon|invtriangle|invtrapezium|invhouse|Mdiamond|Msquare|Mcircle|rect|rectangle|square|star|none|underline|cylinder|note|tab|folder|box3d|component|promoter|cds|terminator|utr|primersite|restrictionsite|fivepoverhang|threepoverhang|noverhang|assembly|signature|insulator|ribosite|rnastab|proteasesite|proteinstab|rpromoter|rarrow|larrow|lpromoter)\b/, token: "variable-3"},
50+
51+
{regex: /</, token: "meta", mode: {spec: "xml", end: />>/}},
52+
{regex: /#.*/, token: "comment"},
53+
{regex: /[a-z][a-z\d_]*/i, token: "variable-2"},
54+
{regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
55+
token: "number"},
56+
{regex: /\/\/.*/, token: "comment"},
57+
{regex: /\/\*/, token: "comment", next: "comment"},
58+
],
59+
// The multi-line comment state.
60+
comment: [
61+
{regex: /.*?\*\//, token: "comment", next: "start"},
62+
{regex: /.*/, token: "comment"}
63+
],
64+
meta: {
65+
dontIndentStates: ["comment"],
66+
lineComment: "//"
67+
}
68+
};
69+
70+
71+
CodeMirror.defineSimpleMode(MODE_NAME, STATES);
72+
73+
for(var t in TYPES) {
74+
CodeMirror.defineMIME(t, MODE_NAME);
75+
CodeMirror.modeInfo.push({
76+
// codemirror extensions don't expect the leading dot
77+
ext: TYPES[t].extensions.map(function(e) { return e.replace(/^\./, '') }),
78+
mime: t,
79+
mode: MODE_NAME,
80+
name: MODE_NAME + ' (' + TYPES[t].name + ')',
81+
});
82+
}
83+
})

‎mode/graphviz/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<title>CodeMirror: Graphviz mode</title>
3+
<meta charset="utf-8"/>
4+
<link rel=stylesheet href="../../doc/docs.css">
5+
6+
<link rel="stylesheet" href="../../lib/codemirror.css">
7+
<script src="../../lib/codemirror.js"></script>
8+
<script src="../../addon/mode/simple.js"></script>
9+
<script src="graphviz.js"></script>
10+
<style>.CodeMirror {border: 2px inset #dee;}</style>
11+
<div id=nav>
12+
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
13+
14+
<ul>
15+
<li><a href="../../index.html">Home</a>
16+
<li><a href="../../doc/manual.html">Manual</a>
17+
<li><a href="https://github.com/codemirror/codemirror">Code</a>
18+
</ul>
19+
<ul>
20+
<li><a href="../index.html">Language modes</a>
21+
<li><a class=active href="#">Graphviz (DOT)</a>
22+
</ul>
23+
</div>
24+
25+
<article>
26+
<h2>Graphviz mode</h2>
27+
<form><textarea id="code" name="code">
28+
digraph hierarchy {
29+
nodesep=1.0 // increases the separation between nodes
30+
31+
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
32+
edge [color=Blue, style=dashed] //All the lines look like this
33+
34+
Headteacher->{Deputy1 Deputy2 BusinessManager}
35+
Deputy1->{Teacher1 Teacher2}
36+
BusinessManager->ITManager
37+
{rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
38+
}
39+
</textarea></form>
40+
41+
<script>
42+
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
43+
lineNumbers: true,
44+
indentUnit: 4,
45+
mode: "graphviz"
46+
});
47+
</script>
48+
49+
<p>
50+
Graphviz (DOT) language support.
51+
</p>
52+
53+
<p><strong>MIME type defined:</strong> <code>application/vnd.graphviz</code> and <code>application/vnd.graphviz.neato</code>
54+
</article>

‎mode/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ <h2>Language modes</h2>
6868
<li><a href="gas/index.html">Gas</a> (AT&amp;T-style assembly)</li>
6969
<li><a href="gherkin/index.html">Gherkin</a></li>
7070
<li><a href="go/index.html">Go</a></li>
71+
<li><a href="graphviz/index.html">Graphviz(DOT)</a></li>
7172
<li><a href="groovy/index.html">Groovy</a></li>
7273
<li><a href="haml/index.html">HAML</a></li>
7374
<li><a href="handlebars/index.html">Handlebars</a></li>

‎release.cmd‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ mode\dockerfile\dockerfile.js ^
6666
mode\tiddlywiki\tiddlywiki.js ^
6767
mode\mediawiki\mediawiki.js ^
6868
mode\go\go.js ^
69+
mode\graphviz\graphviz.js ^
6970
mode\groovy\groovy.js ^
7071
mode\gherkin\gherkin.js ^
7172
mode\mllike\mllike.js ^

‎release.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ mode/dockerfile/dockerfile.js \
7575
mode/tiddlywiki/tiddlywiki.js \
7676
mode/mediawiki/mediawiki.js \
7777
mode/go/go.js \
78+
mode/graphviz/graphviz.js \
7879
mode/groovy/groovy.js \
7980
mode/gherkin/gherkin.js \
8081
mode/mllike/mllike.js \

0 commit comments

Comments
 (0)