Sunday, July 3, 2011

Process Diagrams with SVG

Whenever you walk in to manufacturing or process control centers, you see the giant overhead displays and monitors with graphics on them used to monitor systems.

These graphics were drawn by engineers using very expensive tools that then connect those graphics to data historians and process control systems. It was my desire to have this kind of interface for a home, small business, or hobbyist that first inspired me to develop Nimbits.

You can create a Process Diagram in Nimbits in SVG format to make a visual representation of your systems and display changing point values, color changing alerts and link to other diagrams and web pages.

I use InkScape to draw my diagrams. It is a free and open source project that runs on Windows and Linux. You can install it on Ubuntu right from the repository, or download it on windows, macs and Linux systems from Nimbits can display most SVG Diagrams, and the official doc for adding live point data to them is available here on the Nimbits Wiki.

I like to use my aquarium as an example for Nimbits, even though it can do much more than monitor fish. First, it's a simple, closed system with a lot of moving parts. Secondly, i'd like to see if I can make my fish tank a tax deduction.

Since Nimbits diagrams can be made public, so anyone can see them.  Feel free to take a look at my Fish Tanks current status right now here: Link to My Aquarium's Process Control Diagram.  You should see something like this (if your using IE, you may need to install Chrome Frame):

This graphic demonstrates the following features:

  • Try clicking on the F Temp to see a live chart of current values. 
  • Check out the Temp C value. This is the result of a real time calculation that converts my F reading to C. 
  • The two charts, one showing a water level and the other showing the Temp F are just Google Charts using the Nimbits Chart API. You can create any type of chart and embed them in your diagram. 
  • Check out the light, indicating the light is on or off. If you load this graphic at night on the east coast of the US, the light should be black.
  • Click on the Pump.  It will take you to a drill down graphic to see some data about the pump. 
  • Click on the links, they will take you to external web sites. 
  • The Data points in this diagram are shared as public points, you can mix private and public points, Nimbits will only show you what you're authorized to see.
  • Some of these values are entered manually. The Nitrate value expects a new value once a week, if I forget, the point goes Idle and turns red to remind me to do a test.

  • Log into Nimbits and create your Data Points.
  • Download InkScape and start a new drawing. 
  • Add a Text Box to your drawing
  • Click on the Text Box and Select Edit - Edit XML
  • Add a point=pointname value, and an action=[value,onoff,alert,idle]
  • Based on the action=value, Nimbits will do the following when the graphic is viewed:
    • value - show the current value in the box
    • onoff - if the value is zero, turn the shape black, else turn it yellow
    • alert - turn the shape red if the point is in an alert state.
    • idle - turn the shape red if the point is idle.
  • You can also draw a shape and add diagram=diagramName action=self to add a link to another diagram.

On the Nimbits Portal, select the "Upload Diagram" button above the Point tree to upload the diagram just like a Point, you can drag it into folders and organize it with your point.

You can then configure that graphic to share it publicly, or with your connected users.

When you are in the Nimbits Portal, you can click on the graphic to add it to the data display, enter values and trend by clicking on values.

Here is an XML snippet from my SVG diagram that shows the format of a Nimbits XML Node it is all generated by the drawing program, it's just a matter of adding the action and point properties.

<text action="idle,value" point="PH"  y="187.78877" x="-119.55978" id="tspan3034-1" id="tspan3198" /></text>

Please visit to learn more.


  1. This comment has been removed by the author.

  2. SVG is the greatest format to use for diagrams.Since scaling will not matter. How ever you scale it vector will stay on the top quality that there is. That is the main difference between vector and raster. We, at Creately introduced SVG for our users to print large scale diagrams.

  3. Ever wanted to get free Twitter Followers?
    Did you know that you can get them ON AUTOPILOT AND ABSOLUTELY FREE by getting an account on Add Me Fast?