28mm / blast-radius

Interactive visualizations of Terraform dependency graphs using d3.js
https://28mm.github.io/blast-radius-docs/
MIT License
2.04k stars 257 forks source link

Produce styled SVG #58

Open abitrolly opened 5 years ago

abitrolly commented 5 years ago

Is it possible to produce colored SVG from command line? Right now it is colored by JavaScript and it is not clear how to get a picture from command line.

28mm commented 5 years ago

At present, there's no direct way to produce a colored SVG from the command line, since javascript is doing the coloring-in. You can save the resulting svg through the browser, but that isn't quite as fast/automatic as what you seem to have in mind.

abitrolly commented 5 years ago

Who makes SVG output? There is a lot of style duplication, and if is possible to convert labels to class names - it will be possible to change colors with plain CSS.

For example, change this.

<!-- [root] var.environment -->
<g id="node_60" class="node"><title>[root] var.environment</title>
<polygon fill="none" stroke="black" points="2172,-394 2172,-409 2236,-409 2236,-394 2172,-394"/>
<text text-anchor="start" x="2196" y="-399.6" font-family="courier new" font-size="8.00">var</text>
<polygon fill="none" stroke="black" points="2172,-379 2172,-394 2236,-394 2236,-379 2172,-379"/>
<text text-anchor="start" x="2175" y="-384.6" font-family="courier new" font-size="8.00">environment</text>
</g>

To this.

<!-- [root] var.environment -->
<g id="node_60" class="node var"><title>[root] var.environment</title>
<polygon points="2172,-394 2172,-409 2236,-409 2236,-394 2172,-394"/>
<text text-anchor="start" x="2196" y="-399.6">var</text>
<polygon points="2172,-379 2172,-394 2236,-394 2236,-379 2172,-379"/>
<text text-anchor="start" x="2175" y="-384.6">environment</text>
</g>
<style>
.var polygon {fill: none}
</style>
abitrolly commented 5 years ago

Found the code. Uses dot -Tsvg.

https://github.com/28mm/blast-radius/blob/4b07f6498b6cfecdf7204455ee91e9bd86797bc6/blastradius/graph.py#L26

graphviz is pretty limited according to these questions, therefore a post-processor is needed.

https://www.google.com/search?q=graphviz+svg+output+with+class

28mm commented 5 years ago

I agree that a post-processor of some kind is needed. One could be added to the python code base, and optionally enabled with a flag.