Graph Drawings

 Apply advanced graph drawing techniques to manage complex graph data. 

What are graph drawings?

Real-world graphs can be large and complex, sometimes containing many thousands of nodes and edges. Analysts, engineers, managers, and other users working with connected data need ways to determine where to begin, identify important areas of the graph, and maintain context as they explore relationships. Graph drawing techniques provide the visualization, interaction, and navigation capabilities needed to work with this complexity.

Graph drawings apply techniques for interacting with, navigating, and managing complex graph data.

Large symmetric graph

Large symmetric graph.

Graph drawings can help users:

  • Make sense of complex connected data.

  • Navigate, interact with, and update graph data.

  • Focus on relevant areas of a graph.

  • Communicate important findings to stakeholders and decision-makers.

How graph drawings help users work with large graphs

 Graph drawing techniques help users work with large and complex graphs by improving visual clarity, navigation, and interaction. In graph visualization applications, these techniques make it easier to focus on relevant structures, move between different levels of detail, and interpret relationships in context. 

When graph drawing application techniques are applied effectively, they can:

  • Highlight relevant data in your visualizations

  • Reveal the superstructures inherent in your data

  • Manage the complexity of the graph

  • Clearly convey multiple levels of detail

  • Provide a level of precision to the graphs 

Common graph drawing techniques include labels, connectors, edge, jumpovers, nesting and precise shape clipping.

Common graph drawing techniques include labels, connectors, edge jumpovers, nesting and precise shape clipping.

Nesting is a graph drawing technique that manages complexity by showing and hiding details

Nesting is a graph drawing technique that manages complexity by showing and hiding details.

Who can benefit from Tom Sawyer Perspectives' graph drawing capabilities?

Graph drawings convey the superstructures inherent in your data.

Graph drawings convey the superstructures inherent in your data.

Tom Sawyer Perspectives' graph drawing capabilities are especially useful for engineers, managers, and analysts who design, analyze, and manage complex systems.

These capabilities are valuable in industries that work with highly complex data and need to communicate important structures, relationships, and results clearly, including:

  • Systems Engineering

  • Telecommunications

  • Manufacturing

  • Defense and Intelligence

  • Cybersecurity and IT

  • Life Sciences

Tom Sawyer Perspectives provides unrivaled support for graph drawings

Tom Sawyer Software brings decades of experience in solving complex data problems for enterprises in a variety of industries.

Tom Sawyer Perspectives is a low-code application development platform that enables developers to build custom graph visualization and analysis applications to meet their unique graph use cases.

Tom Sawyer Perspectives supports complex graph visualization use cases through a geometric, graph-based data model that includes:

  • Nodes that have shapes, child graphs and connectors

  • Edges that have routes and decorations

  • Connectors that have shapes and can be variable size

  • Nodes, edges and connectors that have labels

  • Node, edge, edge decoration and connector labels that have localized text

An example telecommunications network application built with Perspectives.

 An example telecommunications network application built with Tom Sawyer Perspectives.

Powerful drawing tools at your fingertips

Tom Sawyer Perspectives provides graph drawing capabilities for creating customized visualizations of complex graph data.

Graph with two levels of nested drawing

Nested Drawings

Nesting a graph inside another element helps manage complexity in your data to reveal the superstructure. Tom Sawyer Perspectives supports nested drawings in nodes or edges. The elements included in a nested drawing can be determined through data integration, graph analysis, or user interaction. Tom Sawyer Perspectives supports nesting to any number of levels in complex graphs.
Graph with meta-edges between expanded nodes

Intergraph Edges and Meta-Edges

When an edge connects a node in a child drawing to a node in another drawing, it is called an intergraph edge. Intergraph edges are visible when viewing the child drawing either expanded in place or after the Go to Child Action. When the parent node that contains the child drawing is collapsed, one end node of the intergraph edge is no longer visible. Tom Sawyer Perspectives replaces this intergraph edge with a meta-edge to visually indicate that there is a relationship between the nodes in the two drawings until the parent node is again expanded.
Graph with connectors

Connectors and Nested Connectors

Tom Sawyer Perspectives supports connectors, which provide attachment points for edges and are typically associated with nodes. They are commonly rendered as rectangles or polygons and automatically expand as additional edges are attached. The platform also supports nested connectors, allowing connectors to be placed within other connectors.
Tom Sawyer Perspectives annotations capture context and support analysis directly within visualizations.

Annotations

 Tom Sawyer Perspectives provides an annotation framework for adding contextual notes directly to nodes and edges. Annotations can be categorized, color-coded, and filtered, allowing users to organize observations and focus on relevant information. Annotation badges provide a visible indication of flagged elements, issues, or key observations within the drawing.
Graph drawing with edge labels

Labels

Tom Sawyer Perspectives supports labels for nodes, edges, connectors, and edge decorations, with multiple labels available for a single element. Its labeling technology helps prevent edge labels from overlapping nodes, edges, other labels, and edge-crossing locations. These capabilities support bundle layouts, orthogonal layouts, and hierarchical layouts with orthogonal edge routing.
Graph showing precise shape clipping to nodes

Precise Shape Clipping

Tom Sawyer Perspectives supports precise shape clipping, allowing nodes to have complex shapes while making it clear which edges are connected to which nodes. Tom Sawyer Software holds a US patent for this technology.
Graph with edge decorations

Edge Decorations

Tom Sawyer Perspectives supports edge decorations, which are view elements that convey additional information about an edge. Edge decorations are represented by a symbol, such as an arrowhead or an image.
Graph with edge jumpovers

Jumpovers

Tom Sawyer Perspectives supports jumpovers, which are techniques to visualize edge crossings in a graph visualization. Jumpovers help users follow edges as they cross over other edges.

See how to apply advanced edge labeling techniques to create customized visualizations for your complex data.

Support for advanced graph interaction and navigation techniques

Graph interaction is important in applications that contain large graphs with many nested drawings. Applications built with Tom Sawyer Perspectives allow users to interact with the graph, focus on specific parts of the data, and maintain context as they move through different levels of detail.

Expand And Collapse

Expand and Collapse

Tom Sawyer Perspectives supports expanding and collapsing of nested drawings in place, without loss of detail and while preserving the user’s mental map of the graph. You can enable users to interactively expand and collapse the drawings through applying actions directly in the drawing canvas, or you can apply these operations in an automated, data-driven manner.



Drill Down And Drill Up

Drill-Down and Drill-Up

Tom Sawyer Perspectives supports drilling up or down into specific drawings so you can focus on a specific nested (child) drawing or parent drawing. This is especially key when you have heavily nested drawings.

 

See graph interaction and navigation in action

Watch these videos to see how Tom Sawyer Perspectives supports interaction and navigation in large graph applications. The examples show features such as expand, collapse, and drill-in, which help users work with nested drawings, move between levels of detail, and focus on specific graph elements.

Together, these capabilities support clearer exploration of complex graph data while helping users maintain context as they navigate the application.

 
 

See it in action

Watch these videos to see how easy and powerful graph interaction is.

 

 

The proprietary technology behind our graph drawings

Tom Sawyer Perspectives uses a geometric, graph-based data model that defines node shapes, connectors, edge routes, subgraphs, and related drawing elements. This model provides the structure used to render graph elements on screen.

Our powerful graph layout engine runs against the data structure defined in the graph data model, enabling our envied, overlap-free graph drawings.

Who can benefit from Tom Sawyer Perspectives' graph drawing capabilities?

Built using Tom Sawyer Perspectives, these example applications show graph drawing techniques in interactive applications and allow you to explore graph interaction firsthand. Sign up and explore. 

For even more example applications, see the Graph Application Examples page.

Model-Based Engineering

Model-Based Engineering

Explore block definition diagram, internal block diagram, package diagram, and more in this SysML-compliant hybrid SUV model. Experience the benefits of automated and interactive engineering diagrams.

Microwave Network

Microwave Network

Manage devices and antennas of a microwave transmission network. See first-hand how advanced visualization reveals load and capacity, and how Shortest Path analysis quickly finds the fastest communication routes.

Supply Chain

Supply Chain

Quickly spot problematic chains in this real-world supply chain example. See graph visualizations of the chain of raw materials in several styles of pens, and the locations from which materials are sourced.

Get started today

Contact us for a demonstration and to learn how to apply graph drawings and interaction techniques to solve your data challenges.

FAQs about graph drawings

What are graph drawing techniques?

Graph drawing techniques help users interact with, navigate, and manage complex graph data. Common techniques and capabilities include nesting, labels, connectors, meta-edges, edge jumpovers, precise shape clipping, edge decorations, and annotations. Together, they help users focus on relevant information, work with multiple levels of detail, and interpret relationships in context.

When are graph drawing techniques useful?

Graph drawing techniques are useful when a graph contains large numbers of nodes and edges, deeply nested structures, or more detail than can be clearly presented in a single view. They help users move between overview and detailed views, highlight relevant elements, and maintain context while exploring complex graph data.

What are meta-edges in graph drawings?

A meta-edge visually preserves a relationship when one end of an intergraph edge is hidden inside a collapsed nested drawing. Tom Sawyer Perspectives replaces the affected intergraph edge with a meta-edge, keeping the relationship between the drawings visible until the parent drawing is expanded again.

What software is used to create graph drawings?

Graph drawing software provides tools for visually representing, navigating, and interacting with connected data. The software may support capabilities such as automated graph layout, nested drawings, connectors, labels, edge routing, annotations, and interactive navigation. Tom Sawyer Perspectives is a low-code application development platform for building custom graph visualization and analysis applications with advanced graph drawing capabilities.

How do graph drawing techniques support graph visualization?

Graph drawing techniques support graph visualization by helping users structure, render, navigate, and interact with complex graph data. Capabilities such as nesting, labeling, connectors, edge routing, expand and collapse, and drill-down navigation help present multiple levels of detail and make relevant graph structures easier to explore.

What elements can appear in a graph drawing?

A graph drawing can include nodes, edges, connectors, labels, nested drawings, edge decorations, and annotations. Nodes can have shapes and contain child drawings, edges can follow defined routes, and connectors can provide attachment points for edges. These elements can use visual properties such as shape, size, labels, and symbols to communicate information about the underlying data.