NodeScape (Diagrams)

Start

NodeScape comes with a fairly extensive set of quick-start dialogs. These will provide basic usage information whenever it is relevant. These can be disabled or re-enabled in the settings and can be accessed any time via the Help/Info option in the main menu.


Browse →

Choose topic(s) from the Table of Contents at the right →


Videos

Tips

NodeScape has a number of features which may not be readily obvious. The following are some tips to illuminate some of these features and/or show some non-obvious uses for obvious features.

Joints

Joints are a very versatile node shape. They only have one color and appear as dot. Interactively, you'll see a faint oval around the dot which disappears on export.

Joints are usually used to extend wires: You can effectively fan-out wires or make s-curves, more-than-3 segment zigzags, and polylines. To facilitate this type of usage, joints have a style property to "suppress tips". When "suppress tips" is on, all tips that would be drawn at the joint aren't.

Joints can also be used to let wires end in empty space or as invisible snap-targets.

Snap Constructions

Sometimes, it takes a couple move operations to position an element in a desirable location. Here are some common "Snap Constructions".


To place a node below (or to the side of) the midpoint of two other nodes: Use Contextual snapping to place the node between the two nodes first. Then use node axis snapping to keep the node centered.


To 'reflect' a node horizontally/vertically across another node: Use Contextual snapping to reflect the node. Then use node+axis snapping to move the node in line with the original node.

Alignment

To align several nodes at once, select them and then choose "Align Nodes" from the misc menu: [long-press in selection]→...→Align Nodes. Here you'll find several options for both horizontal and vertical alignment.

  • Only Align: This will just align the nodes vertically or horizontally, their distribution won't be touched.
  • Equal Distance: This will align the nodes and redistribute them such that the distance between the nodes' centers are all equal.
  • Equal Spacing: This will align the nodes and redistribute them such that the space between the nodes are all equal.
Original Positions
Only Align
Equal Distances
Equal Spacing

Intro

NodeScape is a style-based diagramming tool. Basic usage should be fairly straightforward; but, there are many potentially non-obvious capabilities that can be very useful. This manual should help explain several of NodeScape's features and behaviors in more detail than the built in help.

Beta Note: NodeScape is currently still under fairly heavy development. Updates will bring new features and bugfixes; but, they can also introduce more bugs. If you run into issues (especially crashes), please send a bug-report email by: going to "Help/Info" in the menu and pressing the "Bugs/Feedback" Button. This will launch your email app with some helpful debugging info pre-filled-out.

Terminology

Below is very simple diagram illustrating the primary elements and what they are called in the program.

  • Nodes are shapes that contain textual information.
  • Wires connect nodes together (and can also have text).
  • Styles affect how Nodes and Wires are drawn. The 2 Nodes shown are sharing a style (round shape and blue border/text).
  • Frames are a special type of Node that fits around other nodes (frames them). In general, Frames automatically adjust their size to fit the nodes inside of them as they are manipulated.
  • Tips are the ends of a wire which attaches to a node.

Style-Based

NodeScape is a style-based tool. Unlike most similar tools, Nodes and Wires do not store any aesthetic information -- not even shape! Instead, each element is assigned a Style.

Though it may be unfamiliar at first, this model contributes to diagramming speed by separating the actual concepts/information from how things look. This lets you focus on recording ideas before you forget them (using styles purely for classification). Afterwards, you can edit the styles to change the look of all the nodes.

User Interface

The default interface has 4 major components.

  1. Here is where you'll see your diagram and perform most of your actions.
  2. Current document name (unless new) and system menu (devices without hardware menu button). A '*' indicates unsaved changes.
  3. Style Editor. Tap or drag the handle to show/hide the style browser.
  4. Context-sensitive Toolbar. Press and hold on a button to get a tooltip describing what it does.

Menus

Besides the system menu, this app employs context-sensitive radial menus.

Long-press anywhere in the diagram area to get a menu. Slide over the desired option and let go. Long-pressing different elements yields different menus. To create your first Node, long-press in the empty area and slide left.

Some menus have a "..." item which brings up a secondary popup menu with more, but less-frequently used, operations.

Edit Mode

Edit-mode temporarily changes the diagram-area's interactive behavior. It provides quicker editing and tweaking at the expense of more cumbersome navigation.

Enable Edit-mode in the Settings under "Diagram Area/Behavior..."

Differences from Navigation Mode:

  • The Create Menu (press in empty space) will come up instantly without long-press. You'll see this faint version until you move your finger. Creating nodes is now just a down-swipe in the document's empty space.
  • Moving nodes doesn't require that they be selected first, just drag them around
  • Pan by using two-finger drag or by tap-dragging. Tap-dragging is done by tapping once and then quickly afterwards press and drag

Selection

Normally, tapping on a node or wire will select it. Tapping on a frame will select it AND any nodes inside it. To select multiple elements at once, use the Select tool. (right option in the create menu)

  • Add to your selection by dragging boxes around desired elements. Tapping on an element will toggle whether its selected or not.
Tapping this toolbar button will make selection boxes remove from the selection rather than add.
If snapping is enabled, this toggle button lets you choose whether to snap the center of the selection or snap the node (in the selection) that is being manipulated.

Files

By default, NodeScape places your saved files in the devices external storage in a folder called 'NodeScape'. This is then usually '/sdcard/NodeScape'.

NodeScape files have the extension '.nsd' (for NodeScape Diagram). Each file contains the diagram information, document propertios, and all the Styles associated with that diagram.

In addition to the built in 'Open' browser, you can open .nsd files from emails and most file managers. Some file managers ask you to specify a type; choose Text if possible. NOTE: Some file managers refuse to open "non-standard" filetypes. If this is the case, try the file-manager's Share or Send feature. NodeScape will be in the share list and can open files up that way as well.

Launch Screen

The launch screen is the first thing that comes up when NodeScape is launched. The screen is broken into two sections: On the top, you can create new diagrams. On the bottom is a mini open screen where you can quickly open and resume previous diagrams.

  • 1. This menu lets you select a set of initial styles to create a new diagram with. You can create and manage the stylesets in this list in the Settings.
  • 2. Press this button to create a new diagram with the initial styles chosen in (1).
  • 3. Choose how to open a previous diagram. To start a new diagram using the selected diagram's styles, choose "Open Only Styles".
    • TIP: Using the "Open Only Styles" is the same as using that diagram's styles as a Style Preset without actually making a Style Preset. If you plan on using those styles a lot, though, it's better to make it into a preset.
  • 4. Press this button to open the selected diagram.

Open

There are a couple ways to open files. You can find a selector in the bottom-left of the file browser:

  • Open is the default mode. It just opens a file.
  • Import will load a file into the current diagram. Be careful, it just places the contents on top.
  • Import Styles will copy the styles from a file into the current diagram.
  • Replace Styles will replace the styles in the current diagram with those from another file.

Saving

You can save files anywhere on your devices filesystem. By default, things go in the NodeScape folder.

Create new folders with the 'New Folder' button in the lower-left corner of the file browser.

Export

At the moment, you can export rasters to PNG, JPG, or SVG (pro only). PNG format is lossless and allows for transparency. SVG is a vector-graphics format.

PNG: With transparency enabled, your background will become transparent (ignoring any color set -- except in anti-aliasing fringes).

JPG: No transparency is supported by JPG. Since JPG is lossy, there will be a slider to select quality

SVG: This should open in most modern web-browsers fine. However, some engines (Firefox/Inkscape) don't support adding underlines to text. Because SVG is a description format, different renderers can display things slightly differently. This is most noticable in text due to different font availability and size settings across configurations.

DOT: This is for use with graph layout engines (like graphviz). Therefore, this will not preserve any location or size information. It tries to preserve as much styling as possible (if desired), but the DOT/NSD feature-sets vary enough that a fair amount of information is lost.

Styles

NodeScape operates in a style driven fashion. Each style represents a meaning which is assigned to any number of diagram elements. Modifying the appearance of a style will alter the appearance of all elements assigned to that style.

The Style Browser is the primary hub for creating, editing, and managing styles. Open it either by tapping on the Style-Browser handle, or by dragging the handle away from the edge of the screen.

There are 2 tabs for styles associated with the 2 primary elements (Node, Wire). Since Frames are a type of Node, they share styles with them.

The style with a red-orange border around it is the default style. Any new nodes or wires created will be assigned this default style.

Any styles with a yellow border around them are selected. Click the "..." button or the "+" button while multiple styles are selected, will perform bulk operations on the selected styles. During bulk operations, any changed properties (their names will turn yellow) will be propagated to all selected styles.

  • Scroll by dragging up or down.
  • Select/Assign/Default a style by tapping on it.
  • Edit style by double-tapping on it. This will bring up a dialog with all the properties. You can also click the "..." button (only way to bulk edit).
  • Add a style by pressing the "+" button. This will COPY the currently selected or default style(s) and bring up the edit dialog on the new one. Any selected Nodes or Wires will get assigned the new styles.
  • Delete a style by editing it and pressing the "Delete" button.

Style Presets

To facilitate quick startup, NodeScape comes with several Style Presets. A Style Preset is a set of default styles that a new diagram starts with.

You can create a preset from the current session's styles via the Settings→"Create Preset from Current Styles".

Presets can be created, edited, and removed (even the included ones) from the Style Preset Manager. This can be found in the settings labelled "Manage Style Presets".

Since you can import the styles from ANY diagram by opening it as "Replace Styles" (see Files section), Presets can be shared through regular files. For Example: to export a preset, create a new diagram with that preset and then save it.

Behavior

In addition to just appearance, Node-Styles allow for control over how nodes behave when created and when edited.

  • Default Text: determines the text that goes into a node on creation. The last '#' character gets replaced by the node's id (which is arbitrary). If you want a literal '#' character, escape it with '\' (ie. '\#')
    • Tip: If you make the default text empty, creating a node won't bring up the edit prompt even if its enabled (This is how the Joint works).
  • Fixed Default Size: When nodes are created, their size adjusts to their text. By enabling this, you can provide a custom size for new nodes to come in at (regardless of their text).
  • Keep Aspect Fixed: When enabled, nodes will always keep the default aspect ratio. The aspect is determined by the default size if enabled. Otherwise, it will be fixed to 1:1.
    • Note: The aspect snap will snap to the default-size's aspect even when fixed-aspect is off. This means you can still easily keep the aspect ratio even without fixed-aspect enabled.

Nodes

Shapes representing information are called Nodes.

A selected node will have a dashed yellow outline. The active node (last one selected) will have an additional red outline.

  • Edit a node's text by double-tapping on it.
  • Move selected nodes by dragging them around
  • Resize a node by dragging its resize control point:
  • Tapping on the resize control point toggles between symmetric and asymmetric resize
You can quickly turn snapping on and off with this toolbar button. Read more about snapping in the Snapping section

Frames

A Frame is a special type of Node which contains other Nodes/Frames. Frames can auto-conform to whatever is inside of them (configurable in each direction).

  • Create a frame around selected nodes by either tapping the 'Frame' toolbar button; or opening the menu in the selection bounds, select the "..." misc menu, and choose frame.
  • You can convert Nodes to Frames and Frames to Nodes in the "..." misc menu for any single selected Frame or Node.
  • Drag the frame's handles to stretch the frame over other nodes or off of them.
  • To select just the frame, tap on it again after it is selected.
  • To select just the nodes inside the frame, tap on one of the frame's interior nodes after the frame is selected
  • In the frame properties (double-tap), you can choose to fix one or both of its dimensions. This means you can manually specify its size in that dimension (rather than it auto-conforming).

Nodes in Frames

Nodes within Frames have slightly different behavior.

The blue dashed outline around the frame indicates that moving the selected node(s) will cause parent frame(s) to change size.

Single-tap on a selected node to allow the selection to move the node out of its parent frame(s). This behavior can be toggled on/off by subsequent single-taps on a selected node.

Wires

Wires are the elements that connect Nodes together. They are defined by their start and end nodes.

To create wires, enter Wire-Mode (main menu → Up direction).

This mode lets you create wires very quickly. Simply drag from one node to another to create a wire.

  • Dragging back to the first node will create a loop-back wire.
  • The line you are dragging will light up and a set of green cross-hairs will appear when releasing your finger will create a wire.
  • Depending on your settings: releasing your finger in empty space (not on a node) will actually create a new node at the end of a new wire. If this is the case, you'll see a rectangle at the end of the preview line.
  • Also depending on your settings: dragging your finger past the outside of a node's radial menu will begin a one-shot wire mode.

Manipulation

  • Edit wire text by double-tapping on the wire.
  • Flip wire ends from the wire's radial menu (up).
The red dot in the middle (depending on the wire type) is a wire control point. Moving this around affects the shape of the wire.
The 'X's on each end are wire tips. Moving these around changes where the wire connects to the node. If the 'X' has a red circle on it, it is pinned in place. This means it will always connect to the same location regardless of where it comes from.
To restore the wire to its normal automatic placement, simply move the wire tip back. It should snap to its natural position (signified by two green concentric rings).
Some node shapes have terminals. These show up as blue 'X's in wire mode or when wires are selected. While dragging wire-tips around, they should snap to terminals (indicated by two green concentric squares). If a tip is connected to a terminal, you should see a red diamond on top of the tip's red 'X'.

Snapping

As you start working with more and more data, snapping becomes an integral part of placing elements where you want.

In addition to the global snap on/off toggle on the toolbar, you can independently turn on/off each of the snaps under the Snapping Options section in the settings.

Occasionally, achieving a desired node placement requires multiple steps. These combinations of movements/snaps is a construction. See the Tips section for some common examples

Targetted-Snap/Snap-Sessions

Sometimes you may run into situations where there are too many objects to snap to, or, you want to snap to something that is so far it is off-screen. To remedy this, you can use targetted snapping. This allows you to limit snapping to a target set of elements.

With items selected, tap the targetted-snap toolbar button (left) to enter targetted-snap mode. In this mode, tapping on a node or wire toggles its snap state. A green hilight means it will contribute to snap calculations. At any time, you can move(drag) your selection and it will only snap to highlighted items.

If you'd like to continue using the current set of snap targets for more operations, tap the snap-session toolbar item (left). Currently highlighted nodes will be kept as a snap-session. While this session is active, all operations will only snap to those in the snap-session. When you're done with the snap-session, just tap the toolbar item again to end it.

Contextual Snaps

Some of the more powerful snaps require some extra context to function (reflections, midpoints, extensions).

To use them, start moving a node. Drag the node over other nodes that you wan't to be considered for contextual snaps (up to 3). You'll see light-green circles on nodes contributing to contextual snaps.

Here are the different types of contextual snaps currently supported:

Extension

2pt Reflection

Midpoint

Centroid

3pt Reflection

Images

To add images to nodes, open the Image Browser in the node settings: double-tap the node and pick the button.

Select this entry (left) to load an image from your device. The loaded image will be added to the image browser.

Select a loaded image and click OK to add it to the current node.

To unset (remove) an image from a node, open this Image Browser and select the No Image button.

Embedding

Normally, images loaded into the diagram point to the image on your device. While this is fast and keeps saved files small, sharing across devices can be a bit of a headache.

To remedy this, loaded images can be embedded. An embedded image will be stored in the saved diagram file. The file will be larger since it includes the image data; however, the embedded images will be available to anyone that has the file. Embedded images will appear with a icon over them in the image browser.

In File→Properties, there is an option to limit the size of embedded images. This can help reduce .nsd file size when the source images are much larger than required by the diagram.

Image Display Settings (memory considerations)

Current portable devices provide limited memory to applications. Images are pretty heavy on memory resources. NodeScape has a number of optimizations to handle images gracefully, but on old enough devices (or with enough images visible), you can run into flickering or other warnings.

If this becomes an issue, go to Menu→Settings→Performance. The first option is "Maximum Display Resolution". Reducing this value can help if memory becomes a problem

Customize

There are actually two types of customizations. Each diagram you create has Properties that apply to just that file. Then there are global Settings that control the look/behavior of the tool itself -- independent of what's open.

Properties

Diagram properties effect just one diagram and are stored with it when saved to a file. These can be accessed through File→Properties. At the moment, there are only a couple properties:

  • Background color: Changes the diagram's background-color. To change the default background color for all new diagrams, use the Settings panel (described below).
  • Limit Embedded Image Size: This allows you to specify a custom limit on the size of embedded images. If unchecked, images will be embedded as is (basically copying them into the file).

Settings (Preferences)

There's like a billion settings to mess around with. Here's an overview of the sections:

  • Snapping Options... contains all the various snaps (sorted by snapping category). These can be toggled on/off individually or for a whole category via the 'Enable <CATEGORY> Snapping' toggles.
  • Performance Options... contains a selection of switches to change how fast/smooth NodeScape's interface is. All of these toggles turn off drawing features during "interaction" which means any time you scroll/zoom or move/resize things.
  • Control Points/Handles... contains adjustments for the size/opacity/damping of control points
  • Diagram Area/Behavior... contains settings for global behavior settings. Things like background-color, move threshold, experimental features, and menu-size can be found here
  • Toolbar/Style Browser... lets you adjust position/orientation of the style-browser and toolbars. There's also settings for what items are displayed in the toolbar
  • Dialogs... has switches for what dialogs get shown -- prompt on new nodes, ask on delete, enable/disable tutorials.
View Desktop Site