Diagram for .NET / Getting Started / First Look

In This Topic
    First Look
    In This Topic

    The purpose of this topic is to make you familiar with the basic terminology used in Nevron Diagram for .NET.

    Diagrams are composed of various elements such as the 2D and 1D shapes, groups, layers, texts, vector and raster primitives etc. Each of these elements corresponds to an object in the programming model of Nevron Diagram for .NET. Diagrams are displayed and edited with the help of different diagram components such as drawings, libraries, command bars etc.

    The following figure illustrates the most common diagram elements and components:

     Shapes

    Diagrams are mainly constructed from shapes. There are two types of shapes - 2D shapes and 1D shapes.

    You can think of 2D shapes as boxes. If you perceive the diagram as a graph, 2D shapes are usually the vertices (nodes) of this graph. The geometry of a 2D shape is defined by a set of vector primitives, such as lines, rectangles, ellipses, polygons, curves etc. You can resize, rotate and translate 2D shapes.  In the example image above there are several types of 2D shapes representing computers, scanner, printer etc. 2D shapes usually define a set of ports (connection points) to which the plugs of a 1D shape can connect to.

    You can think of 1D shapes as lines. If you perceive the diagram as a graph, 1D shapes are usually the edges (links) of this graph. Each 1D shape has start and end plugs, which can be connected to the ports of other shapes. The geometry of 1D shapes can also be different, but it generally depends on the location of the 1D shape start and end points.

    Shapes may have an arbitrary number of control points, which are used to interactively change different aspects of the shape - in the example image above the control points of the arrow are used to modify the arrow head and arrow thickness.

    Groups are shapes, which are constructed from other shapes. In the example image above the left side computer, printer, scanner and projector are grouped.

    Shapes are primary contained in drawing documents. Drawing documents are organized in layers. Layers are used for the Z-order grouping of related shapes.

    Nevron Diagram for .NET comes equipped with a vast number of predefined shapes and also gives you the ability to define custom ones. It supports many behavior, interaction and appearance feature, which will help you customize the appearance and behavior of the shape that you create.

     Styling

    It is often required to change the appearance of the shapes. Nevron Diagram for .NET provides an easy and intuitive way to do this by setting different properties to the style attribute of each shape. It supports advances effects like image filters, shadows, transparency etc. which greatly contribute to the outlook of the diagram. In the example image above shapes and the header text drop shadows.

    When it comes to ensuring the consistency of your diagrams outlook you may consider using stylesheets. Stylesheets basically define a set of appearance styles (fill, stroke, font etc.), which are applied to a group of shapes.

    For example: suppose that you have three shapes in your diagram that need to be shaded in red. Instead of setting red fill style to each of these shapes, you can create a stylesheet named "MyColor", set its fill style to red and assign the "MyColor" stylesheet to these three shapes. If you later decide to change your color to blue for example you only need to change the fill style assigned to the stylesheet - the filling of the three shapes will automatically follow.

     Editing

    Often, diagrams need to be visually edited. Visual diagrams editing is mainly performed by tools, commands and via drag and drop.

    Tools are used to interpret the user mouse and keyboard gestures in a tool specific manner. For example: the Create Rectangle Tool creates a new rectangle when the user presses the left mouse button, drags the mouse and then releases it. The same mouse gesture however is interpreted by the Selector Tool in a different way - it selects the shapes, which are hit by the rectangle defined during the mouse dragging. Nevron Diagram for NET comes equipped with a myriad of predefined tools and also lets you easily create new ones.

    Commands are actions, which are typically performed when the user clicks on the command in the toolbar, or when he/she presses a shortcut key combination (for example: Ctrl-Z to undo the last operation). The command action is command specific - some commands enable tools, other perform layout operations, third invoke visual editors for styling etc. Nevron Diagram for NET comes equipped with a myriad of predefined commands and also lets you easily create new ones.

    Drag and drop is the users' preferred way to visually construct diagrams. This is achieved by dragging and dropping library masters in drawings. Masters are organized in libraries - in the example image above the Simple Network Shapes library is opened in the library browser and the user can drag and drop network masters in the drawing. Masters are collections of shapes, which when dropped in the drawing create these shapes at the drop location. Nevron Diagram has built-in support for library management and also provides an extended set of drag and drop related features, such as drag-drop previews, smart gluing, target highlighting etc.

     Layout

    In generally there are two types of diagram layout: manual and automatic.

    The diagram in the image above is manually arranged. Nevron Diagram for .NET provides you with extended set of features, to help you manually arrange your diagrams. These include snapping (to grid, rulers, guidelines etc), simple layout operations (align tops, align bottoms, make spacing equal etc.) and different types of visual aids (previews, highlights etc.).

    There are diagrams however, which cannot be manually arranged, either because they are too large or need to be automatically generated. In cases like these you need to use different layout algorithms, which to perform the arrangement for you. Nevron Diagram for .NET provides you with a complete set of graph layouts, tree layouts and cells layouts.