Monday 3 August 2015

Mind Mapping Workflow

New mind mapping workflow is added in this Android patch 1.8.0. This workflow is to simplify the creation of mind map. You can create a mind map by choosing the mind map option when creating a new file.

To begin, you start by drawing your central idea shape and then type in the central idea immediately afterward. From the central idea, you can simply draw out branches any way you want either with straight, curve, or multi-step lines.

It is easier to edit branches looks and feels by redrawing the connector line again. For example, drawing a straight line on a curved connector will act as a quick replacement command. You can re-route children node by simply selecting the start point of the connector and drag it to other parent node. Finally, to draw link between existing nodes you can just draw line connecting them.

Here are some additional mind map specific controls

The current implementation is still in beta stage as it is still missing some advance mind mapping features such as auto layout, more styling option, mindmap format, and more. Please help us improve them by sending your suggestions to


Wednesday 18 February 2015

FontAwesome Icons

You can add any of the FontAwesome 4.3 icons ( to Drawexpress as text markup
To add an icon from the list, you just type in the label box the following tag naming convention:
.fa-[fontawesome icon name]  such as .fa-facebook. , .fa-envelope. etc
Here is an illustrated example:

Wednesday 4 February 2015

Wireframe Concept (BETA)

This is still in beta phase as I am still figuring out the rest of the workflow.  This patch provides a quick way for you to start a high level design of your app/web interface.  It is meant to keep it simple so it doesn’t have any of the interactive stuffs that you would get from some other prototyping apps.

To begin wireframe, you must drag one of the wireframe elements from the shape library.  The wireframe element behaves similar to boundary box.   
·         Selection only at the edge
·         Two move functions: move all and move individually
·         Drawn object is now closer to the draw size dimension instead of standardized dimension
·         Can draw lorem ipsum text element

Lorem ipsum

You can create lorem ipsum by drawing three consecutive top-down horizontal lines either within a shape or outside.  You can also change the ipsum size using the font size slider.  Lorem ipsum is currently represented by .ipsum. tag so you can override it with the actual text at later time.

Finally here is a sample:

Please email if you have any suggestions


Saturday 10 January 2015

Sequence Diagram Patch

Hope everyone have a happy new year!  This is the first patch of the year 2015 and it is focused on drawing sequence diagram.   Personally, I think sequence diagram is the best UML notation to illustrate communication between multiple systems.  In the past, I haven’t found a tool that could create them with ease.  Well with the additional components added to this patch the search is over.  Here are what's added

  •  Ability to change sequence diagram head with any of the vector object from library
  •  Add sequence activation and improve sequence connector
  •  Add sequence frame

Changing Sequence Head and Drawing Sequence Activation

You can change the sequence head by dragging any vector shape from the library over the existing sequence head.  To draw sequence activation, you need to draw a thin box along the sequence timeline.  The connector will automatically adjust itself when the activation is detected.  You can change the activation property such as coloring and deleting with the normal gesture command. 

These will be explained by the following slide:

Drawing Sequence Frame

You can draw a sequence frame by drawing a box around the whole sequence or drawing a box that span more than one sequence timeline.  Sequence Frame behaves like a boundary box.