DEV Community

Cover image for Flowchart Components and Examples
Fin Chen
Fin Chen

Posted on • Originally published at thingsaboutweb.dev

Flowchart Components and Examples

Flowcharts are a powerful form of diagram that use a few simple elements to illustrate the sequence of events, possible branches, and more. They help readers focus on "what will happen next and the sequential relationships between each part of the process."

Flowcharts can be applied in various scenarios, such as reviewing incidents, planning system functionalities, or even organizing trips and events.

Image description

Basic Symbols of a Flowchart

Here is an introduction to the basic elements commonly found in flowcharts:

  1. Start and End (Start/End):
    Used to mark the beginning or end of a process.
    Image description

  2. Process:
    Represents a single step within the process.

    Image description

  3. Predefined Process:
    Indicates a subprocess or detailed flow defined elsewhere.
    Image description

  4. Delay:
    A step that requires waiting.
    Image description

  5. Decision:
    Represents a decision or branching point, leading to different paths.
    Image description

  6. Preparation/Initialization:
    A step involving preparation or initialization.
    Image description

  7. Input/Output:
    Marks the input or output of data.
    Image description

  8. Manual Input:
    Indicates a step requiring human interaction, such as manual input or operation.
    Image description

  9. AND/OR:
    Logical operators used to combine or branch process flows.
    Image description

  10. Document/Multiple Documents:
    Represents a document or a set of documents.
    Image description

  11. Database:
    Denotes a system used for storing data, especially in software contexts.
    Image description

  12. Connector/Off-page Connector:
    Used when there isn’t enough space to continue the flow.

    • Connector: Used for connections on the same page.
    • Off-page Connector: Used for linking to a flow on a different page. Image description
  13. Arrow:
    The core of a flowchart, showing the next step in the process. Typically, arrows point forward. Dotted lines may be used for annotations or indirect references to another symbol or explanatory block.
    Image description
    With these symbols, you can create clear and effective flowcharts for a variety of purposes!

Usage Examples

Here are two examples showcasing how these icons can be applied:

Login Process

Image description

Recruitment Process

Image description


Flowchart for Better Problem-Solving

Powerful tools like draw.io offer built-in flowchart symbols, making them feature-rich but often accompanied by a steeper learning curve. In contrast, simpler and more intuitive tools like Whimsical and Excalidraw require users to create their own symbol libraries, offering greater flexibility but requiring a bit of setup.

Since I personally rely on Excalidraw for creating flowcharts, all the symbols featured in this article were drawn using it. If you’re an Excalidraw user as well, I’ve created a Flow Chart Symbols library that you can explore. Give it a try, and I’d love to hear your feedback to make it even better!

Flowcharts make it easier to visualize the entire picture, and Excalidraw’s intuitive design simplifies the process of creating and refining these visualizations. By clearly mapping out processes, we can quickly identify and focus on areas that require improvement or fixing, leaving more time for deeper problem-solving and generating insights. This makes it an invaluable tool for enhancing clarity and driving effective solutions.

Top comments (0)