search

naddison36 / sol2uml

Solidity contract visualisation tool
MIT License
1.12k stars 257 forks source link

Style UML SVG #141

Closed joeizang closed 1 year ago

joeizang commented 1 year ago

Hi, Great project. My question is, how do I style the uml svg? I tried parsing the svg using DomParser styling and serializing it again using XMLSerializer but the resulting image is broken.

So I was wondering if there is some guidance from you guys about what I should be doing to achieveing this.

naddison36 commented 1 year ago

The best way to style the sol2uml diagrams would be to use the --format dot option to output to Graphviz's DOT format. This is the intermediate format sol2uml uses before converting to SVG.

More specifically, sol2uml uses record-based nodes which can be styled https://graphviz.org/doc/info/shapes.html#styles-for-nodes. You can copy the dot output to an online Graphviz editor and style. For example https://dreampuf.github.io/GraphvizOnline/ Alternatively, you can use the dot command line https://graphviz.org/doc/info/command.html

If you are wanting to do styling across the whole diagram rather than individual nodes, you can set the attributes after the digraph is declared. These are currently hardcoded https://github.com/naddison36/sol2uml/blob/7674467e2ac1b5f11478d6ac7099466e1f25049d/src/ts/converterStorage2Dot.ts#L10

These styles could be made configurable if that's useful.

joeizang commented 1 year ago

The best way to style the sol2uml diagrams would be to use the --format dot option to output to Graphviz's DOT format. This is the intermediate format sol2uml uses before converting to SVG.

More specifically, sol2uml uses record-based nodes which can be styled https://graphviz.org/doc/info/shapes.html#styles-for-nodes. You can copy the dot output to an online Graphviz editor and style. For example https://dreampuf.github.io/GraphvizOnline/ Alternatively, you can use the dot command line https://graphviz.org/doc/info/command.html

If you are wanting to do styling across the whole diagram rather than individual nodes, you can set the attributes after the digraph is declared. These are currently hardcoded

https://github.com/naddison36/sol2uml/blob/7674467e2ac1b5f11478d6ac7099466e1f25049d/src/ts/converterStorage2Dot.ts#L10

These styles could be made configurable if that's useful.

I appreciate you taking the time to respond to my questions. I will look into this and come back with some more questions

joeizang commented 1 year ago

Hi @naddison36, I actually work with the Remix IDE team, configuring and being able to set the background is a pertinent to a plugin used in the IDE. Is there someway you can help us? Hope to hear from you soon.

naddison36 commented 1 year ago

yes, I can make the background, shape and fill colours configurable

naddison36 commented 1 year ago

sol2uml v2.5.0 has just been released which includes options to configure the colour styling. See Styling Colors for the details.