Logic Gates Demo

This demo shows how to use 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 originate only from the right side of the source node.

Graph Creation

A specialized GraphBuilder from the 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
• Reassign a connection by selecting the edge and dragging its endpoint.
• The ports remain unchanged when applying the selected layout algorithm.