How to Make a Flowchart Online for Free (SVG, No Account)

Flowcharts are diagrams that represent a process as a sequence of steps connected by arrows, using standardized shapes to indicate the type of each step. They are used to document algorithms, business processes, decision trees, and workflows — anywhere the order of steps and branching conditions matter. brevio Flowchart Maker builds flowcharts from a node list editor, renders them as SVG, and lets you download either SVG or PNG directly in your browser — no account, no upload.

Flowchart Symbols (ISO 5807 Standard)

The standard flowchart shapes are defined in ISO 5807:1985. Using these shapes consistently makes your flowcharts readable by anyone familiar with the convention.

When to Use Each Node Type

Start / End (Oval)

Every flowchart begins with a Start terminator and ends with one or more End terminators. The Start node typically has no incoming arrows; the End node has no outgoing arrows. For processes with multiple exit paths (error exits, cancel paths), use multiple End nodes, each labeled with the exit condition.

Process (Rectangle)

The process rectangle is the most common node type. It represents a single discrete action: one verb + one object. "Validate input" is a good process label; "Validate input and calculate total and send confirmation email" is three separate process steps that should be split into three nodes.

Decision (Diamond)

The decision diamond represents a branching point where the flow takes one of two (or more) paths based on a condition. Decision nodes should be labeled as questions with unambiguous yes/no or true/false answers. Label each outgoing arrow with the answer that leads to it ("Yes"/"No" or "True"/"False").

Input / Output (Parallelogram)

The parallelogram indicates that the step involves reading from or writing to an external source: user input, file read/write, database query, API call, or printer output. In algorithm flowcharts, I/O nodes represent read and print operations. In business process flowcharts, they represent customer data input or report generation.

Decision Branch Labeling

Unlabeled decision branches are a common flowchart error — the reader can't tell which path is Yes and which is No. Standard practice is to label every outgoing arrow from a decision node. For binary decisions, use "Yes"/"No" or "True"/"False". For multi-way branches (validation with multiple error types), label each path with the specific condition: "Empty", "Invalid format", "Duplicate", "Valid".

The brevio tool renders decision nodes with a default "Yes" label on the outgoing connection. For multi-way branches, create multiple connections from the same decision node — each will be labeled.

Common Use Cases

Algorithms

Flowcharts are the classic way to document algorithms before coding them. A flowchart for a binary search, sorting algorithm, or authentication flow makes the logic readable to non-programmers and serves as documentation after implementation. Algorithm flowcharts typically use only Start, Process, Decision, and End nodes — I/O nodes appear when the algorithm reads input or writes output.

Business Processes

Process flowcharts document how work gets done in an organization: order fulfillment, customer onboarding, invoice approval, support ticket routing. For business processes, the swimlane variant (adding horizontal lanes for each actor or department) is more useful than a simple flowchart — but swimlane support requires a more full-featured tool like Lucidchart or draw.io.

Decision Trees

A decision tree is a flowchart where every non-terminal node is a decision diamond. They're used in customer support ("troubleshooting trees"), medical diagnosis, and financial product recommendations. brevio's tool supports decision trees with multiple connected decision nodes.

SVG vs PNG Output

For documentation in a Git repository or Confluence wiki, SVG is preferred — it renders sharply at any zoom level and can be updated by editing the XML directly. For sharing in Slack, email, or Google Docs, PNG is more practical — it renders consistently across all viewers.

Flowchart Maker Comparison

FAQ

Can I import my flowchart into draw.io or Lucidchart?

Not directly — the SVG is a flat rendering rather than a draw.io XML diagram. If you need to continue editing in draw.io, recreate the flowchart there. For Mermaid-compatible tools (GitHub, GitLab, Notion), you can describe the same flowchart in Mermaid syntax: flowchart TD; Start --> Process --> End.

What is the maximum number of nodes?

The tool supports up to 20 nodes. For larger flowcharts (50+ nodes), draw.io or Lucidchart provide better layout control and navigation.

How do I represent a loop in the flowchart?

Create a connection from a later node back to an earlier node. The arrow will render as a line from the later node going upward — indicating a loop. Label the connection with the loop condition (e.g., "Retry" or "Not done").

How do I show parallel processes?

The brevio tool renders a single-column top-to-bottom layout, which doesn't support parallel branches side-by-side. For parallel process documentation, use a swimlane diagram in draw.io or Lucidchart, which can represent concurrent activities in separate columns.