Logic Gates Demo
This demo showcases yFiles for HTML to visualize a digital system with logic gates.
Each node has specific ports: incoming edges connect only to the left side of the target
node, while outgoing edges go to the right side of the source node.
are used for this purpose.
A Port-aware Graph Builder Demo is used to create the graph, connecting the
edges with specific ports defined in the business data.
Things to Try
- Drag nodes from the palette and connect them with edges.
- Create a new edge: this highlights the possible end ports with green color.
Hover over a node to see available input (reddish color) and output (bluish color) ports
- Re-assign a connection by dragging the endpoint of the edge.
- The ports remain unchanged when applying the selected layout algorithm.