UNPKG

tslint-folders/readme.generating-diagram-images.md

Version:

2.05 kBMarkdownView Raw

1# generating diagrams of the architecture described in tslint.json
2
3The configuration of `tslint-folders` is a description of the architecture of your TypeScript project (see [tslint.tslint-folders.json](tslint.tslint-folders.json) for an example).
4
5`tslint-folders` can generate dot files from its configuration. A dot file is a simple format to describe a graph of nodes.
6
7If you install `graphviz`, then you can generate image diagrams from those dot files.
8
9So, you can automatically generate architecture diagrams from the same configuration that `tslint-folders` uses to validate the source code.
10
11![example diagram](https://bitbucket.org/str/tslint-folders/raw/f9c220af572d72f8dc4024d02582cf2b03b15552/static/images/example_diagram_from_Dot_output-2.svg)
12
13*note: the example scripts output SVG files which are scalable and work with markdown and so work with gitlab, npmjs etc.*
14
15---
16
17## install graphviz
18
19https://graphviz.gitlab.io
20
21---
22
23## generating a graph image from tslint-folders
24
25`./generate_graph_image <path to tslint.json>`
26
27### example
28
29`./generate_graph_image_example`
30
31## assumptions
32
33- graphviz has been installed and 'dot' is available at the command line.
34- the machine has an environment variable `TEMP` pointing to a temporary files location.
35
36---
37
38## notes for Windows
39
40### Windows download
41
42https://graphviz.gitlab.io/_pages/Download/Download_windows.html
43
44Windows + Q -> Environment variables.
45
46Add this to the PATH environment variable:
47
48```
49C:\Program Files (x86)\Graphviz2.38\bin
50```
51
52So then `dot.exe` is reachable.
53
54### executing bash scripts on Windows
55
56- use cmder (bash)
57
58http://cmder.net/
59
60---
61
62## references
63
64### bash cheat sheet
65
66https://devhints.io/bash
67
68### graphviz
69
70https://www.graphviz.org/
71
72#### graphviz color schemes
73
74https://graphviz.gitlab.io/_pages/doc/info/colors.html
75
76The default used is `pastel19`.
77
78#### graphviz online
79
80http://www.webgraphviz.com/
81
82#### graphviz in Visual Code
83
84extension 'Graphviz Preview'

1	`# generating diagrams of the architecture described in tslint.json`
2
3	The configuration of `tslint-folders` is a description of the architecture of your TypeScript project (see [tslint.tslint-folders.json](tslint.tslint-folders.json) for an example).
4
5	`tslint-folders` can generate dot files from its configuration. A dot file is a simple format to describe a graph of nodes.
6
7	If you install `graphviz`, then you can generate image diagrams from those dot files.
8
9	So, you can automatically generate architecture diagrams from the same configuration that `tslint-folders` uses to validate the source code.
10
11	`![example diagram](https://bitbucket.org/str/tslint-folders/raw/f9c220af572d72f8dc4024d02582cf2b03b15552/static/images/example_diagram_from_Dot_output-2.svg)`
12
13	`note: the example scripts output SVG files which are scalable and work with markdown and so work with gitlab, npmjs etc.`
14
15	`---`
16
17	`## install graphviz`
18
19	`https://graphviz.gitlab.io`
20
21	`---`
22
23	`## generating a graph image from tslint-folders`
24
25	`./generate_graph_image <path to tslint.json>`
26
27	`### example`
28
29	`./generate_graph_image_example`
30
31	`## assumptions`
32
33	`- graphviz has been installed and 'dot' is available at the command line.`
34	- the machine has an environment variable `TEMP` pointing to a temporary files location.
35
36	`---`
37
38	`## notes for Windows`
39
40	`### Windows download`
41
42	`https://graphviz.gitlab.io/_pages/Download/Download_windows.html`
43
44	`Windows + Q -> Environment variables.`
45
46	`Add this to the PATH environment variable:`
47
48	```
49	`C:\Program Files (x86)\Graphviz2.38\bin`
50	```
51
52	So then `dot.exe` is reachable.
53
54	`### executing bash scripts on Windows`
55
56	`- use cmder (bash)`
57
58	`http://cmder.net/`
59
60	`---`
61
62	`## references`
63
64	`### bash cheat sheet`
65
66	`https://devhints.io/bash`
67
68	`### graphviz`
69
70	`https://www.graphviz.org/`
71
72	`#### graphviz color schemes`
73
74	`https://graphviz.gitlab.io/_pages/doc/info/colors.html`
75
76	The default used is `pastel19`.
77
78	`#### graphviz online`
79
80	`http://www.webgraphviz.com/`
81
82	`#### graphviz in Visual Code`
83
84	`extension 'Graphviz Preview'`