2. Creating Mindmap

---

2.1 Shortcuts

	Win	Mac
Insert Child Topic	Tab	Tab
Insert Sibling node	Enter	Enter
Insert higher node	Shift + Tab	Shift + Tab
Insert relationship	F4	F4
Insert Summary	Ctrl+Alt+T	Commands+Alt+T
Undo	Ctrl + Z	Commands+Z
Restore	Ctrl + Y	Commands+Y
Delete	Delete	Delete
Newline	Shift + Enter	Shift + Enter
Font-weight	Ctrl + B	Commands+B
Italic	Ctrl + I	Commands+I
Save File	Ctrl+S	Commands+S
Zoom in	Ctrl + "+"	Commands+ "+"
Zoom out	Ctrl + "-"	Commands + "-"
Drag	1. Press and hold the right mouse button 2. Space button + hold down the mouse button	1. Press and hold the right mouse button 2. Space button + hold down the mouse button

2.2 Add Content

2.2.1 Edit Text

Select and double-click a topic to edit the text.

2.2.2 Add Sibling Nodes?

Select the topic.

Click the [Add Sibling Node] button on the left toolbar.

Shortcut key: Enter (Win/Mac).

2.2.3 Add Child Nodes

Select the topic.

Click the [Add Sibling Node] button on the left toolbar.

shortcut key: Tab (Win/Mac).

2.2.4 Insert Relationship Lines

Select the topic.

Click the [Insert relationship] button on the left toolbar, which will display a relationship line derived from this node.

The end point moves with the mouse, and the arrow points to any other node.

2.2.5 Add A Summary

Select the topic.

Click the [Insert summary] button on the left toolbar.

2.2.6 Undo the Previous Operation

Select the topic.

Click the [Undo] button on the left.

Shortcut keys: Ctrl+Z (Win), Commands+Z (Mac).

2.2.7 Restore the Previous Operation

Select the topic.

Click the [Restore] button on the left.

Shortcut keys: Ctrl+Y (Win), Commands+Y (Mac).

2.2.7 Adjust the Tier

Same level: After selecting the content to be adjusted, drag it to the position you want.

Up and down levels: After selecting the content to be adjusted, left-click and drag the content to the previous level box, the box shows yellow and you can let go.

2.3 Layout, Theme and Style

2.3.1 Change Layout

On the editing page, click [Style] on the right to change the style.

Currently we offer 7 styles.

• Logic Chart-right;
• Logic chart-left;
• Left and right;
• Org chart;
• Tree chart;
• Fishbone chart;
• Timeline chart;

2.3.2 Change Style

On the editing page, click [Style] on the right to change the style.

You can edit:

• Font style;
• Frame style;
• Connecting line style;

2.3.3 Change Theme

On the Editing page, click [Theme] on the right to change the theme.

Currently we provide 6 themes.

3.2 Shape Management

We provides a large number of shapes for you to use.

3.2.1: Drag and Drop

In the flowchart making page, select the shapes in the left shape library, and drag it to the canvas.

3.2.2: Search the Shapes

If you do not know the type of the graphic style, you can enter the graphic name in the [Search Box] to quickly find it.

3.3 Format of Shapes

Clicking on any graphic will activate the navigation bar for styles, texts and arrange.

3.3.1 Style

After selecting the shape in the canvas, you can customize the fill color, line color, border and other parameters.

(1)Fill & Gradient

• Fill:
  Click the color wheel to select and switch the color fill style of the graphic;
• Gradient:
  Check [Gradient] to make the fill color gradient, and set the gradient color and direction (up, down, left, right).

(2)Line

• Line Type:
  Check [Line Type] to make the shape appear border, and adjust the line style of the outer border (solid line, dotted line, dotted line style, etc.);
• Line Width:
  Adjust the width of the border line based on the line type.

(3)Opacity

• Opacity:
  Adjust the transparency (0-100%) displayed by the graphic style in [Opacity].

3.3.2 Text

Double click on the text and you can set the text font, position, color, spacing and other parameters in the pop-up toolbar.

（1）Font Style

In the [Font] area, adjust the font properties of the text content, and font styles such as bold, italic, underline, and alignment.

（2）Color/background/border

Activate the related properties by checking the font color, background color and border color, and adjust the corresponding color of each property as required.

（3）Text spacing

In 【Spacing】, set the top, global, left, bottom and right parameters of text content based on graphic style.

3.3.3 Arrange

Select the shapes in the canvas, and you can adjust the position, angle, and direction at the right “Arrange” toolbar.

（1）Bring to front & Send to back

• Bring to front:
  Put the entire graphic content on the first layer of the layer;
• Send to back:
  Put the entire graphic content to the last layer of the layer.

（2）Size & Position

• Size:
  increase or decrease the width or height of the selected graphic;
• Constrain proportions:
  If checked, it will be proportionally scaled on the basis of width or height when resizing;
• Position:
  Move the position of the graphic based on the original position of the graphic style.

（3）Angle

Customize the rotation based on the original graphic, or click the [Rotate 90°] button to rotate the graphic 90° clockwise.

（4）Flip

• Horizontal:
  Let the graphics perform left and right mirror flip processing on the original basis;
• Vertical:
  Let the graphics be flipped up and down on the original basis.

3.4 Format of the Whole Page

3.4.1 Diagram

A mouse click on a non-elemental content activates the "Chart" box, where you can set [View], [Options], and [Page size] and other related parameters.

(1) View

• Grid:
  When checked, the non-element parts of the flowchart are covered by the grid, and the grid size and color can be adjusted.
• Page View:
  When checked, the flowchart will display the page.
• Background:
  If checked, the background color of the non-element area of the flowchart can be adjusted.
• Shadow:
  Check to make the graphic style appear shadow.

(2) Option

Connection arrows: After checking, move the mouse to the graphic style and it will appear, click the arrow to connect and copy, drag and drop to connect (ctrl+click to copy, shift+click to connect, ctrl+drag to copy).

• Connection points:
  When checked, the non-element parts of the flowchart are covered by the grid, and the grid size and color can be adjusted.
• Guides:
  When checked, an intuitive auxiliary alignment line will appear and automatically align when moving the graphics, which can serve as a reference.

(2) Page Size

You can adjust the single page size of the flowchart in [Page Size], and set the page to [Portrait] or [Landscape].

3.4.2 Style

Here are 20 styles of flowcharts for you.Also you can change the line of the shapes into sketch/rounded/curved.

3.5 Connector

Connector is used to connect one graph to another.

3.5.1 Add Connector

Tick “Connection Point” in the right toolbar. Click a shape and drag a connector to another shape.

3.5.2 Change connector

• Connection point change:
  Move the mouse to the connection point of any connector and click and hold the mouse to drag it to another graphical connection point.
• Connection line change:
  Move the mouse over the connection line of any connector point and click and hold the mouse to drag it elsewhere.