Skip to content

Commit 910f178

Browse files
authored
Merge pull request #62 from tintinweb/bundle-dot-syntax-highlighting
bundle dot language support / syntax highlighting
2 parents 9a3f22b + a881900 commit 910f178

17 files changed

+984
-18
lines changed

README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66

77
# vscode-interactive-graphviz
88

9-
A VSCode extension that provides an interactive, zoom-, pan- and searchable, live preview with edge tracing for graphs in Graphviz / dot format.
9+
A VSCode extension that provides syntax highlighting, snippets, and an interactive, zoom-, pan- and searchable, live preview with edge tracing for graphs in Graphviz / dot format.
1010

1111

1212
![graphviz_v01](https://user-images.githubusercontent.com/2865694/151164049-9c89e167-d0c1-43eb-ae96-0f5004847bde.gif)
1313

1414
![graphviz_v01_open](https://user-images.githubusercontent.com/2865694/151163938-f667acf2-bc87-4555-ad93-866a4ca33822.gif)
1515

16-
16+
* Graphviz/Dot Language Support / Syntax Highlighting and Snippets (thanks [@joaompinto](https://github.com/joaompinto))
1717
* Renders dot/Graphviz sources in an interactive live preview.
1818
* Updates preview as you type.
1919
* Interactive edge tracing. Click on a node to highlight incoming and outgoing edges (`ESC` to unselect).
@@ -86,6 +86,7 @@ see [AUTHORS](AUTHORS) for a list contributors.
8686
* graph engine: [d3-graphviz](https://github.com/magjac/d3-graphviz)
8787
* edge tracking: [jquery.graphviz.svg](https://github.com/mountainstorm/jquery.graphviz.svg/)
8888
* webview handling: [vscode-graphviz](https://github.com/joaompinto/vscode-graphviz/)
89+
* dot language support, syntax highlighting, snippets: taken from [vscode-graphviz](https://github.com/joaompinto/vscode-graphviz/) with permission from the author [@joaompinto](https://github.com/joaompinto)
8990

9091
Copyright (c) Microsoft Corporation:
9192
* icons: [vscode-codicons](https://github.com/microsoft/vscode-codicons)

dot/dot.configuration.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"comments": {
3+
// symbol used for single line comment. Remove this entry if your language does not support line comments
4+
"lineComment": "//",
5+
// symbols used for start and end a block comment. Remove this entry if your language does not support block comments
6+
"blockComment": [ "/*", "*/" ]
7+
},
8+
// symbols used as brackets
9+
"brackets": [
10+
["{", "}"],
11+
["[", "]"],
12+
["(", ")"]
13+
],
14+
"autoClosingPairs": [
15+
{ "open": "{", "close": "}" },
16+
{ "open": "[", "close": "]" },
17+
{ "open": "'", "close": "'", "notIn": ["string", "comment"] },
18+
{ "open": "\"", "close": "\"", "notIn": ["string", "comment"] }
19+
],
20+
"folding": {
21+
"markers": {
22+
"start": "{",
23+
"end": "}"
24+
}
25+
}
26+
}

dot/snippets/package.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "dotSnippets",
3+
"publisher": "Stephanvs",
4+
"description": "Code snippets for Graphviz (DOT)",
5+
"version": "0.0.1",
6+
"engines": {
7+
"vscode": "*"
8+
}
9+
}

dot/snippets/snippets/dot.json

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
{
2+
"Graph Template": {
3+
"prefix": "graph",
4+
"body": [
5+
"digraph ${1:G} {",
6+
"\tsplines=\"FALSE\";",
7+
"",
8+
"\t/* Entities */",
9+
"\t${2:shortName} [label=\"${3:$2}\", shape=\"${4|square,rectangle,circle,ellipse,triangle,plaintext,point,diamond,pentagon,hexagon,septagon,octagon,egg,trapezium,parallelogram,house,doublecircle,doubleoctagon,tripleoctagon,invtriangle,invtrapezium,invhouse,Mdiamond,Msquare,Mcircle,none,note,tab,folder,box3d|}\"]",
10+
"\t$0",
11+
"\t/* Relationships */",
12+
"\t${5:F1} -> $2${6:[label=\"${7:.63}\"]}",
13+
"",
14+
"\t/* Ranks */",
15+
"\t{ rank=${8|same,min,max,# max is bottom|}; $2; };",
16+
"}"
17+
],
18+
"description": "Graph Template"
19+
},
20+
"Convert > to ->": {
21+
"prefix": ">",
22+
"body": [
23+
"-> "
24+
],
25+
"description": "-> (convert \">\" to \"->\")"
26+
},
27+
"New Variable": {
28+
"prefix": "var",
29+
"body": [
30+
"${1:shortname} [label=\"${2:$1}\", shape=\"${3|square,rectangle,circle,ellipse,triangle,plaintext,point,diamond,pentagon,hexagon,septagon,octagon,egg,trapezium,parallelogram,house,doublecircle,doubleoctagon,tripleoctagon,invtriangle,invtrapezium,invhouse,Mdiamond,Msquare,Mcircle,none,note,tab,folder,box3d|}\"${4:, URL=\"${5:http://en.wikipedia.org/wiki/John de Fries}\"}]",
31+
"${0}"
32+
],
33+
"description": "New variable"
34+
},
35+
"Property [dir=both…]": {
36+
"prefix": "dir",
37+
"body": [
38+
"[dir=${1|back,both,forward,none|}]"
39+
],
40+
"description": "Property [dir=both…]"
41+
},
42+
"New variable [plaintext]": {
43+
"prefix": "var",
44+
"body": [
45+
"\"${1:Machine: a}\" [ shape = plaintext ];"
46+
],
47+
"description": "New variable [plaintext]"
48+
},
49+
"New subgraph": {
50+
"prefix": "sub",
51+
"body":[
52+
"subgraph ${1:Identifier} {\n${2:Graph content}\n}"
53+
],
54+
"description": "New subgraph"
55+
},
56+
"Property [shape=box]": {
57+
"prefix": "prop",
58+
"body": [
59+
"[shape=box]"
60+
],
61+
"description": "Property [shape=box]"
62+
},
63+
"Property [styles…]": {
64+
"prefix": "prop",
65+
"body": [
66+
"[style=dotted; color=red; style=bold,label=\"100 times\"; weight=8]"
67+
],
68+
"description": "Property [styles…]"
69+
},
70+
"Path from -> to [label]": {
71+
"prefix": "path",
72+
"body": [
73+
"${1:from} -> ${2:to} [label=\"${3:.7}\";]"
74+
],
75+
"description": "Path from -> to [label]"
76+
},
77+
"Path from -> {to list}": {
78+
"prefix": "path",
79+
"body": [
80+
"${1:From} -> {${2:item1} ${3:item2} $0}"
81+
],
82+
"description": "Path from -> {to list}"
83+
},
84+
"{ rank=same|min|max; x; y }": {
85+
"prefix": "rank",
86+
"body": [
87+
"{ rank=${1|same,min,max,# max is bottom|}; ${2:space delimitted list }};"
88+
],
89+
"description": "{rank=same|min|max; x; y}"
90+
}
91+
}

dot/syntaxes/dot.tmLanguage

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>fileTypes</key>
6+
<array>
7+
<string>dot</string>
8+
<string>DOT</string>
9+
</array>
10+
<key>firstLineMatch</key>
11+
<string>digraph.*</string>
12+
<key>keyEquivalent</key>
13+
<string>^~G</string>
14+
<key>name</key>
15+
<string>Graphviz (DOT)</string>
16+
<key>patterns</key>
17+
<array>
18+
<dict>
19+
<key>captures</key>
20+
<dict>
21+
<key>1</key>
22+
<dict>
23+
<key>name</key>
24+
<string>storage.type.dot</string>
25+
</dict>
26+
<key>2</key>
27+
<dict>
28+
<key>name</key>
29+
<string>variable.other.dot</string>
30+
</dict>
31+
<key>4</key>
32+
<dict>
33+
<key>name</key>
34+
<string>punctuation.section.dot</string>
35+
</dict>
36+
</dict>
37+
<key>comment</key>
38+
<string>named digraph declaration: "digraph NAME {"</string>
39+
<key>match</key>
40+
<string> ?(digraph)[ \t]+([A-Za-z0-9]+) ?(\{)</string>
41+
</dict>
42+
<dict>
43+
<key>comment</key>
44+
<string>edge definition: &lt;- -&gt; --</string>
45+
<key>match</key>
46+
<string>(&lt;|-)(&gt;|-)</string>
47+
<key>name</key>
48+
<string>keyword.operator.dot</string>
49+
</dict>
50+
<dict>
51+
<key>match</key>
52+
<string>\b(node|edge|graph|digraph|subgraph|strict)\b</string>
53+
<key>name</key>
54+
<string>storage.type.dot</string>
55+
</dict>
56+
<dict>
57+
<key>match</key>
58+
<string>\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</string>
59+
<key>name</key>
60+
<string>entity.name.type.node.dot</string>
61+
</dict>
62+
<dict>
63+
<key>match</key>
64+
<string>\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</string>
65+
<key>name</key>
66+
<string>entity.name.type.edge.dot</string>
67+
</dict>
68+
<dict>
69+
<key>match</key>
70+
<string>\b(bgcolor|center|clusterrank|color|comment|compound|concentrate|fillcolor|fontname|fontpath|fontsize|gradientangle|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</string>
71+
<key>name</key>
72+
<string>entity.name.type.graph.dot</string>
73+
</dict>
74+
<dict>
75+
<key>match</key>
76+
<string>\b(box|polygon|ellipse|oval|circle|point|egg|filled|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</string>
77+
<key>name</key>
78+
<string>variable.other.dot</string>
79+
</dict>
80+
<dict>
81+
<key>match</key>
82+
<string>\b(aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|grey|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)\b</string>
83+
<key>name</key>
84+
<string>variable.other.dot</string>
85+
</dict>
86+
<dict>
87+
<key>begin</key>
88+
<string>"</string>
89+
<key>beginCaptures</key>
90+
<dict>
91+
<key>0</key>
92+
<dict>
93+
<key>name</key>
94+
<string>punctuation.definition.string.begin.dot</string>
95+
</dict>
96+
</dict>
97+
<key>end</key>
98+
<string>"</string>
99+
<key>endCaptures</key>
100+
<dict>
101+
<key>0</key>
102+
<dict>
103+
<key>name</key>
104+
<string>punctuation.definition.string.end.dot</string>
105+
</dict>
106+
</dict>
107+
<key>name</key>
108+
<string>string.quoted.double.dot</string>
109+
<key>patterns</key>
110+
<array>
111+
<dict>
112+
<key>match</key>
113+
<string>\\.</string>
114+
<key>name</key>
115+
<string>constant.character.escape.dot</string>
116+
</dict>
117+
</array>
118+
</dict>
119+
<dict>
120+
<key>begin</key>
121+
<string>(^[ \t]+)?(?=//)</string>
122+
<key>beginCaptures</key>
123+
<dict>
124+
<key>1</key>
125+
<dict>
126+
<key>name</key>
127+
<string>punctuation.whitespace.comment.leading.dot</string>
128+
</dict>
129+
</dict>
130+
<key>end</key>
131+
<string>(?!\G)</string>
132+
<key>patterns</key>
133+
<array>
134+
<dict>
135+
<key>begin</key>
136+
<string>//</string>
137+
<key>beginCaptures</key>
138+
<dict>
139+
<key>0</key>
140+
<dict>
141+
<key>name</key>
142+
<string>punctuation.definition.comment.dot</string>
143+
</dict>
144+
</dict>
145+
<key>end</key>
146+
<string>\n</string>
147+
<key>name</key>
148+
<string>comment.line.double-slash.dot</string>
149+
</dict>
150+
</array>
151+
</dict>
152+
<dict>
153+
<key>begin</key>
154+
<string>(^[ \t]*)(?=#)</string>
155+
<key>beginCaptures</key>
156+
<dict>
157+
<key>1</key>
158+
<dict>
159+
<key>name</key>
160+
<string>punctuation.whitespace.comment.leading.dot</string>
161+
</dict>
162+
</dict>
163+
<key>end</key>
164+
<string>(?!\G)</string>
165+
<key>patterns</key>
166+
<array>
167+
<dict>
168+
<key>begin</key>
169+
<string>#</string>
170+
<key>beginCaptures</key>
171+
<dict>
172+
<key>0</key>
173+
<dict>
174+
<key>name</key>
175+
<string>punctuation.definition.comment.dot</string>
176+
</dict>
177+
</dict>
178+
<key>end</key>
179+
<string>\n</string>
180+
<key>name</key>
181+
<string>comment.line.number-sign.dot</string>
182+
</dict>
183+
</array>
184+
</dict>
185+
<dict>
186+
<key>begin</key>
187+
<string>/\*</string>
188+
<key>captures</key>
189+
<dict>
190+
<key>0</key>
191+
<dict>
192+
<key>name</key>
193+
<string>punctuation.definition.comment.dot</string>
194+
</dict>
195+
</dict>
196+
<key>end</key>
197+
<string>\*/</string>
198+
<key>name</key>
199+
<string>comment.block.dot</string>
200+
</dict>
201+
</array>
202+
<key>scopeName</key>
203+
<string>source.dot</string>
204+
<key>uuid</key>
205+
<string>1A53D54E-6B1D-11D9-A006-000D93589AF6</string>
206+
</dict>
207+
</plist>

0 commit comments

Comments
 (0)