DEV Community

Cover image for Flowchart Components and Examples
Fin Chen
Fin Chen

Posted on • Originally published at thingsaboutweb.dev

1

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Okay let's go

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay