Hello and welcome to the Mind Matters quick start guide. Here you'll find out how to make new shapes and diagrams from scratch, as well as building on and modifying diagrams from preconfigured templates.


Step 1 - Adding a new shape


First things, first. After the splash screen clears you'll be dropped into your online desktop; essentially a grey background with grid lines (unless you've changed settings already!). The menu bars are how we'll bring our creations to life, you can hover over each to display a tooltip explaining their purpose.

The First Panel contains the app level controls 


Undo and Redo can help you recover from most errors and are enabled when an action is available.


New Diagram  will open the diagram browser menu, allowing you to pick from a number of templates and pre-made samples.


Clear Screen  will remove existing content and allows you to start from scratch but you may wish to save your diagram first  


To begin with, lets first create a diagram from scratch using our shape editor menu. 


Adding a new shape  places a new shape, of the chosen type (defaulting to a simple text box) to the centre of your screen like so.


Of course, we won't always want to add shapes to the centre of the diagram or we won't want the centre of the diagram to be centred on the screen. To shift the viewing position of the diagram we can either use the camera panning controls  or click, hold and drag from any empty position on the screen.


From the camera control panel  we can also zoom in and out, re centre the diagram or even define a new centre point.


Moving shape is also simple, just drag and drop into any required position.


Step 2 - Editing an existing shape


The default new shape is a simple text box but shapes can be composed of pre existing images, graphic drawing commands and text. To edit a shape click to select, it will be surrounded by the selector box and enable the shape editing buttons of the editor menu.

Shapes can be resized as easily as moved. Select and drag the square at the bottom right hand corner of the selector box and drag to resize.


You'll notice as you resize the shape that the text maintains a central vertical and horizontal alignment. This, along with almost everything else, can be customized. Hit the edit shape button  and the shape editor menu will open. The menu can be dragged around the screen to allow for more convenient placement.


In the top two rows we can edit the shapes template (warning - changing templates will delete any customisations you've made), fine tune its horizontal (x) and vertical position (y) as well as its width and height. Note - these units are all in pixels.

Below these rows are the settings that allow us to interact with the internal elements of a shape (ie the graphic, image and text from which they are constructed).

A text box has only two elements. The graphical background and the display text.

Click either of the elements to show their placement settings and to enable the element editing buttons. For now click the "Text: New Shape" button.


Selecting the text element shows that it is aligned centrally, horizontally and vertically. It also has a zIndex value of 1, forcing it to display above the graphic (zIndex = 0).

Order - if order is set, elements with a higher value will be displayed to the right (Order - x) or below (Order - y).

Position - defines a set position for the element or adjusts the position of an aligned or ordered element.

Ie changing "Position - y" for the text shape to 20 will force the text to display 20 pixels below its centrally aligned position.

The edit element buttons  allows new elements to be added, the selected to be deleted, or edited, or duplicated.


Each element type (graphics, images, text) presents a unique editor menu with a variety of editable fields. Editing a shapes default text element can also be accessed from the menu .



Editing Text

Both the text style and the text itself is editable from this menu; including the font itself and any variations.

Stroke width and colour provides an outline for your text. Set stroke to zero to remove the outline.

Fill colour sets the main colour for the font and the alpha (visibility) percentage can be set between 0 and 100%.

Text can also be set to wrap over multiple lines and can be tied to the width of the shape (or a % proportion of width).

Line breaks and "whitespace" can also be added via the main Text field




Editing Graphics 

The graphic editing menu offers full control over the graphical elements of your shape.

Begin by choosing the basic shape of the object from a list of; Rectangle, Round Rectangle, Ellipse and Star.

Each shape is defined by custom dimensions. The first two values for all graphic types is width and height.

NB: You cannot manually update the width and height dimensions if you have opted to resize the graphic with the shape.

Round Rectangle is configured with an additional dimension, the curve gradient of the corners.

The Star shape has two additional parameters. The first defines the number of "points", and the second sets the radius value of the point.

Each shape can also have a defined border and fill of varying colour and opacity (alpha % values).

Finally, the graphic can be set to resize in line with the shape or any proportion of the overall shape height and width.


Editing Images

Editing images is similar to working with other elements. They can be resized manually, or automatically within proportions of the overall shape size.

Images can also be swapped out using the drop down or browser menu.


Unique to images is the option to display the file in "Scaled" or "Tiled" mode. When scaled the image will be shrunk or stretched from its original proportions to the desired size. Suitable for displaying photographs etc.

When Tiled the image will be cropped or repeated to fill the desired size. This allows for seamless texture tiling.

Adding and Managing Images

Whether you're creating a montage of photographs, a design for party invitations or creating a network map using UML markup adding your own images or preferred icon sets will be key to achieving your design goals.

The simplest way is drag and drop them from their location on your computer directly onto the screen.

For each file dropped, an image holding container shape is created and the image is cached for future use (currently, in the early beta versions images will be lost if you clear your browser cache but can be re-added by repeating this process).

You can browse images available to the application from the menu  

From here you can add images via a file upload button, delete images or create shapes from existing images.

Step 3 - Linking Shapes 

Linking shapes is the basis of many diagram types and there are two ways to create links that will be redrawn and repositioned as you move and resize your created shapes.

To create a link between existing shapes select the first shape and then the add link button . The menu screen will be replaced with the "action cancel button". Click this to cancel or, to complete the link, select the shape with which you want the connection made.

To create a new shape, linked to your original first choose the type of shape you wish to create ( to pick from available templates in the shape browser or  to copy an existing shape).


The select the parent shape, ie the existing shape to which you want to add a connection.

Use the add connected shape buttons  to create a new linked shape in the desired direction.


Editing Links (Coming Soon)

Saving Progress (Coming Soon)