Information & layouts

VectorPaint decision flowcharts: keep conditions and arrows consistent

Draw a fictional file-organising flow with decision nodes, labels and a loop, then walk through every path and inspect its connections.

English translation of the Chinese original, translated on . Original publication dates, attribution, code and version notes are retained.

A flowchart needs explicit conditions for its routes. Draw a fictional file-organising process with rectangles, diamonds and paths for starts, decisions, actions and endings. Focus on whether each labelled branch actually reaches its intended destination.

Write an executable sequence first

Write start, test whether the file opens, store by type, record an error and finish. Each decision asks one answerable question. Specify both outcomes and ensure each route can terminate. Use a 1200 by 900 pixel canvas with the main flow descending and the exception route on the right. Settle the logic before polishing the shapes.

Establish a small shape vocabulary

Use rectangles for actions and diamonds for decisions, with a clearly different but simple start/end shape. Duplicate a checked base rectangle for comparable actions. Draw diamonds with four pen points. Keep text within comfortable insets. Simplify descriptions that require several lines before allowing one node to overwhelm the main sequence.

Connect the main route before labelling branches

Connect nodes with unfilled paths that stop near boundaries without crossing text. A shaft and separate small triangle can form a manual arrow; group them and recheck direction after moving. For this exercise, label downward as yes and rightward as no. Keep labels beside their routes rather than inside the next node. Read the main route without decoration.

Leave room for the exception route

Position the error-recording node to the right and route its connection around the main flow before rejoining the end. Use few clear bends. Rearrange nodes to avoid crossings when possible rather than introducing ambiguous junction marks. After moving a node, inspect every associated arrow; visual proximity does not create an automatic logical connector.

Walk the chart with concrete examples

Follow an opening file through the yes branch, storage and finish, then a failing file through no, error recording and finish. Read every node and condition aloud. Add any missing rule to the chart or notes. Add retry loops only with a clear exit condition. Temporary route colours can track review, but remove them from the clean delivery copy.

Inspect connections at the delivery size

Save the original and check exported joins at full size, then arrowheads and labels at the actual display width. Balance line weight and arrowhead size. State the scope, such as an illustrative personal file workflow. For revisions, update the written sequence first, then every affected node and connection; changing a label alone can leave an obsolete route.

Recheck after swapping branch positions

Move the exception route to the left in a copy without changing its meaning, then reposition labels and connectors. Walk both examples again and trace backward from the end to find orphan arrows or dead ends. Rearrange nodes before preserving awkward crossing routes. Save this experiment separately and deliver the version whose complete paths have been checked.

Fix ambiguous logic before styling

Move an unclear yes/no label next to its actual branch and repeat the walkthrough. Aligned node centres do not guarantee straight connectors; check endpoints too. A missing arrowhead may be behind a node, deleted or invisible against the background. For an overly wide chart, shorten annotations or separate stages before compressing the entire graphic.

Related tutorials and sources

Pen curves, Instruction panels.

Sources checked on October 26, 2026: the official VectorPaint App Store description and Apple public version information. The Chinese storefront lists version 1.0.7, requiring iOS / iPadOS 17. These are reproducible creative exercises, without a claim that every step was performed on a physical device. Dimensions, colours, numbers and content are examples. Check controls against the installed version and experiment in an independent copy after saving the original.