L2 G2 is our biggest product and has been used by companies to create ‘big’ applications in diverse markets. Because it is based on Unity for dependency injection and because Microsoft waited quite a while to release a Silverlight analog, it took a while to create a Silverlight analog of G2. We baptised it ‘L2′. Of course we could have used alternative injection libraries (many have popped up this year in fact) but we wanted to stay as parallel as possible to G2 in order to enable our customers to move with ease between G2 and L2. So, it’s there and you can test it online here. It’s still in beta and we welcome any feedback. You can also download the code and the core library, see the L2 product page for more.

S#scripting library. This little jewel allows you in effect to alter an application at runtime much like macro’s. In fact, you can compare it to VBA in office except that our S# library will work in any .Net context (including XNA, Silverlight, WPF and WinForms). I will talk about S# more later this week in another blog posting and Denis Vuyka will also publish soon more information regarding S# and, another kid on the stage; Processing#.

iSee! In addition to this we have been experimenting with novel approaches to diagramming and how to take full advantge of Silverlight and WPF animation capabilities. This lab project which has been now already for one year in the back of our minds is ready to be tested as well. Head over to our iSee demo and let us know what you think. iSee is all about animating visual elements and you can apply it anything which inherits from the FrameworkElement base class, that is…as good as anything you’ll find in WPF and Silverlight. Furthermore, iSee is really easy to use. It boast a fluent API and a very intuitive series of methods. The fluent things means you can chain actions ad infinitum.

For example, the following line of code:

Attach(image, true).Scale(3, 3, Duration.Automatic)
.Move(new Point(145,150)).Scale(0.3, 0.3, Duration.Automatic).Play();

will attach a given image to a canvas, scale it with a factor of three, subsequently move the image to another location and un-scale it to the original proportions. Easy! It would take a substantial amount of work to code this in C# or to create an equivalen storyboard in Expression Blend.

We also wanted to enable certain diagramming scenario’s and have integrated diverse methods which allow you to create diagrams, mindmaps and data visualization with just a few methods. In the demo you will see a few examples of this.

SPGLast but not least, I’m also proud to announce our new Silverlight property grid. Much like L2 is an analog of G2, so is the Silverlight property grid (we call it ‘SPG’) an analof of our WPF property grid (‘WPG’). You can read about it on Denis’ blog and watch this space for more in the next few weeks.

All these products represent a considerable amount of work (testing, demo versions, docs, samples…) and we are still in the process of packaging them. Also, for prices and official releases you’ll have to wait a bit, we’re working on it. Meanwhile let us know what you think. The Silverlight market is booming these days and there are excellent products around, still we think that our set of products fill a gap and represent a unique spectrum of solutions you’ll not find elsewhere.

• the application is fully WPF and uses the composite application block to combine multiple modules
• the customizable reporting engine is quite unique and allows one to create reports at runtime by simple dragdrop. The fact that it’s home-made is astonishing.
• the integrated diagram view is based on our own G2 library and allows a user to create or visualize relationships between hostorical events, geographic data and evidence data
• the docking environment contains a wild amount of sliding panels and windows which at first can be daunting to understand and manage but in the end feel very natural and speed up the access to the many views of functions of the application
• the backend is based on WCF and the data access layer is generated via LLBLGen. Did you know LLBLGen uses Netron for its diagramming needs?
• the indicator module is just like the reporting module  home-made stuff. Both modules would for sure be very useful outside their current application boundaries and it’s somewhat sad to see so much great stuff hidden in a niche application while it could go way beyond it. Who knows how much great WPF stuff is out there in internal enterprise applications?

While the whole project is related to a particular subject (water, floods, lakes, dams, irrigation, rivers, rain…) it would work with many other subjects; production chains, ERP systems, food production systems etc. The diagramming part in particular would work well outside its current domain. The many customizations of G2 in function of this project has turned the core into a data visualization control while retaining the many features it already had. It shows in effect how G2 can be adapted with ease to embrace all sorts of project requirements.

It’s sometimes tough not to blog about the projects we work on because often customers want to keep their own developments hidden (many reasons are playing here…). I wish I could tell you about how our diagramming stuff is used together with Microsoft Surface to boast a compelling experience, how it’s used inside Microsoft Dynamics to visualize CRM relationships, how it’s used in Sharepoint to create an holistic view on information, how…but sorry I’m not allowed So, I’m glad that (for once) I was allowed to say a few words about this project. Go and have a look at the project’s website where additional info can be found.

In the past week I had a look at Expression Blend 3 and was impressed with the amount of new features both for WPF and Silverlight. The application is a delight! I’m not so sure that Sketchflow (see screenshot on the left in case you have no idea what it’s all about) will replace paper and pencil but it does offer a new approach which might suit some workflows in companies. In any case, I was seduced by the diagrammatic representation of the screen-flow which allows you to visualize/change and beautify (screen transitions etc.) the flow of the various WPF/Silverlight forms you hook up together. Obviously it came to my mind to mimic it in G2 and…presto, I had it done in the course of an evening. The most difficult part in the process was actually not the diagramming bit but the definition of the shifting tray which shows up when one hovers over the nodes. The situation is very common and with customers we always have this kind of discussion: the gizmo’s and bells should be shown at all time or is usability increased by popups, sliding panels and expanding trays? Expression Blend is in this context different from other Microsoft application where usually the buttons and gears are fixed (cfr. class designer, SQL designer, DSL designers etc.). Well, this is not a bad things since Expression is aimed at designers and people who are looking for cool effects. In fact, WPF and Silverlight offer much effcts and sparkles which are hardly used in line of business applications nowadays. Personally, I continue to be amazed how much one can achieve with WPF (and G2) without much programming and this little sketchflow proof of concept on the basis of G2 was huge fun.

Below is a short sequence demonstrating the sample. Sorry for not delivering the sample code, G2 is a commercial component (see however the control template below for an idea of what it involves). If you buy G2 the sample comes with the box together with many other (and ever growing set of) samples.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

<style TargetType="{x:Type Sketchflow:SketchFlowShape}">
  <setter Property="MinWidth" Value="130"/>
  <setter Property="MinHeight" Value="25"/>
  <setter Property="Background" Value="Blue"/>
  <setter Property="Foreground" Value="White"/>
  <setter Property="SnapsToDevicePixels" Value="True"/>
 
  <setter Property="Template">
    </setter><setter .Value>
      <controltemplate TargetType="{x:Type Sketchflow:SketchFlowShape}">
        </controltemplate><controltemplate .Resources>
          <storyboard x:Key="SBExpand">
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="0"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20"/>
            </doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="0" KeySpline="0,0,0.625,1"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20" KeySpline="0.11,0.99,1,1"/>
            </doubleanimationusingkeyframes>
 
          </storyboard>
          <storyboard x:Key="SBCollapse">
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="1"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20"/>
            </doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="20"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="0" KeySpline="0.08,1,1,1"/>
            </doubleanimationusingkeyframes>
 
          </storyboard>
          <objectdataprovider x:Key="Tags" ObjectType="{x:Type Sketchflow:Stuff}" MethodName="get_VisualTags"/>
          <style x:Key="TagButton" TargetType="{x:Type Button}">
            <setter Property="Background" Value="Transparent"/>
            <setter Property="Button.Command" Value="{x:Static Sketchflow:Window1.ChangeBackgroundCommand}"/>
            <setter Property="Button.CommandParameter" Value="{Binding}"/>
            <setter Property="Button.Cursor" Value="Hand"/>
            <setter Property="Template">
              </setter><setter .Value>
                <controltemplate TargetType="{x:Type Button}">
                  <stackpanel x:Name="line" Orientation="Horizontal" Background="{TemplateBinding Background}">
                    <rectangle Width="5" Height="5" Fill="{Binding Color}" VerticalAlignment="Center" Margin="5,3,0,0"/>
                    <textblock Text="{Binding Title}" HorizontalAlignment="Stretch" Margin="7,0,0,0" VerticalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                  </stackpanel>
                  </controltemplate><controltemplate .Triggers>
                    <trigger Property="IsMouseOver" Value="True">
                      <setter Property="Background" Value="Silver"/>
                    </trigger>
                  </controltemplate>
                </setter></style></controltemplate>
              </setter>
 
            <setter Property="FontSize" Value="10"/>
            <setter Property="Foreground" Value="White"/>
          </style>
          <datatemplate x:Key="TagTemplate">
            <button Margin="-2,0,0,0" Style="{DynamicResource TagButton}" Width="79.5" Content="{Binding }"/>
          </datatemplate>
 
        <grid x:Name="PART_maingrid" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
          <border x:Name="tray" Margin="8,0,0,1.046" VerticalAlignment="Bottom" Height="20" BorderBrush="{TemplateBinding Background}" BorderThickness="1" CornerRadius="0,0,5,5" Background="#FF333333" RenderTransformOrigin="0.5,0" Width="83.737" HorizontalAlignment="Left">
            </border><border .RenderTransform>
              <transformgroup>
                <scaletransform ScaleX="1" ScaleY="1"/>
                <skewtransform />
                <rotatetransform />
                <translatetransform />
              </transformgroup>
            </border>
            </grid><grid>
              </grid><grid .RowDefinitions>
                <rowdefinition Height="Auto"/>
              </grid>
              <grid .ColumnDefinitions>
                <columndefinition />
                <columndefinition Width="Auto" MinWidth="17.053"/>
              </grid>
              <stackpanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,3,0,0">
                <popup x:Name="TagPop" AllowsTransparency="True"   PopupAnimation="Slide"       HorizontalOffset="0"  VerticalOffset="-112">
                  <border Background="#FF333333" CornerRadius="3" HorizontalAlignment="Left" Width="84" Height="111">
                    <listbox x:Name="TagList" ItemsSource="{Binding Source={StaticResource Tags}}"  SelectedIndex="-1" ItemTemplate="{DynamicResource TagTemplate}" Background="{x:Null}" />
                  </border>
                </popup>
                <!--<image Source="Images/ConnectExistingScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>-->
                <button Style="{StaticResource ConnectNewScreen}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <image Source="Images/ConnectNewScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <image Source="Images/InsertComponentScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
              </stackpanel>
              <!--<image Source="Images/ChangeVisualTag.png" Width="Auto" Height="12" Grid.Column="1" Margin="0.872,3,5,0" HorizontalAlignment="Stretch"/>-->
              <button Style="{StaticResource ChangeVisualTag}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Width="Auto" Height="12" Grid.Column="1" Margin="0.872,3,5,0" HorizontalAlignment="Stretch"/>
 
 
 
          <rectangle x:Name="PART_rec" RadiusX="2" RadiusY="2" Stroke="{x:Null}"  StrokeThickness="2" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}"/>
 
          <textblock Text="{TemplateBinding ContentControl.Content}"  HorizontalAlignment="Center"
                         VerticalAlignment="Center" Foreground="White" FontWeight="Bold" />
          <!-- PART_DragThumb -->
          <core :TranslationThumb x:Name="PART_DragThumb" Cursor="SizeAll"/>
          <!-- PART_ConnectorDecorator -->
          <core :ConnectorDecorator x:Name="PART_ConnectorDecorator"
                       Visibility="Hidden"
                       Template="{StaticResource ConnectorDecoratorTemplate}"/>
          <rectangle x:Name="Arrow" Visibility="{TemplateBinding ShowArrow, Converter={StaticResource BoolToVisibilityConverter} }"  Stroke="{x:Null}" HorizontalAlignment="Left" Width="21" Height="21" Fill="{DynamicResource LitlArrow}" Margin="-7,0,0,14"/>
 
 
        <controltemplate .Triggers>
          <datatrigger Value="True" Binding="{Binding RelativeSource={RelativeSource Self},Path=IsSelected}">
            <setter TargetName="PART_rec" Property="Stroke" Value="#83EEEEEE"/>
            <setter Property="BitmapEffect" TargetName="PART_rec">
              </setter><setter .Value>
                <outerglowbitmapeffect GlowColor="White" GlowSize="7" Noise="0" Opacity=".41" />
              </setter>
 
          </datatrigger>
          <trigger Property="IsMouseOver" Value="true">
            <!--<setter TargetName="PART_ConnectorDecorator" Property="Visibility" Value="Visible"/>-->
            <setter TargetName="PART_rec" Property="Stroke" Value="#83EEEEEE"/>
            </trigger><trigger .ExitActions>
              <beginstoryboard Storyboard="{StaticResource SBCollapse}"/>
            </trigger>
            <trigger .EnterActions>
              <beginstoryboard Storyboard="{StaticResource SBExpand}"/>
            </trigger>
 
          <datatrigger Value="True" Binding="{Binding RelativeSource={RelativeSource Self},Path=IsDragConnectionOver}">
            <setter TargetName="PART_ConnectorDecorator" Property="Visibility" Value="Visible"/>
          </datatrigger>
        </controltemplate>

We’ve been busy. The screenshots reveal quite a bit the upcoming features but let me be explicit:

• Groups: shapes can be embedded in groups ad infinitum (this is an undoable action and copy/cut/paste works with groups as well, of course)
• Flowcharting: better support for standard flowcharting
• Arrows and connections: better support for databinding your stuff (i.e. data backend) to connections and related adorners
• Rotations: rotating shapes and groups (undoable action)
• Unity 2.0: Unity merges with the ObjectBuilder2. Nothing shacking here but it will simplify the underlying data exchange pipeline of G2.
• Library support: shapes, groups, layers, pages and whole diagrams can be saved to libraries and organized in categories. This features is based on an adapter mechanism, which means you can have libraries in a database backend or accessible via WCF etc.
• Alignments: aligning shapes is now possible. In conjunction with the snap & grid features this is particularly useful to have a nice layout.
• Snap & grid: everything has become snap-able.
• Linking: better support inside shapes to (hyper)link data; either diagram elements or data entities coming from your backend.
• XML: better support for XML import/export, extending the already very solid and beautiful data exchange pipeline of v1.0
• Theming of whole diagrams: apply a style to a complete diagram (cfr. Microsoft PowerPoint)
• Auto-connect shapes: auto-add or auto-connect shapes via the adjacent arrows appearing when hovering over shapes (cfr. Microsoft Visio)
• Bug fixes and squadrillions of little changes to make G2 better, faster, more useful, more business and data oriented, more beautiful.

No date fixed yet to release v2.0 though it’s pretty stable already now. So many things are going on these days… I sincerely hope to deliver a big headline one of these days regarding our future (and G2′s future in particular). In any case, I feel immensely proud about G2′s wonderful architecture and the breadth of applications it can support, the scope of features and the many high-tech subtleties which you will not find in any other diagramming package. It leaves the competition beyond the diagramming horizon.

Among the more salient features:

• editing properties of multi-selections
• theming and styling
• filtering of properties (very handy for easy access!)
• custom editors can be added with ease
• full control of what/how props are seen in the editor
• custom categories

In fact, everything you ever wanted and way better than the Expressing Blend propertygrid.

The official product page and our updated information brochure will be soon available but prices are as follows:

• the single developer license (binaries, getting started guide) is yours for $200,-
• the site license (binaries, sources + unit tests, getting started guide) is 500$

Both packages include one year of free updates and email support. Of course, we also offer custom development and integrations with our other products.

Stay tuned, we have more stuff in our backyard we’ll release in the near future!

The latest addition (in the WPF futures) to the official WPF project on CodePlex is related to the MVVM pattern and refers to this article of The Orbifold. I remember well, I wrote this article on December 12th 2006 (three years ago!) and I don’t think it’s in any way particularly important. Also, rather strange that it’s only now that MVVM (and all things related to that) gets much attention…maybe WPF finally gets some momentum in the enterprise?

While I do love theorizing in the context of theoretical physics, I don’t see why people find it so important to adhere to some strict pattern when it comes to software development. The MVVM pattern is interesting but I have no idea what kind of patterns I’ve used in G2 or in Graphite. Maybe software patterns become part of one’s thinking after a while and the name of these patterns become irrelevant. As far as I’m concerned, I think one should use techniques and patterns which fit the aims and the context of the application, whether it’s pattern X or Y and whether it’s the correct implementation of X and Y is really secondary. Obviously, if you have never implemented an undo/redo mechanism it’s useful to have a look at the command pattern. But could it be that the need for patterns comes with the difficulty to choose and the immense choice we nowadays have? Too many frameworks, too many open source projects, too much flexibility. At the same time, uniformity has advantages: use well-known patterns if you want to make your code more transparent to others. Go and get the MVVM kit from CodePlex.

(The second most popular article on this site is related to…the tab control! Figure out why…)

How to picture a 5-dimensional sphere or a see the correlation of  112-dimensional weather data? The answer was found in 1885 when parallel coordinates were invented and later refined in 1959 through  Inselberg. The idea is actually very simple, given some N-dimensional space of data you draw N parallel lines and each line has its own scale. Plot a given data point on these lines by creating a line between the N point of this multi-didmensional point. In this way you get a line per data point and the series of given data points are mapped to a series of lines on the graph. The situation being much like projective geometry where we also find a back-and-forth thinking between lines and points in space. The good thing about such a representation is that if points have some accumulation in a particular dimension you will see it because lines will accumulate on the axis representing this dimension (see adjacent image). This kind of correlation can usually only be detected through statistical analysis, but what do you do if you want to record or supervise data which continuously comes in from real-time systems? This would mean a continuous mathematical analysis of the sampled data and this would entail some very custom algorithm bound to the particular context.

A customer of ours recently challenged us to implement the parallel coordinates visualization in WPF. While quite straightforward at first sight it proved to be more difficult than we initially thought for two reasons:

• non-numeric data: what to do if you have some string data in one of the dimensions? Say, you want to visualize in one of the dimensions a timestamp or telephone numbers or names of patients.
• how to emphasize the accumulation points in the graph? While in the screenshots above you can actually see well the discrete tendence in the second dimension, the screenshot on the right bestows you with a challenge to detect it.

The first problem was tackled through an internal mapping of the data which spreads the non-numeric data across an axis. The drawback of this is that at various levels one has to switch between the actual

data and the internal representation for labels, line hit during hovering, the histogram (see below) and any calculation in general. The second was more difficult and entailed some analysis of the data and various visual alternatives to attract the attention of the user (human interpreter of the data). The end-result is an histogram which like a rotated bar chart on the axis graphs the relative amount of crossings on the axis. The histogram actually shows also the opposite of an accumulation, since (see the second axis in the screenshot below) an equal spreading of the histogram’s rectangles means an equal distribution of the lines across the dimension axis.

Other minor features we added to this data visualization are; the possibility to hover over the graph and see the actual data of the multi-dimensional points, datagrid binding and editing, customization of look & feel through dependency properties, swapping data axes, scaling data vertically on a particular axis.

Probably the most satisfactory moment for myself during the development was at the point when it became clear that just any CSV/spreadsheet data can be bound to the parallel graph visualization. Indeed, due to the internal mapping mechanism one can present any type of tabular data and as a proof of concept I mocked some random spreadsheet in Excel which was subsequently visualized without a hitch.

Stocks & shares anyone? Let me know.

1
2
3
4
5
6
7

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Core="clr-namespace:Company.Core;assembly=Company.Core">
...
<style x:Key="xxx" TargetType="{x:Type Core:SomeObject}">
...
</style></resourcedictionary>

and the compiler cannot find the ‘SomeObject’ class. Now, you can safe yourself a few hours because this error is totally fake. There is no problem with the namespace or the XAML syntax. Just change the definition of the ‘core’ (whatever name in your context) alias to

1
2
3
4
5
6
7

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Core="clr-namespace:Company.Core">
...
<style x:Key="xxx" TargetType="{x:Type Core:SomeObject}">
...
</style></resourcedictionary>

and all will be well. For some reason when you refer to a class withing the same assembly you should not set the ‘assembly’.

In a previous post I described Graphite for Silverlight which allows you to display diagrams inside a browser with automatic layout (the spring-embedder algorithm). In a swift move I converted the library to a WPF control, which at the same time allowed me to add some features which were less trivial in Silverlight because of the constraint Silverlight imposes in comparison to WPF.

To demonstrate Graphite for WPF I created some kind of ‘star sky’ of science. Ideas, persons and standard nodes are all styled in the host application and you can experiment with the Graphite API and the visual representation (look into the App.Xaml file). When hovering over a node a custom tooltip appears which can also be customized, see the description of Graphite for Silverlight for more details. Zooming of the diagram is implemented through the mouse-wheel. The only restriction of the demo is the maximum amount of ten nodes.

Loading nodes accurs through some XML format which you can define yourself, it’s not part of the control and it allows in this way a wide variety of imports/exports. It would be quite easy, in particular, to attach the application to some web or WCF service and load/unload nodes accordingly (Google search results, social network visualization and so on). See also Microsoft’s .NetMap initiative in this context (it’s not WPF though).

Download the demo
(requires VS2008 and .Net 3.5sp1)

It took me little effort to shift my WPF experience to Silverlight and to transpose some layout algorithms. There are some difference, for sure, but hardly anything I can complain about. Alltogether I truly enjoyed the hours I spent on developing this little ‘applet’. Graphite is very similar to the Java applet but the implementation is more clean and I have taken much care of the API. The only significant part is the layout algorithm, which you can almost copy/paste from the Java applet or fetch from some Netron code. Hyperbolic layout and tree layout are easily implemented but I’m not sure I will, because I have to focus my attention back to GraphSquare.

See for yourself:

• the black version
• the green version

Usage:

• use CTRL-click on nodes or on the canvas to add random nodes
• use SHIFT-click to select nodes before creating a new edge. Note that you can select only two of them.
• use ALT-click to delete a node and its bindings
• hover over a node to see the underlying info

Features:

• things are pretty much all encapsulated into a custom Canvas object
• the API and events make it easy to manipulte the diagram in any context
• the architecture is model-view based, the model being a straightforward graph data structure
• data can be imported from flat text files or from XML
• the visualization is based on WPF/SIlverlight templating and styling features outside the control, which means one can customize colors and appearance. The flexibility of WPF’s triggers and other subtleties is missing in Silverlight but one can get quite far nevertheless.
• the layout algorithm is continous, which means you can drag nodes around like beans in jam. It all behaves very ‘organic’.

Addendum: due to a different font on your side you might see node titles a little bit bigger or smaller than on the screenshots.
Demo: go ahead and have fun with the Graphite demo.