ProcessOn is a professional and powerful drawing tool that supports real-time online collaboration among multiple people. It can be used for drawing various graphics such as Mindmap, Flowchart, Prototypes, UML, BPMN, Network topology diagrams, etc. It is loved by users for its simple page design, smooth operation experience and rich and intelligent content resources.
However, for new users, they may feel confused when faced with many functions and drawing options. Therefore, in order to let every new user of ProcessOn quickly familiarize themselves with this tool, we have compiled a beginner's guide to help everyone get started easily.
The content of this article mainly includes the following 5 parts: how to create files with ProcessOn, introduction to ProcessOn mind map editor, introduction to ProcessOn flowchart editor, introduction to common operation functions of ProcessOn, and introduction to ProcessOn enterprise.
Visit the homepage of ProcessOn official website. Users who are not logged in click the "Free Use", "Login", and "Free Registration" buttons. After completing the login, enter the personal file page.
Operation process for users who are not logged in
Users who are logged in click "Enter My Files" to enter the personal file page.
Operation process for users who are logged in
The layout of the personal file page includes ten major areas, as shown in the figure below:
Functional area distribution of the personal file page
You can click the "New" button on the left side of the personal file page and choose to create or import a file; you can also right-click the blank area on the right side of the personal file page to create a file directly.
New file support formats
Currently supported import document types include xmind, mmap, mm, km, opml, pos, vsdx, and csv formats.
Theme is one of the basic elements of mind mapping, There are four different types of themes in a mind map, namely central theme, branch theme, sub-theme, and free theme. According to the logical relationship, it also includes parent theme and peer theme.
4 types of themes in mind map
The ProcessOn mind map editor interface includes: title bar, menu bar, editing area, multi-canvas management bar, page navigation bar, right toolbar, and top function button.
Functional area distribution of mind map editor
Double-click the title in the tab bar to modify the title name. The icon symbol on the left side of the title is the shortcut operation entrance. When the mouse is placed on this area, a drop-down menu will appear, including new file, current file preview mode, manual save current file, search and replace keywords, history record and other operations.
Mind Map Editor Title Bar
The asterisk on the right side of the title bar is the favorites button. Click it to add the current file to your favorites. You can find it next time in the personal file page->My Favorites.
①【Undo/Redo】: Ctrl/Cmd+Z for undo, Ctrl/Cmd+Y for redo.
②【Format Brush】: The format brush can simplify the steps and unify the overall page content style, which helps improve drawing efficiency. If you want to quickly apply the style in a certain theme to other themes, you can click the theme and select the format brush function, then click the theme you want to apply the style to, and finally left-click the blank area or press the ESC key to exit the format brush. In addition, you can also hold down the Ctrl key to select multiple themes and adjust the format at the same time.
Menu Bar--Format Brush
③【Association Line】: Used to illustrate the relationship between any two nodes. You can add text to the association line to describe the relationship. Drag the association line to adjust it to a straight line or curve. Click the bubble on the association line to set the end point, color, thickness, etc. of the association line.
Add association lines
④【Summary】: Summarize and summarize multiple nodes. There are two ways to add a summary:
i. Click the node and select the summary function, then drag the box to select more nodes, and finally give a summary description;
ii. Click the parent topic and directly select the summary function. Finally, click the bubble on the summary to set the style and color.
Add summary
⑤【Frame】: Used to emphasize one or more nodes, you can add text comments above the frame. There are two ways to add a frame:
i. Click the node and select the frame function, then drag the box to select more nodes;
ii. Click the parent topic and directly select the frame function. Click the bubble on the frame to set the style and color of the frame.
Add frame
The editing area is the main area for drawing mind maps. After creating a new blank file, there is only one central topic on the page. You can add branch topics by pressing the Enter key, add subtopics by pressing the Tab key, or right-click the central topic and select "New Subtopic". Click to select a topic and drag it to adjust the position of the topic and its subtopics, and even disconnect the entire subsequent part and reconnect it with other parts. When drawing, the width and height of the canvas in the editing area will automatically expand with the content.
Mind Map Editor Editing Area
In common mind mapping tools on the market, a file usually contains only one canvas, and one canvas represents a complete mind map. ProcessOn supports creating multiple canvases in the same file: click the "+" button on the bottom left of the canvas to add a canvas; select the canvas title to rename, copy and delete. When downloading files, select "Export All Canvases" to export multiple canvas contents.
Mind Map Editor--Multiple Canvases
【View Navigation】: You can preview and locate the canvas to help find and quickly locate it. When there are too many canvas contents, click the target location in the view navigation to move to the target location; you can also drag the view map area to the target location.
Mind Map Editor--View Navigation
①【Type】--Used to change canvas, theme, and text styles.
Select one or more themes, and select "Style-Theme Style" in the right toolbar to modify the theme and text layout style. "Style-Page Style" supports modifying the canvas fill background, branch theme and sub-theme spacing, and can also add file watermarks (no more than 15 characters).
Right Toolbar--Type
②【Structure】ProcessOn provides 14 thinking structures, covering eight basic structures: mind map, logic map, tree structure diagram, organizational structure chart, fishbone diagram, timeline, tree diagram, and bracket diagram.
Right Toolbar--Structure
③【Style】--You can adjust the color and structure style of the mind map.
Select "Style-System Style" in the right toolbar. There are 44 official built-in system styles for you to choose from. Click the "..." button in the upper right corner of the style image to set it as the default style, and you can directly use this style the next time you create a new mind map.
Right toolbar--Style
In addition, you can also select "Style-Custom Style" in the right toolbar to design your favorite structure, font, line and color, and save it for reuse.
Right toolbar--Custom Style
④【Icon】--Used to indicate the importance of the node, completion progress, and task priority.
Select any node and click the icon button in the right toolbar to insert an icon below the node, or right-click the node to insert an icon. You can modify the color and replace the icon content by directly selecting the icon in the node.
Right toolbar--Icon
⑤【Picture】--Pictures can help to improve the description of the node content.
Select any node and click the "Picture" button in the right toolbar to insert a picture below the node, or right-click the node to insert a picture. ProcessOn supports inserting local pictures, network link pictures, and online search pictures. After inserting a picture, you can also customize the position or size of the picture.
Right toolbar--Picture
⑥【Label】--Labels can be used to classify and mark node content.
Select any node and click the label button in the right toolbar to insert a label below the node, or right-click the node to insert a label. Click on the label to modify the label color and content, or save it as a common label.
Right toolbar--label
Note: You can adjust the position of the elements in the toolbar by dragging and moving in the right toolbar.
① 【Share and Collaborate】--Collaborate files with others, support multiple people editing at the same time, save in real time, and synchronize in milliseconds; share with others, support setting the editing permissions of the other party. Improve the efficiency of collaboration, enhance the communication effect, promote knowledge sharing, and reduce time and energy costs.
Share and Collaborate
② 【Demonstration】-- The demonstration function allows you to demonstrate your mind map in the form of PPT slides. Each node/area is like a slide. The paging demonstration allows the audience to see the details of the map. This function can be applied to work reports and content sharing.
Mind Map Editor--Demonstration
③ 【Download File】-- Supports exporting PNG, JPG, Word, Excel, PPT, SVG, POS files, XMind files, and FreeMind files.
Mind Map Editor--Download File
④【Publish Template】--You can publish your own work to the ProcessOn template community. If you set a clone price when publishing the file, the creator will earn money when other users pay to use the work.
Publish Template
A flowchart is a block diagram representation of an algorithm, workflow, or process. It uses different types of boxes to represent different types of steps, and each two steps are connected by arrows. This representation method is convenient for explaining how to solve known problems.
A flowchart is a symbolic graphic language. Commonly used flowchart symbols have their specific meanings and specifications. The following figure introduces the commonly used symbolic graphics when drawing flowcharts:
Commonly used flowchart graphic symbols and definitions
The above graphic elements can be found in the ProcessOn graphic component library.
In addition to mastering commonly used flowchart symbols, you also need to understand the structural specifications of flowcharts. The three basic structures of flowcharts include sequential structure, selection structure, and loop structure.
Three structural specifications of flowcharts
· Format specifications: the size of graphic symbols in the same flowchart needs to be consistent; the text style and font size should be consistent;
· Straight line specifications: follow the order from left to right and from top to bottom, and the connecting lines cannot cross or bend without reason;
Flowchart straight line specifications
· Start and end: The process must have a start, but not necessarily an end. The start symbol can only appear once, while the end symbol can appear multiple times (if the process is clear enough, the start and end symbols can be omitted);
· Single-input and single-output principle: the processing process must be drawn with a single entrance and a single exit, and there should be only one indicating arrow for the same path;
· The diamond is a judgment symbol, and the diamond judgment box must have two arrows flowing out, corresponding to the two processing results of "yes" and "no" (or "Y" and "N"), and the upper and lower ends of the judgment symbol generally use "yes" or "Y" for inflow and outflow, and "no" or "N" for inflow and outflow at the left and right ends;
Flowchart diamond judgment symbol
· Naming specification: Flowchart naming uses subject-predicate structure (for example: login process, order process); operation description uses verb-object structure (for example: select login method, switch order account);
· The path of the conditional judgment box depends on the direction of the core process;
Flowchart conditional judgment box
· If the process processing relationship is a parallel relationship, the process needs to be placed at the same height;
· When necessary, annotations should be used to clearly explain the process, and annotations should use special annotation symbols.
The ProcessOn flowchart editor interface consists of 9 parts: title bar, menu bar, toolbar, graphic component area, multi-canvas management bar, page navigation bar, editing area, right tool panel, and top function button. Some operation areas of the flowchart editor overlap with the mind map editor, so the following mainly explains the different functional areas of the two.
Distribution of functional areas of the flowchart editor
【Graphic library】: The graphic elements in the graphic component area can be directly dragged to the editing area on the right. There are three sources of graphic elements:
① Network images: Search for network images directly in the search box below the graphic library;
② My graphics: Images imported from local, support svg, png and jpg formats;
Graphic library--My graphics
③ Official graphic elements: Covering multiple graphic type elements such as flowcharts, BPMN, swimlane diagrams, tables, E-R diagrams, UML, Venn diagrams, network topology diagrams, organizational charts, UI interfaces, etc. Click "More Graphics" at the bottom to add the corresponding graphic elements to the graphic component area on the left.
ProcessOn official graphic elements
【Style】: The ProcessOn flowchart editor has 24 official recommended styles for you to choose from. Click the corresponding style to apply it to your drawing work with one click.
ProcessOn flowchart official recommended style
【Arrange】: Contains three operations: graphic alignment, graphic distribution, and matching size. You can quickly layout graphic elements.
Graphic alignment: Align uneven graphic elements according to the corresponding alignment method.
Operation steps: Select the graphic element you want to align, then right-click (or click the "Arrange" button in the menu bar), and select any alignment method in "Alignment Distribution".
· Align left: After selecting all graphic elements, align to the leftmost graphic on the canvas;
· Align center: After selecting all graphic elements, calculate the center line according to the positions of the leftmost and rightmost graphics on the canvas, and align to the center line;
· Align right: After selecting all graphic elements, align to the rightmost graphic on the canvas;
· Align top: After selecting all graphic elements, align to the topmost graphic on the canvas;
· Align vertical center: After selecting all graphic elements, calculate the center line according to the positions of the topmost and bottommost graphics on the canvas, and align to the center line;
· Align bottom: After selecting all graphic elements, align to the bottommost graphic on the canvas.
Flowchart Editor--Align
Even distribution: Adjust the graphic elements to equal spacing, and you can set horizontal and vertical even distribution.
Operation steps: Select the graphic elements you want to align, then right-click (or click the "Arrange" button in the menu bar), and select "Horizontal even distribution" or "Vertical even distribution" in "Align distribution".
· Horizontal average distribution: All graphic elements are arranged with equal spacing in the horizontal direction;
· Vertical average distribution: All graphic elements are arranged with equal spacing in the vertical direction.
Flowchart Editor--Even Distribution
Match Size: Make graphic elements with different widths or heights uniform in size.
Operation steps: Select all graphic elements, then select the "Arrange" button in the menu bar, and then select the corresponding size setting in "Match Size". The matching size is adjusted according to the maximum height or maximum width value of the selected graphic element.
Flowchart Editor--Match Size
Combine: After combining multiple graphic elements, you can drag, rotate, connect lines, etc. as a whole, and avoid accidentally dragging graphic elements to affect layout.
Operation steps: Select the graphic elements you want to combine, then right-click (or select the "Arrange" button in the menu bar), and select "Combine" to complete.
Flowchart Editor--Combine
Flowchart Editor--Toolbar
【Font】: In the toolbar, you can modify graphic elements and fonts, line thickness, style, color, etc.
【Beautify】: After the drawing is completed, you can click the "Beautify" button to beautify the drawing content with one click, including adjusting the spacing, line curvature, etc.
【Background color】: The background color of the newly created flowchart is transparent by default. You can click the background color button to modify the canvas background color.
【Style】: Like the mind map editor, this function is used to change the canvas, theme, and text style. Select one or more graphic elements and select "Graphic Style" in the right tool panel to modify the layout style of graphics and text; "Style-Page Style" supports modifying the canvas and grid size, printing dividing lines, filling backgrounds, and adding file watermarks (no more than 15 characters).
Flowchart Editor--Style
If the content of your file is accidentally lost, you can find the previously edited content here. In the editing state, the system will automatically save the current editing content every few minutes. The historical version can be deleted, or a historical version can be restored (select the version you want to restore, and then click "Restore this version"), or a historical version can be downloaded directly without restoring (click the "arrow" button in the upper right corner of the canvas).
Flowchart Editor--Delete, Restore, Download
Collaboration: When collaborating on files, directly fill in the email or mobile phone number of the collaborator who has bound the ProcessOn account. When collaborating, you can also set the editing or viewing permissions of the collaborator, as well as the collaboration period and collaboration method (link/QR code). After the collaboration is completed, you can also batch remove the collaborators or modify the permission status of the collaborators.
ProcessOn Collaboration Function
Sharing: The copied sharing link can be shared with anyone, and the shared person can directly view the file after opening the link. The sharer can set a password to access the shared file. After the sharing link is set to paid download, the shared person needs to pay to download and use it. In addition, the sharing link can also set an expiration date. If you don't want people to view the file anymore, just turn off the public sharing function.
ProcessOn Sharing Function
In addition to the above three methods, if you want to share batch files with friends, you can put these files in a folder, click the folder and select "Share Collaboration".
ProcessOn Folder Sharing Collaboration Function
The collaborator can view the files/folders being collaborated in the "Collaboration" toolbar on the left side of the station message or personal file page, and can also choose to exit the collaboration; the collaborator can also view all the files/folders collaborated with others in "Collaboration".
View Collaboration Files
Custom Color: ProcessOn officially provides a variety of color palettes (system colors, Morandi, Chinese style, Pantone colors), and the above color palettes can be used in the text, borders, lines, canvas background and other color-adjustable functions of mind maps and flowcharts. In addition, you can also extract the color you want through the color absorption function.
Custom color
· Add a topic of the same level: Enter
· Add a subtopic: Tab/Insert
· Delete a topic: Delete
· Text wrap: Shift+Enter
· Multiple selections: Ctrl+Click on the topic
· Select all: Ctrl+A
· Reuse: Ctrl+D
· Move the canvas: Space+Mouse drag
· Zoom in or out the canvas: Ctrl+(+),(-):
· Insert text: T
· Insert a line: L+Mouse drag
· Multiple selections: Ctrl+Click
Select the "Publish" button on the far right of the function buttons at the top of the editor to publish the current file to the ProcessOn template community. If a clone price is set when publishing a file, the creator will receive income when other users pay to use the work.
Note: When publishing a file, you need to fill in the basic information of the template accurately and completely (to facilitate exposure and traffic for your content). After the template is submitted, ProcessOn staff will review it within 1-3 working days.
ProcessOn is affiliated to Beijing Damaidi Information Technology Co., Ltd. It is a professional online drawing tool and sharing community. It supports multiple types of drawing, such as flowcharts, mind maps, prototypes, network topology diagrams, and UML. Mind maps and logic diagrams are all methods that help us go from the abstract to the concrete. ProcessOn will strengthen these methods. I believe that this strengthening is valuable for partners who often need to "discrete-summarize-discrete" their own thinking.
A picture is worth a thousand words, which is in line with ProcessOn's value vision.
Free Online Collaborative Mind Map and Flowchart 
