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.  

Monday, 1 December 2014

Markup for class diagram and other changes

Class and Interface markup

Two new tags added for creating class diagram.

1.       .class. tag to indicate a class object
2.       .inf. tag to indicate an interface

Here is an example usage:


Minor changed to dot and bullet markup

A sequence of dots that is not followed by text is shown as:

·         Number of consecutive dots <= 3 is shown as typed “.” , “..”, “…”
·         Number of consecutive dots > 3 is now equivalent to .div. tag

A sequence of dots followed by text is still representing as bullet like before

. bullet 1
. bullet 2
.. incline bullet
… triple incline bullet

  •   bullet1
  •  bullet 2
    • incline bullet
      • triple incline bullet

Monday, 17 November 2014

Nexus 10 and Android Lollipop (5) problem (Solved)

This is now address in version 1.6.0.  I like to give special thanks to Anton and Felix for helping me verifying and debugging this problem.

What is the problem?

There seems to be a bug with Nexus 10 and Android L opengl shader program implementation.  I have been using this shader program for all platforms and devices including IOS since now.  

precision mediump float;
            uniform vec4 vColor;
            varying vec2 vTextureCoord;
            uniform sampler2D sTexture;
            uniform lowp float textureMask;

            void main() {
                  gl_FragColor = textureMask * texture2D(sTexture, vTextureCoord)*vColor  + (1.0- textureMask)*vColor;

 This shader program is simply for rendering any set of vertices with color and/or texture based on the "textureMask" variable.  I dont know exactly what happened internally with the driver but when rendering different vertices as color or texture the driver throw a glerror 1285 which stand for "out of memory".  However, I think the problem is because of the memory corruption when switching between texture and color.  

Case 1) To render object as pure color, I just need to pass in just the position vertices while disable the texture vertices.  

Case 2)  To render object with texture, I need to pass in both the position and texture vertices.

 What I think is that when switching from case 2 back to case 1.  The driver may not recognize that the texture vertices should be disable and potentially reference to incorrect memory.  This is my guess but it make the most sense.

The solution:

I have created two separate shaders for each purpose so there are no need for extra flag and optional parameter for the cases I described.  By breaking them into two simple shader programs I am able to bypass the driver glitch.

Lesson Learned:

Simple is better :)


Right now there seems to be problem running Drawexpress with the latest Android Lollipop on Nexus 10.  The problem is related to opengl issues.  I am not sure about the exact problem yet since I dont have the Nexus 10 device to test with yet. If you have a Nexus 10 please hold off on updating to Lollipop. 

If you have other devices and are having the problem loading Drawexpress after Lollipop update please email me at  I am also greatly appreciated if anyone with Nexus 10 who is willing to join my Android beta testing program.

- PD

Thursday, 23 October 2014

Color Workflow and Palette

Hello, this is Peter Duong the author of DrawExpress.  One user had reminded me that I haven’t updated this blog for a while.  At that time, I was updating features here and there.  However I felt that I wasn’t working on anything exciting to talk about.   You can follow my changes log to get an idea of what have been done since.  Anyways, the “Features and Roadmap” page is turning out to be close to the changes log.  Now, I think it is better to discuss about some of the major pain points and design decisions instead. 

So looking back at all the features added recently, I feel that some of them aren’t solved properly yet.  Although, it provides the added functionality, however it is still lacking in the user experience aspect of DrawExpress.   So I decided to take a step back to look at them and come up with better a solution before moving forward. So for the next few blogs I am opened to discussion and hopefully getting some insights from you.

Here is a list of things that I have in minds:

  • Color workflow
  • Line and curve
  • Custom Library
  •  Project and file organization
  • File sharing and synchronization

For this post I am going to discuss about the color workflow.  Right now the coloring workflow is a bit confusing between the gesture and the style menu.   For those wanting a better visual diagram this is an area that will need improvement both in the UX and the coloring options.  I am still in favor of leaving in the gesture option but it will need to support the ability to change text and stroke.  Right now you can use gestures for fill and the menu for text and stroke.   

Also, the color palette and theme is really rigid and will need to be customizable.  I do not think it is necessary to create an open ended color mixture every time you want to change the color.   However, an ability to replace some of the default colors on the bar with your own favorite would be better.  I must admit that the default colors set aren’t well thought out.

Please feel free to leave your feedback regarding to this topic here or email me at   I’ll be updating this blog with more implementation details later.