Программы

Содержание:

Working with the Palette

Drag and Drop for Nodes: Any of the sample node representations from the Palette tool window can be dragged into the active editor window (using a ) to create a new node that uses this visual representation.
Drag and Drop for Edges: Dragging a sample edge representation onto a node in the active editor window starts creating an edge of the corresponding kind at that node.
Setting Defaults: Default representations for the nodes or edges of a graph can be defined by double-clicking a respective sample in any of the sections of the palette. When a new node or edge is created in the editor window, the currently active default representation is used to define the visual characteristics of the graph element. The defaults for closed groups and for open groups can be set in the same way.

The context menus for the sample representations in predefined and user-defined palette sections, respectively in the section ‘Current Elements’, provide further actions.

Features

Viewer application for diagrams in GraphML format: GraphMLViewer is created to display diagrams which are saved in GraphML format. GraphML is the XML-standard for saving graph-like diagrams. The viewer is optimized for diagrams which were created with the freely available yEd graph editor.
Display any part of the diagram: users can freely move and resize the displayed diagram. It is also possible to display only a fixed part of the diagram. User interactivity can be enabled/disabled via parameters from the embedding web page.
Overview: a small overview can be displayed optionally, showing the entire diagram. The section which is currently visible in the main view will be highlighted.
Printing: the current diagram can be printed. Additionally, the entire page can be printed using the browser’s print option.
Tooltips: descriptions which are added to graph elements in yEd can be displayed as tooltips.
Links to other websites: users can navigate to URLs which are added to graph elements in yEd via mouse click.
Configuration via parameters: almost all features listed here can be configured via parameters in the embedding HTML. This enables web authors to adapt the viewer to their requirements. The configuration is made simple using a Javascript function call. Advanced web authors can add further customizations by modifying the supplied Javascript file.
Integration in yEd: the freely available yEd graph editor offers the option to export all needed files with a simple mouse click (export as «HTML Flash Viewer;» since version 3.2). The viewer can be configured using a convenient dialog.

Gallery

Have a look at our gallery to experience the many applications that yFiles and yEd can be used in.

Display your graph as a static image with predefined clipping. The user interface can be hidden completely.

Download GraphMLViewer 1.6.1

You can The archive contains all necessary files to run the viewer, documentation about how to use it, and a simple example.

GraphMLViewer is available free of charge. Please read and accept the license terms before downloading the viewer.

Grouping Tab

This tab can be used to configure the behavior of the layout algorithm if used
on nested/grouped graphs.

Group Layout Policy

Determines the basic policy for the layout process.

Layout Groups: Instructs the algorithm to layout groups and open folders as well as their
contents in a global manner. All visible nodes’ positions will be recalculated.
Fix Contents of Groups: The algorithm will keep the relative position of nodes inside of groups and
performs the layout on the top level only.
Ignore Groups: This setting will make the algorithm ignore group nodes entirely. Nodes will be
rearranged as if there were no group nodes. This may lead to overlapping group
nodes.

The File Menu

Open…

Opens an existing document from disk. A new editor is used for the document.
It is possible to open several documents at once by means of a multi selection
in the file chooser dialog.
See ‘File Formats’ for descriptions of supported
file formats.

Open URL…

Opens an existing document from a remote address.
A new editor is used for the document.
See ‘File Formats’ for descriptions of supported
file formats.

Save

Saves the document from the current editor using the associated name.
See ‘File Formats’ for descriptions of supported
file formats.

Save As…

Saves the document from the current editor.
This lets you specify the file name and file format to be used.
See ‘File Formats’ for descriptions of supported
file formats.

Export…

Exports the document from the current editor to a file.
This lets you specify the file name and file format to be used.
yEd supports .
Note that graphs cannot be loaded from exported files.
In order to save a graph in a format that can be read, please use
instead.

Print…

Opens a dialog which enables the user to print either the whole graph
or the visible contents of the current view only.
The size of the output can be controlled by either specifying a scaling factor
to be applied before printing the graph or by specifying on how many page rows and
columns the output should fit. When choosing the latter option the scaling factor will
be adjusted automatically so that the graph nicely fits on the poster.

Print Preview…

Opens up a print preview dialog window which enables the user to preview the
print results.
Within the preview panel it is also possible to change all relevant print settings
and immediately see their effects.

Preferences…

Opens a dialog which lets you specify the behavior and display of the
editor. See The Preferences Dialog for more
details.

Quit

Saves the current editor settings and quits yEd.
Upon a restart the saved settings will be initially applied to the application.
Note that the settings will be stored within a sub-directory in the user’s home
directory.

Swimlanes Tab

Treat groups as swimlanes

If enabled, top level group nodes will be interpreted as swimlanes. In this case, the placement policy for these nodes is no longer strictly hierarchical but rather these groups (and their content) are placed horizontally next to each other for layout orientations “Top to Bottom” and “Bottom to Top” and vertically next to each other for layout orientations “Left to Right” and “Right to Left”.

Use sketch for lane order

If enabled, the prelayout position of top level groups that are treated as swimlanes determines the swimlane ordering for the algorithm.
If disabled, the swimlane odering is determined in a way that tries to minimize edge crossings.

Directed Tab

These options configure the layout style Directed in more detail.

Orientation

Determines the main layout orientation. The layouter tries to arrange nodes
in such a way that all edges point in the main layout direction.

Top to Bottom: The main layout orientation will be from top to bottom. Note that the documentation
for the other layout options assumes that this default layout orientation
is being used.
Bottom to Top: The main layout orientation will be from bottom to top.
Left to Right: The main layout orientation will be from left to right.
Right to Left: The main layout orientation will be from right to left.

Port Style

Determines the port assignment policy to be used.

Node Centered: Ports will be placed in the center of the corresponding nodes.
Border Centered: Ports will be placed in the center of the border of the corresponding nodes.
Border Distributed: Ports will be distributed along the border of the corresponding nodes.
Consider Port Constraints: Ports will be distributed according to the specified port constrains.
Note that the sides specified by port constraints are only considered for ports at children.
Furthermore, they are ignored for nodes of a multi-parent structure.

Orthogonal Edge Routing

If set, all edges will be routed orthogonally in a bus-like fashion. If not set,
the edges will be routed as straight-line segments.

Child Alignment

Determines the placement of same-layer child nodes relative to each other.

Top: The top border of child nodes will be aligned.
Center: The geometric center of child nodes will be aligned.
Bottom: The bottom border of child nodes will be aligned.

Child Placement Policy

This option determines the layer assignment for child nodes.
Depending on the selected child placement policy, an optimal area utilization
can be achieved.

Siblings in Same Layer: This setting configures the algorithm to place siblings (nodes with the same
parent node) in the same layer.
This means that all sibling nodes are aligned on the same horizontal line.
This option is useful in order to make a graph vertically more compact.
All Leaves in Same Layer: This setting configures the algorithm to place leaves (nodes without children)
in a Dendrogram-like style.
This means that all leaf nodes in the tree are placed in the same layer
(i.e all leaf nodes in the tree are aligned on one horizontal line).
A Dendrogram layout is often applied in computational biology in order to show
clustering of genes.
This policy does not support multi-parent structures.
Leaves stacked: This setting configures the algorithm for a stacked style of leaf nodes.
This results in a horizontally compact arrangement.
Leaf nodes are placed both left and right of the corresponding bus axis.
Leaves stacked left: This setting configures the algorithm for a stacked style of leaf nodes.
This results in a horizontally compact arrangement.
All leaf nodes are placed left of the corresponding bus axis.
Leaves stacked right: This setting configures the algorithm for a stacked style of leaf nodes.
This results in a horizontally compact arrangement.
All leaf nodes are placed right of the corresponding bus axis.

Enforce Global Layering

If set, the algorithm ensures that all nodes of same depth are placed in the same
layer.
This means, that all nodes which have the same distance to the root node (distance
= number of edges on the shortest path connecting two nodes), are placed on the
same horizontal line.
This setting is useful, if the hierarchical structure of the tree should be more
distinguished.
If global layering is enforced, multi-parent structures are not supported.

Edge Routing Algorithms

Edge routing algorithms are responsible for computing suitable paths for edges while not moving nodes at all. In general, the goal is to find the best routes for edges so they do not cross any nodes, if possible. yFiles supports different routing styles such as orthogonal or polyline, orthogonal bus-like and organic.

Orthogonal and Polyline Edge Routing

The algorithm calculates new paths for some or all edges in an existing layout. These paths consist of horizontal and vertical segments with as few crossings and bends as possible. The routing is suitable for electric circuit design, floor planning and navigation maps.

Bus Routing

The algorithm bundles edges in very dense diagrams into buses. The paths are calculated so they share as many parts as possible. The result clears up the diagram and makes it easier to follow the edges.

Edges Tab

Routing Style

Orthogonal: Edge paths will be routed in an orthogonal style, i.e. only vertical and horizontal line segments will be used. Orthogonal edge routing increases the height of the layout.
Polyline: Edge paths will be routed as a polyline with a certain number of bends.
Octilinear: Edge paths will be routed in an octilinear style, i.e. the routes consist of line segments whose slope is a multiple of 45 degrees.
Curved: Edge paths will be routed in a curved style using cubic bezier splines.

Automatic Edge Grouping

If enabled, the layout algorithm will group edges at either source or target node to create bus-style edge path routings that will result in a more space-efficient layout. Edges are grouped in such a way that no ambiguous paths are created.

Minimum Slope

Determines the minimal slope of the first and last edge segments with polyline edges. This feature is only available for the polyline routing style.

Port Constraint Optimization

If enabled, edges will be allowed to connect to all sides of a node if the number of edge crossings can be reduced this way.

Recursive Edge Routing

Off: Edge paths can leave or enter group or folder nodes at all sides in order to connect as directly as possible.
Directed: Edge paths always leave group or folder nodes at the bottom and enter them at the top side.
Undirected: Edge paths always leave group or folder nodes at the bottom or the top side. This style is more compact than the directed recursive routing style.

Consider Edge Thickness

If enabled, the thickness of edges will be considered for minimum distance computations. Otherwise, minimum distances might be violated or overlaps between edges can occur when having thick edges.

Arrows define Edge Direction

If enabled, the arrowheads will be used to derive the direction of edges. An edge with an arrow at one end is considered to be directed; the layout algorithm will try to draw the edge such that the arrow points into the main layout orientation (e.g. downwards for orientation “Top to Bottom”). An edge without arrows or with arrows at both ends is considered to be undirected, which means that its direction is not important.

If this feature is disabled, all edges will be treated as directed, hierarchic edges, regardless of the specified visual arrowhead.

Efficient Graph Analysis Algorithms

yFiles allows you not only to create, edit, display, and arrange graphs. There are also a number of analysis algorithms to determine common structural traits (such as connectivity, cycles, whether a graph is a tree and many more), pathfinding and reachability, clustering and centrality measures, graph traversals and many more.

Graph Characteristics

Check graphs for common traits, like determining whether a graph is cyclic or acyclic, connected, planar, or bipartite. You can also find out whether a graph has a tree or series-parallel structure and many more.

Finding Paths

yFiles offers a variety of algorithms to find paths in graphs, whether it’s the shortest path, paths between any two nodes or chains within directed or undirected graphs. Pathfinding problems often occur in geographical applications, such as finding routes on a map.

Centrality Measures

Centrality measures show the importance of each node within a graph. This can then be used for instance to align nodes differently, or mark their importance via their size or color. Centrality can be applied in social network analysis, e.g. to find the most influential persons or other kinds of networks, e.g. to find key infrastructure nodes on the internet.

Concepts

What the Grouping concept basically provides,
is the possibility to put a graph structure inside a node which itself is contained
in another graph.
A node that contains another graph structure is called a group node.
By such a nesting of nodes or entire graphs inside of other nodes, a tree-like
hierarchy of nodes is induced.
The top-level graph of this hierarchy is called the root graph.
A graph that contains a nested graph is called the parent graph of that
nested graph.

Group nodes can be in either of two states.
When closed, their contained graph structure is not accessible and thus
cannot be edited.
When open, the nodes and edges contained in a group node are shown inside
its bounds and are part of the same graph structure as the group node.
This allows them being edited.
The latter scheme also allows visualizing edges in their entirety, even if their
end points reside on different levels in the node hierarchy.

The closed group nodes display an image of their contained graph structures
(optional setting).

In a hierarchy of nodes, parts of a graph can be moved to another hierarchy
level, i.e., graph structures can be moved into and out of group nodes.
The edges connecting the part that has been moved with the rest of the graph
won’t get lost, even if group nodes get closed.
Original edges will be represented by edges that connect to the node in which
the subgraph is nested in.
When opening group nodes or unpacking the contents of a group node again, the
original edges will be restored.
Hence the structure of a graph won’t be destroyed by a sequence of nesting operations.

Grid Tab

Enable Grid

If enabled, the layouter will place nodes and bends on grid coordinates. The anchor point of the nodes depends on the ‘vertical alignment’ within layers which is described above. In case the nodes are centered, the anchor point is located in the center of the node. When nodes are top or bottom aligned the anchor point is at the node’s top or bottom border.

Port Style

Determines the way in which edge ports are distributed at the nodes.

Default: This style is equivalent to the style used when grid is disabled. The ports are evenly distributed regardless of the grid information.
On Grid: This style places the ports on grid coordinates that intersect with a node. If there are not enough grid coordinates available to distribute all incident edges, edges may be assigned to the same port location (i.e. edges may partly overlap).
On Subgrid: This style tries to place the ports on grid coordinates that intersect with a node. If there are not enough grid coordinates available to distribute all incident edges, additional locations are generated by iteratively cutting the grid spacing into halves. Hence, the grid spacing is an integer multiple of the used subgrid spacing.

Layout Tab

Layout Style

Normal: Node sizes will not be changed by this layouter.
The drawing will contain very few bends only.
Uniform Node sizes: Node sizes will all be changed to an equal size before being laid out.
Node Boxes: Nodes are resized according to the number and position of their neighbors to reduce
the overall number of bends.
Mixed: Resembles Node Boxes but resizes all nodes to equal size by introducing
additional bends and routing the last line segment of these edges non-orthogonally
to their adjacent nodes.
Mixed (Size Fixed): Like Mixed but maintains original node sizes.
Node Boxes (Size Fixed): Like Node Boxes but maintains original node sizes.

Grid

Defines the virtual grid spacing used by the layouter. Each node will be placed
in such a way that its center point lies on a grid point. Edges will be routed
in such a way that their segments lie on grid lines if the terminal nodes of
the edges permit suitable port placements.
Note that this option is only guaranteed to be obeyed for Normal layout
style while being used as a hint only for the other styles.

Use Existing Drawing As Sketch

If enabled, the layouter will interpret the initial graph layout
as a sketch of the resulting orthogonal layout. The layouter
tries to “orthogonalize” the given sketch without making too much
modifications in respect to the original drawing.

Route multi-edges in parallel

If enabled, the algorithm uses a special routing for multi-edges (edges with same source and target node) such that the routes are parallel. Note that the integrated edge labeling is not supported for such edges.

Maximum Duration

Specifies a preferred time limit (in seconds) for the layout algorithm.
Note that restricting the maximal duration may reduce the overall layout
quality. Furthermore, the actual runtime may exceed the maximal duration
because the layout algorithm still has to find a valid solution.

Using the Node Hierarchy Features

There are some additional node hierarchy-related operations
available on the main view that are triggered by mouse gestures.

Dropping a selection of nodes onto an open group node
will make the selected nodes part of the grouping
when the SHIFT modifier is pressed.
The location of the mouse cursor must be on an open group node
when the mouse button gets released.
Starting a drag from within an open group node while holding the
SHIFT modifier will ungroup the dragged nodes from their current
group.
Double-clicking on a group node triggers the action.
When creating edges from or to open group nodes, the edge creation will
only be triggered if the border of the group node is used for the beginning or
the ending of the edge creation. This makes it possible to drag
selection boxes and create bends for edges inside of group nodes, but not in the
region of the border of the group node.
Unlike with ordinary nodes, group nodes will only be selected if the
selection box fully contains the group node. This makes it possible to
select nodes within an open group node without selecting the group node
itself.

Adjacency Matrix

This representation is based on a matrix in which each node is related to one row and one column. Thus, a graph ofn nodes requires a matrix of size n x n. The cells of the matrix define the edges of the graph and
an edge connecting the nodes i and j exists if and only if the cell at position (i,j)
is not empty and its value is not equal to .

The values of cells which yield edges are provided in a custom edge property. Optionally, yEd can treat the values of
the first row and the first column of the matrix as node IDs and import them as custom property. Typically, the
sequence of nodes implied by the rows and columns is the same. However, if node IDs are present in both the first
row and the first column, the mapping to nodes respects these IDs. Thereby, yEd handles differing mappings for rows
and columns correctly, which is useful for example for bipartite representations. To allow additional custom node
properties besides the node ID, this representation can be combined with a node list. In this case,
nodes from the matrix and from the list are mapped according to the specified node IDs.

Example

The above illustration shows the representation of the example graph as an adjacency matrix. The cells A4:A8 in
column A and B3:F3 in row 3, which are highlighted in blue, contain node IDs, and the other cells in the
range B4:F8 represent potential edges. Thus, the resulting graph contains 8 edges, defined by the cells of value 1.
For example, the cells C4, D4, and E4 establish edges from Anna to Ben, to Chris, and to Dan, respectively,
and there is no edge from Anna to Elena since the value of cell F4 is . The following screenshot
shows the settings for the import of the example matrix including the node IDs from the first row and the first
column. Please note that the input field Data Range contains the cell range and a sheet name (here ‘Matrix 1’).
Since the node IDs in rows and columns are the same, using only one of them results in the same graph. For example, it
is sufficient to specify the range A4:F8 and enable the setting Node IDs in First Column.

Additional Options

Typically, the sequence of nodes represented by rows and by columns is the same, i.e., row i and column i
represent the same node. If node IDs are present simultaneously for rows and for columns, the mapping respects the IDs
and the sequences can be different. Thus, it is possible to import bipartite matrix representations, for example.
Additionally, empty cells are supported and are handled like cells of value . The following example
represents a graph which is equal to the example above except for the values of the edge property.

Layers Tab

The algorithm puts each node in a horizontal layer together with other nodes. The number of the layer where a node resides is also called node rank.

Layer Assignment Policy

Hierarchical – Optimal: The layer distance of an edge is the absolute difference between the ranks of its source and target node. Layer assignment will be done in such a way that the overall sum of the layer distances of all edges in the layout is minimal.
Hierarchical – Tight Tree Heuristic: A fast heuristic that also tries to minimize the overall sum of layer distances of all edges.
BFS Layering: Ranking based on a breadth first search. All edges will span at most one layer in the resulting drawing. Edges between nodes that belong to the same layer are possible. Places all selected nodes in the first layer. If no nodes are selected then nodes that have no incoming edges are placed in the first layer.
From Sketch: Policy that uses the initial y-coordinates of the nodes to determine a node layering. It tries to find a layering that is similar to the one in the input graph. When this ranking policy is used, the layouter may place nodes that are connected by an edge in the same layer.
Hierarchical – Topmost: All nodes with indegree zero will be assigned the topmost layer of the layout.

Alignment within Layer

Determines the alignment of nodes within one layer.

Top Border of Nodes: The top border of nodes will be aligned.
Center of Nodes: The geometric center of nodes will be aligned.
Bottom Border of Nodes: The bottom border of nodes will be aligned.

Stacked Placement

If enabled, nodes are placed in a more compact, stacked style. The layout algorithm will place the nodes of a layer horizontally interleaving in an upper and lower sub-layer. While this setting may decrease the width of the layout, it will increase the required layout height.

From Sketch Settings

These settings influence the strategy used to assign nodes to certain layers when the options ‘Use Drawing As Sketch’, ‘Selected Elements Incrementally’ or ‘Rank Assignment – From Sketch’ are set. The standard strategy assigns two nodes to the same layer if there exists a horizontal line that crosses through both of their bounding boxes.

Scale

Artificially scales the nodes by the given factor before the rank assignment is performed. The bigger the value to more likely that nodes will be assigned to the same layer.

Halo

Artificially enlarges the nodes by the given value before the rank assignment is performed. The bigger the value to more likely that nodes will be assigned to the same layer.

Minimum Size

Nodes smaller than the given value will be enlarged to match the given size before the rank assignment is performed. The bigger the value to more likely that nodes will be assigned to the same layer.

Maximum Size

Nodes larger than the given value will be shrinked to match the given size before the rank assignment is performed. The smaller the value to more likely that nodes will be assigned to different layers.

Adding Sample Representations to User-defined Palette Sections

Sample representations of nodes and edges can be added to user-defined palette sections as follows.

From the active editor window: The current selection of nodes or edges from the active editor window can be added to the sample representations of user-defined sections in the Palette tool window by choosing ‘Add to Palette’ from the editor’s context menu.
From the file system: The Import Symbols… menu entry in the context menu of user-defined palette sections and the Import Symbols… button in the Palette Manager dialog can be used to load image and SVG files which are added to the corresponding palette section.
From the World Wide Web: The IconFinder… menu entry in the context menu of user-defined palette sections and the button in the Palette Manager dialog can be used to open the IconFinder dialog and import symbols from an icon search engine into a user-defined palette section. Importing symbols in this manner requires a live Internet connection.