Skip to main content

Graph

Graphs are collections of nodes connected by edges, perfect for visualizing networks, relationships, and graph algorithms like shortest path and traversal.

Source Code

1graph network = {
2  nodes: [A, B, C, D]
3  value: [10, 20, 30, 40]
4  edges: [A-B, B-C, C-D, D-A]
5  color: ["red", "blue", "green", "yellow"]
6  arrow: [null, "start", null, "end"]
7}
8

9page
10show network

Rendered Diagram

Properties​

Graphs support the following properties:

PropertyTypeDescription
nodesid[]List of node identifiers
value(number | string | null)[]Values for each node
edgesedge[]List of connections between nodes
color(color | null)[]Colors for each node
arrow(number | string | null)[]Arrows or labels for each node
hiddenboolean[]Visibility of each node
abovestring | text_object (see special features)Label positioned above the graph
belowstring | text_objectLabel positioned below the graph
leftstring | text_objectLabel positioned to the left
rightstring | text_objectLabel positioned to the right

Methods​

Graphs support these methods for manipulation:

Text Positioning Methods​

  • setText(text, position) - Set or remove text at specific positions ("above", "below", "left", "right")

Node Methods​

  • addNode(name, value?) - Add new node with optional value
  • removeNode(name) - Remove node and its edges
  • setValue(index | id, value) - Set value for node at index or node id
  • setColor(index | id, color) - Set color for node at index or node id
  • setArrow(index | id, arrow) - Set arrow for node at index or node id
  • setHidden(index | id, hidden) - Set visibility for node at index or node id

Edge Methods​

  • addEdge(edge) - Add new edge (e.g., A-B)
  • removeEdge(edge) - Remove specific edge

Multiple Element Methods​

  • setValues([...]) - Set multiple node values
  • setColors([...]) - Set multiple node colors
  • setArrows([...]) - Set multiple node arrows
  • setEdges([...]) - Set multiple edges
  • setHidden([...]) - Set visibility for multiple nodes

Examples​

Basic Graph Example​

Graph with Values and Colors​

Source Code

1graph weighted = {
2  nodes: [start, middle, end]
3  value: [0, 5, 10]
4  edges: [start-middle, middle-end]
5  color: ["green", "yellow", "red"]
6}
7

8page
9show weighted

Rendered Diagram

Dynamic Graph Operations​

Source Code

1graph network = {
2  nodes: [server1, server2]
3  edges: [server1-server2]
4  value: [100, 50]
5}
6

7page
8show network
9

10page
11network.addNode(router, 200)
12network.addEdge(server1-router)
13network.addEdge(server2-router)
14

15page
16network.setColor(router, "blue")
17network.setArrow(router, "hub")
18

19page
20network.addNode(client, 25)
21network.addEdge(client-router)
22network.setColor(client, "green")
23network.setArrow(router, null)

Rendered Diagram

Graph Traversal Visualization​

Source Code

1graph treeExample = {
2  nodes: [root, a, b, c, d]
3  edges: [root-a, root-b, a-c, a-d]
4  value: [1, 2, 3, 4, 5]
5}
6

7page
8show treeExample
9

10page
11treeExample.setColor(root, "blue")
12treeExample.setArrow(root, "visiting")
13

14page
15treeExample.setColor(a, "blue")
16treeExample.setArrow(a, "visiting")
17treeExample.setColor(root, "green")
18treeExample.setArrow(root, "visited")
19

20page
21treeExample.setColor(d, "blue")
22treeExample.setArrow(d, "visiting")
23treeExample.setColor(a, "green")
24treeExample.setArrow(a, "visited")

Rendered Diagram

Network with Hidden Nodes​

Source Code

1graph network = {
2  nodes: [pub, priv, sec]
3  edges: [pub-priv, priv-sec]
4  hidden: [false, false, true]
5  color: ["green", "yellow", "red"]
6}
7

8page
9show network
10

11page
12network.setHidden(sec, false)

Rendered Diagram

Use Cases​

Graphs are ideal for:

  • Graph algorithms - DFS, BFS, shortest path (Dijkstra, A*)
  • Network visualization - Computer networks, social networks
  • Tree structures - Binary trees, parse trees, decision trees
  • State machines - FSMs, workflow visualization
  • Dependency graphs - Package dependencies, task scheduling
  • Transportation - Route planning, traffic networks
  • Relationship modeling - Entity relationships, genealogy