1 | # generating diagrams of the architecture described in tslint.json
|
2 |
|
3 | The configuration of `tslint-folders-diagrams` is a description of the architecture of your TypeScript project (see [tslint.tslint-folders.json](https://github.com/mrseanryan/tslint-folders-diagrams/blob/master/tslint.tslint-folders.json) for an example).
|
4 |
|
5 | `tslint-folders-diagrams` 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-diagrams` uses to validate the source code.
|
10 |
|
11 | ![example diagram](https://github.com/mrseanryan/tslint-folders-diagrams/blob/master/static/images/example_diagram_from_Dot_output.png?raw=true)
|
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-diagrams
|
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'
|