blast-radius icon indicating copy to clipboard operation
blast-radius copied to clipboard

Produce styled SVG

Open abitrolly opened this issue 7 years ago • 4 comments

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.

abitrolly avatar Mar 21 '19 18:03 abitrolly

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.

28mm avatar Mar 22 '19 01:03 28mm

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 avatar Mar 22 '19 16:03 abitrolly

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

abitrolly avatar Mar 22 '19 18:03 abitrolly

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.

  • You could read in blast-radius/blastradius/server/static/js/categories.json to get the expected category groupings.
  • I imagine inline styles would be easier than style-sheets, since the number of colors needed isn't fixed. Or I suppose you could write a big long stylesheet.
  • Headings might be a bit of a pain since there could be a whole bunch of them stacked atop each other (the case for modules), each needing either a different class or inline style.

28mm avatar Mar 26 '19 01:03 28mm