I am currently doing a research work which involves the development of a web-based simulator for Automata.
I came across Cytoscape JS as a primary component in building our proposed simulator. I would like to ask if there some way that we can customize the appearance of the nodes in Cytoscape? In our Automata simulator that we are working on, we intend to use the standard symbols (see image) and place a string value inside the node.
Standard State Symbols in Automata
I was wondering of what would be the proper implementation of the the node and in what way can we change (customize) the appearance of the nodes?
I hope somebody knowledgeable in Cytoscape js can advise.
Use the stylesheet : http://js.cytoscape.org/#style
Use the background properties to alter the background of the node. For example, you can use a custom SVG image.
It's up to you how you do it. There are many properties you can configure, or you could go full custom and just use your own SVG images in place of the built-in shapes and styles.