Map Business Processes with draw.io

Create process maps for a traditional manufacturing company using draw.io.

Introduction

30 Second Summary

Every business runs on processes. From taking a customer order to onboarding a new employee, these workflows shape how work actually gets done.

In this project, you will create a complete set of process maps for a fictional manufacturing company called SteelCraft Industries. You'll visualize how work flows across departments and identify exactly where automation could replace manual, paper-heavy steps.

What You'll Build

You'll build four process diagrams for SteelCraft Industries, a traditional manufacturer that relies on phone-based orders, paper job tickets, and spreadsheet scheduling, using the free browser-based tool draw.io.

By the end of this project, you'll have:

A Process Architecture Map showing how management, core, and support processes relate to each other at SteelCraft Industries.
Three detailed process maps covering a core commercial workflow, a support workflow, and a management workflow using swimlane diagrams and flowcharts.
Practical skills in identifying automation opportunities by annotating manual steps with their time costs and pain points.
Secret Mission: Redesign the core process as a digitally-transformed "to-be" version, replacing manual steps with CRM, ERP, and API integrations.

Are there any prerequisites?

None. This project uses draw.io, which is completely free and runs directly in your browser. No account creation, installation, or prior process mapping experience is needed.

Set Up draw.io

To map SteelCraft's business processes, you need a diagramming tool that supports flowcharts, swimlanes, and connectors.

draw.io is a free, browser-based tool that handles all of this without any signup or installation. In this step, you'll open the tool, explore its interface, and create your first diagram file.

In this step, get ready to:

Open draw.io and configure local file storage.
Explore the shape panel and drawing canvas.
Create your first diagram file for the process architecture.

Open draw.io in your browser

draw.io (also known as diagrams.net) runs entirely in your browser. There is nothing to download or install.

Open a new browser tab and navigate to https://app.diagrams.net.
A dialog will appear asking where you want to save your diagrams. Click Device to save files locally to your computer.

What does selecting Device do?

Selecting Device means your diagram files are saved directly to your computer's file system. No cloud account, no login, no third-party access needed.

You should now see a blank drawing canvas with panels on either side.

Don't see the storage dialog?

If draw.io opens directly to a blank canvas (skipping the storage prompt), it may be remembering a previous session. You can change your storage location anytime by selecting File then Save as and choosing a new location.

Help me set my storage to Device in draw.io

Explore the draw.io interface

The draw.io editor has three main areas you'll use throughout this project.

Look at the left side of the screen. This is the shapes panel, which contains drag-and-drop shapes organized into libraries.
Look at the center. This is the drawing canvas, where you'll place and connect your shapes.
Look at the right side. This is the format panel, which lets you style and arrange selected shapes.
In the shapes panel on the left, locate the search bar at the top.
Type flowchart into the search bar and press Enter.

You should see a collection of flowchart shapes appear in the results, including rectangles, diamonds, and circles. These are the building blocks you'll use to map processes.

Why draw.io over other tools?

draw.io is completely free with no feature limits, no signup, and no trial period. Alternatives like Miro and Lucidchart have free tiers but gate features behind paid plans.

For process mapping, draw.io includes all the shapes you need: flowcharts, swimlanes, and BPMN libraries.

Create your first diagram file

Now that you know your way around, create the diagram file that will hold your process architecture map.

Click File in the top menu bar.
Click New.
In the template dialog that appears, select Blank Diagram to start with an empty canvas.
When prompted to name the file, enter SteelCraft-Process-Architecture and click Create.

What just happened?

You created a new .drawio file saved to your computer. This is the default format for draw.io diagrams. The file will hold your process architecture map once you start adding shapes in the next step.

Now confirm you can perform the three basic operations you'll use throughout this project.

Drag a rectangle from the shapes panel on the left onto the canvas.
Double-click the rectangle and type any text (for example, Test).
Drag a second rectangle onto the canvas next to the first one.
Hover over the edge of the first rectangle until you see a blue arrow appear.
Click and drag that blue arrow to the second rectangle to create a connector between them.

You should now see two labeled rectangles connected by an arrow on your canvas. These three skills (placing shapes, adding text, connecting shapes) are all you need to build process maps.

Select both test shapes and delete them (press Delete or Backspace) so you start the next step with a clean canvas.
Save your file by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Can't connect two shapes?

Make sure you are hovering over the edge of the first shape, not the center. A blue directional arrow should appear when you hover over a valid connection point.

If you don't see the blue arrow, try moving the shapes further apart so there is more space between them.

Help me connect two shapes in draw.io

Your diagramming workspace is ready. Next up, you'll learn how SteelCraft's processes break down into management, core, and support categories before mapping them visually.

Understand Business Process Types at SteelCraft

Your draw.io workspace is set up and ready. Before placing any shapes on the canvas, you need to understand what you're actually mapping.

Every business has dozens of processes running simultaneously. The key to mapping them effectively is classification. In this step, you'll categorize SteelCraft's processes into three distinct types so you know exactly what to draw and why each process matters.

In this step, get ready to:

Identify SteelCraft's core processes that directly serve customers and generate revenue.
Identify support processes that keep the factory running behind the scenes.
Identify management processes that steer and control the organization.

Define SteelCraft's core processes

Core processes (also called commercial or primary processes) directly deliver value to external customers and generate revenue. They are the reason the business exists.

For SteelCraft Industries, the core processes are:

Sales & Quoting — taking customer orders and preparing price quotes.
Production/Manufacturing — fabricating the custom metal components.
Quality Control — inspecting finished products before they leave the factory.
Shipping & Delivery — getting the finished product to the customer.

Currently, SteelCraft's sales reps take orders by phone and write quotes manually in spreadsheets. Every step in their core process chain relies on manual effort.

What makes a process core?

Ask yourself: is this process in direct communication with the external customer, or does it deliver added value through the company's core service? If yes, it's a core process.

Most organizations have 4-8 core processes regardless of their size. Everything else exists to support or govern these.

Identify the support processes

Support processes enable core processes by providing resources and infrastructure. They don't directly serve external customers, but without them the factory grinds to a halt.

SteelCraft's support processes are:

Human Resources — hiring, onboarding, and managing employees.
IT Support — maintaining computers, email, and internal systems.
Finance & Accounting — invoicing, payroll, and financial reporting.
Maintenance — keeping machines and equipment operational.

At SteelCraft, HR still uses paper forms for onboarding new hires. Maintenance schedules are tracked on a physical whiteboard next to the factory floor.

Why do support processes matter for mapping?

Support processes are the least visible to external customers, but they are indispensable for core process execution. A broken maintenance process means machines go down, which means production stops, which means customers don't get their orders.

Mapping them reveals hidden bottlenecks that ripple up to customer-facing work.

Identify the management processes

Management processes plan, monitor, and control the organization. They don't produce anything directly. Instead, they steer the business by making decisions about how resources are allocated.

SteelCraft's management processes are:

Production Planning — deciding what to produce, when, and on which machines.
Budgeting & Forecasting — setting financial targets and predicting costs.
Health & Safety Management — ensuring the factory meets safety regulations.
Performance Reviews — evaluating employee output and setting goals.

Currently, production planning happens in a weekly spreadsheet meeting. Floor managers receive printed schedules that are outdated by the time they reach the factory floor.

Notice the pattern across all three types

Paper forms, phone calls, spreadsheets, whiteboards, and physical handoffs appear in every layer of SteelCraft's operations. These manual touchpoints are exactly what a digital transformation initiative would target.

Your process maps will make these pain points visible. That visibility is the first step toward solving them.

You now have a clear mental model of SteelCraft's entire process landscape. Next up, you'll turn this classification into a visual Process Architecture Map that shows how these three layers connect to each other.

Create the Process Architecture Map

You now have a clear picture of SteelCraft's twelve processes spread across three categories. The next question is: how do these processes relate to each other?

A process architecture map answers that question. It's a single-page visual showing every process in the organization, grouped by type, with arrows revealing the dependencies between them.

In this step, get ready to:

Create three colored horizontal bands representing management, core, and support process layers.
Populate each band with rounded rectangles for SteelCraft's named processes.
Draw dependency arrows showing how processes connect across layers.

Create three horizontal bands

The architecture map uses three horizontal bands to visually separate the process layers. Each band gets its own color so you can tell at a glance which category a process belongs to.

Switch back to your SteelCraft-Process-Architecture diagram in draw.io.
Drag a large rectangle from the shapes panel on the left onto the top area of the canvas.
Stretch it wide (roughly 800px) and about 150px tall by dragging its corner handles.
Double-click the rectangle and type Management Processes.
Select the rectangle, then look at the Format panel on the right side of the screen.
In the Style tab, click the color button next to Fill and choose a blue color from the palette.
Repeat this process to create a second rectangle directly below the first. Label it Core Processes and set its fill color to green.
Create a third rectangle below the second. Label it Support Processes and set its fill color to orange.

You should now see three stacked colored bands on your canvas: blue on top, green in the middle, and orange at the bottom.

Why three separate colors?

Color-coding makes the process hierarchy instantly readable. Anyone looking at the diagram can tell whether a process is a management, core, or support activity without reading every label. This is standard practice in process architecture diagrams.

Can't find the Fill color option?

Make sure you have the rectangle selected (you'll see blue handles on its corners). The Format panel on the right only shows shape-specific options when a shape is actively selected.

If you don't see the Format panel at all, click View in the top menu and make sure Format Panel is checked.

help me find the fill color option in draw.io

Add process boxes to each band

Each band needs rounded rectangles representing the individual processes. Rounded corners distinguish process boxes from the band containers, making the diagram easier to scan.

In the shapes panel on the left, find the rounded rectangle (it looks like a rectangle with soft corners in the General shapes library).
Drag four rounded rectangles into the blue Management Processes band.
Double-click each one and label them: Production Planning, Budgeting & Forecasting, Health & Safety, and Performance Reviews.
Drag four rounded rectangles into the green Core Processes band.
Label them: Sales & Quoting, Production/Manufacturing, Quality Control, and Shipping & Delivery.
Drag four rounded rectangles into the orange Support Processes band.
Label them: Human Resources, IT Support, Finance & Accounting, and Maintenance.
Space the boxes evenly within each band so they don't overlap.

Your canvas should now show 12 labeled rounded rectangles spread across the three colored bands, four in each.

Align shapes quickly

Select multiple shapes by holding Shift and clicking each one. Then use the Arrange tab in the Format panel to align them horizontally or distribute spacing evenly.

Shapes keep landing outside the bands?

Make sure you are dragging the rounded rectangles to a position visually inside the colored band. If a shape drifts outside, simply select it and drag it back into position. The bands in this diagram are regular rectangles, not formal containers, so shapes won't auto-snap inside them.

help me position shapes inside my colored bands in draw.io

Add dependency arrows and a title

Arrows reveal which processes depend on each other. Without them, the diagram is just a list. With them, you can see how a breakdown in one area ripples across the business.

Hover your mouse over the edge of the Maintenance box in the Support band until you see a blue arrow or connection point appear.
Click and drag from that point up to the Production/Manufacturing box in the Core band. Release when the target box highlights.
Draw a second arrow from Production Planning in the Management band down to Production/Manufacturing in the Core band.
Draw a third arrow from IT Support in the Support band up to Sales & Quoting in the Core band.
Add a title to your diagram by double-clicking an empty area above the top band and typing SteelCraft Industries Process Architecture.
Increase the title's font size by selecting the text, then adjusting the size in the Text tab of the Format panel.
Save your diagram by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Your completed diagram should show three arrows crossing between the bands, connecting processes that depend on each other.

What do these arrows mean?

Each arrow represents a real dependency in SteelCraft's operations. Maintenance enables production uptime. Production Planning drives manufacturing schedules. IT Support maintains the systems that the sales team uses to generate quotes.

In a real organization, you would map many more dependencies. These three illustrate the cross-layer connections that make process architecture maps so valuable for spotting hidden risks.

Arrows not connecting to the shapes?

Make sure you start dragging from the blue connection point that appears when you hover over a shape's edge. If the arrow floats freely instead of attaching, delete it and try again. When the target shape highlights with a green or blue border, you know the connection will stick.

help me connect two shapes with an arrow in draw.io

Your process architecture map is complete. You now have a bird's-eye view of how SteelCraft's entire business is structured. Next up, you'll zoom into the most important layer and map a single core process from start to finish.

Map the Core Commercial Process (Quote-to-Delivery)

Your Process Architecture Map gives SteelCraft a bird's-eye view of all its processes. Now it's time to zoom in on the most important one: the process that brings in revenue.

The Quote-to-Delivery process is how a customer's phone call turns into a delivered product. It crosses four departments, involves paper tickets, manual spreadsheets, and phone calls at every turn. Mapping it end-to-end will reveal exactly where time and information get lost.

In this step, get ready to:

Create a swimlane diagram with four departmental lanes.
Map the full Quote-to-Delivery flow with activities, decision gateways, and a rework loop.
Annotate manual pain points with sticky-note shapes showing time costs.

Create a new swimlane diagram

A swimlane diagram divides a process into horizontal lanes, one per department or role. Each lane shows which team is responsible for which activities. This makes handoffs between teams visible at a glance.

In draw.io, click File in the top menu bar.
Click New.
Name the file SteelCraft-Quote-to-Delivery and click Create.
In the shapes panel on the left, type swimlane into the search bar at the top.
Find a horizontal swimlane container shape in the results and click it to add it to your canvas.
The default swimlane container comes with two or three lanes. You need four lanes total. To add a lane, select the entire swimlane container, then click the blue arrow on the right edge of any existing lane. Repeat until you have four lanes.
Double-click each lane's header label to rename them. From top to bottom, label them: Customer, Sales Team, Production Floor, Shipping.

What is a swimlane diagram?

In draw.io, swimlane containers act as grouped sections. When you drag a shape into a lane, it stays attached to that lane. If you move the lane, all its shapes move with it.

This makes swimlanes perfect for cross-functional processes where work passes between departments. You can immediately see where a handoff happens because the flow arrow crosses from one lane into another.

You should now see four empty horizontal lanes stacked vertically on your canvas, each with a label on the left.

Don't see the swimlane shapes?

If searching for swimlane returns no results, click +More Shapes at the bottom of the left panel. Make sure the General shape library is enabled, then click Apply. Try searching again.

help me find swimlane shapes in draw.io

Map the process flow across all four lanes

Now you'll build the actual process flow. A decision gateway is a diamond shape that represents a yes/no branch in the process. You'll use two of them in this diagram.

Work from left to right, starting in the Customer lane and letting the flow cross into other lanes as responsibility shifts.

In the Customer lane, drag a circle from the shapes panel to create a Start Event. Label it with a click, or leave it as a plain circle.
To the right of the start circle, add a rounded rectangle and label it Request Quote (Phone/Email).
Draw an arrow from the start circle to the rounded rectangle by hovering over the start circle's edge until you see a green cross, then dragging to the next shape.
Move into the Sales Team lane. Add four rounded rectangles in sequence, labeled: Receive Request, Manually Look Up Material Costs (Spreadsheet), Calculate Quote by Hand, Send Quote to Customer (Email/Fax).
Connect these with arrows from left to right. Also draw an arrow from the Customer's Request Quote shape down into the Sales Team's Receive Request shape.
Back in the Customer lane, add a diamond shape and label it Accept Quote?. Draw an arrow from the Sales Team's Send Quote to Customer up to this diamond.
From the diamond, draw one arrow labeled No to an End Event circle (a circle with a thick border). Draw another arrow labeled Yes to a new rounded rectangle: Confirm Order (Phone).
Back in the Sales Team lane, add two more shapes: Write Paper Job Ticket and Walk Job Ticket to Production Floor. Connect them with arrows from Confirm Order downward.
In the Production Floor lane, add: Schedule Job (Whiteboard), Manufacture Components, Handwritten Quality Inspection. Connect with arrows from the Sales Team's Walk Job Ticket shape.
After Handwritten Quality Inspection, add another diamond labeled Pass Inspection?.
From this diamond, draw an arrow labeled No to a shape labeled Rework. From Rework, draw an arrow looping back to Manufacture Components. This creates a rework loop.
From the Pass Inspection? diamond, draw an arrow labeled Yes to Mark Complete on Whiteboard.
In the Shipping lane, add three shapes: Package Product, Arrange Pickup with Carrier (Phone Call), Ship to Customer. Connect with arrows from Mark Complete on Whiteboard.
Finally, back in the Customer lane, add Receive Delivery followed by an End Event circle. Draw arrows from Ship to Customer up to Receive Delivery, then to the End Event.

What do the shapes mean?

Circle = Start or End event (thick border for End).
Rounded rectangle = Activity (a task someone performs).
Diamond = Decision gateway (a yes/no branch point).
Arrow = Sequence flow (the order things happen in).

The rework loop after Pass Inspection? is common in manufacturing. Failed parts cycle back through production until they meet quality standards.

Your diagram should now show a flow that starts in the Customer lane, dips into Sales, moves to Production (with a rework loop), flows through Shipping, and returns to the Customer at the end.

Arrows won't connect to shapes in a different lane?

Make sure you're starting the arrow from the edge of the source shape (look for the green cross cursor). Drag the arrow tip over the target shape until the target highlights blue, then release. draw.io allows connectors to cross between swimlanes freely.

help me connect shapes across different swimlanes in draw.io

Annotate manual pain points with sticky notes

The flow is complete, but a process map becomes truly useful when it exposes where things break down. Annotations call attention to the steps that waste time or create risk.

In the shapes panel search bar, type note to find a sticky-note shape (it looks like a rectangle with a folded corner).
Drag a sticky-note shape next to Manually Look Up Material Costs (Spreadsheet) in the Sales Team lane. Double-click it and type ~30 min per quote.
Add a second sticky note next to Walk Job Ticket to Production Floor. Label it Tickets sometimes lost.
Add a third sticky note next to Handwritten Quality Inspection in the Production Floor lane. Label it Hard to audit later.
Add a fourth sticky note next to Arrange Pickup with Carrier (Phone Call) in the Shipping lane. Label it Phone tag delays ~2hrs.
Save the file by pressing Cmd+S (macOS) or Ctrl+S (Windows). Select Device if prompted for a save location.

Why annotate pain points?

These annotations turn a descriptive map into an analytical one. Instead of just showing what happens, you're measuring how long it takes and flagging where things go wrong.

In a real digital transformation project, these annotations become the business case for automation. A 30-minute manual quote lookup multiplied by hundreds of quotes per month is a clear target for a CRM integration.

Your completed diagram should show the full flow across all four lanes with four yellow sticky-note annotations highlighting the manual bottlenecks.

Sticky notes overlapping your shapes?

Drag the sticky notes slightly above or below the shapes they reference. You can also draw a thin dashed line from the note to the shape it describes by right-clicking the connector arrow and selecting Dashed from the line style options.

help me position annotation notes neatly in my draw.io diagram

You now have a detailed map of SteelCraft's most important revenue-generating process. Next up, you'll map a support process to see how internal operations can create bottlenecks of their own.

Map the Support Process (Employee Onboarding)

Your Quote-to-Delivery map revealed how SteelCraft's core process is bogged down by phone calls, paper tickets, and manual data entry. Now it's time to look behind the scenes at the processes that keep the business running.

Support processes don't serve external customers directly, but they enable everything else. If HR can't onboard new machinists quickly, the production floor falls behind on orders. In this step, you'll map SteelCraft's Employee Onboarding process to expose the paper-based bottlenecks hiding in their back office.

In this step, get ready to:

Create a swimlane diagram with three departmental lanes for the onboarding process.
Map the full flow from signed offer letter to a productive new employee.
Add timing annotations that expose delays caused by manual steps.

Create a new diagram with three swimlanes

This support process starts when HR receives a signed offer letter and ends when the new employee is fully set up and productive. Three departments are involved, so you'll use a swimlane diagram to show who owns each part of the process.

In draw.io, click File in the top menu bar.
Click New.
Name the file SteelCraft-Employee-Onboarding.
On the blank canvas, create three horizontal swimlane bands.
Label the top lane HR Department, the middle lane IT Support, and the bottom lane Department Manager.

Reuse your swimlane technique

You built swimlanes in the previous step for Quote-to-Delivery. Use the same approach here: search for "pool" or "lane" in the shapes panel, or draw rectangles and label them. Three lanes is simpler than four, so this should feel faster.

Why a swimlane diagram for onboarding?

Onboarding involves handoffs between HR, IT, and the hiring manager. A swimlane diagram makes it immediately clear who is responsible for each step and where handoffs create delays.

If you mapped this as a simple top-to-bottom flowchart, the cross-department dependencies would be invisible.

Build the onboarding process flow

Now you'll fill each lane with the steps that department performs. Notice how SteelCraft relies on paper forms, manual data entry, and email requests to coordinate between teams.

In the HR Department lane, place a Start Event (circle) on the left side.
Connect the Start Event to a rounded rectangle labelled "Receive Signed Offer Letter".
Add the next activity: "Print & Prepare Paper Forms (Tax, Benefits, Emergency Contact)".
Connect to "New Employee Fills Out Forms on Day 1".
Connect to the final HR activity: "Manually Enter Data into Payroll System".

In the IT Support lane, add "Receive Email Request from HR" as the first activity.
Connect it to "Set Up Computer & Email Account".
After that, place a Decision Gateway (diamond shape) labelled "Equipment Available?".
From the "Yes" path of the gateway, draw an arrow to "Configure & Deliver to Desk".
From the "No" path, draw an arrow to "Order Equipment (2-3 week wait)", then connect that to "Set Up When Arrives".

In the Department Manager lane, add "Schedule Orientation Meetings" as the first activity.
Connect it to "Assign Buddy/Mentor".
Connect to "Plan First-Week Training".
Place an End Event (thick-bordered circle) after the final activity in this lane.

What does this flow represent?

The three lanes run in parallel. HR prepares paperwork, IT provisions equipment, and the manager plans orientation. All three streams need to complete before the new employee is fully set up.

The decision gateway in the IT lane is critical. If equipment isn't available, the new hire waits 2-3 weeks without a proper workstation. This is the biggest bottleneck in the process.

Arrows going to the wrong shape?

If your connector snaps to the wrong target, hover over the edge of the shape you want to connect FROM until you see a blue arrow appear, then drag directly to the target shape. Make sure both the "No" and "Yes" paths exit from different sides of your diamond gateway.

Help me fix my arrow routing in draw.io

Add timing annotations to expose delays

Annotations turn a process map from a nice picture into an actionable analysis tool. By documenting how long manual steps take, you build the business case for automation.

Search for "note" or "callout" in the shapes panel to find a sticky-note or annotation shape.
Place an annotation next to "Print & Prepare Paper Forms" and type: Prepared 1 day before start.
Place an annotation next to "Order Equipment (2-3 week wait)" and type: Delays start by 2-3 weeks.
Place an annotation next to "Manually Enter Data into Payroll System" and type: Error-prone, takes 45 min.
Save the file by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Why these three annotations matter

Each annotation highlights a different type of waste. The "1 day before start" note shows HR's preparation is last-minute. The "2-3 weeks" delay shows a resource bottleneck that could be solved with inventory planning. The "45 min" entry note shows repetitive manual work that's ripe for system integration.

Notice how this support process, while invisible to customers, directly impacts how quickly SteelCraft can staff up production.

Your completed diagram should show three lanes with the full onboarding flow, a decision gateway splitting into two paths in the IT lane, and three timing annotations highlighting pain points.

Diagram looking cluttered?

If shapes are overlapping or annotations are hard to read, select all shapes in a lane and use Arrange > Align to space them evenly. You can also drag lane borders to make them taller.

Help me clean up my cluttered diagram

You've now mapped a support process that reveals hidden inefficiencies behind the scenes. Next up, you'll map a management process to see how SteelCraft's leadership plans and allocates production capacity using spreadsheets and printouts.

Map the Management Process (Monthly Production Planning)

Your support process map reveals how internal bottlenecks (like missing equipment) cascade into delays that affect the whole business. Now you'll map the final process type: a management process.

Management processes steer the organization by planning, monitoring, and controlling. SteelCraft's Monthly Production Planning process decides which orders get built, when, and on which machines. It's the process that governs all the other processes you've already mapped.

In this step, get ready to:

Create a top-to-bottom flowchart for SteelCraft's Monthly Production Planning process.
Map decision gateways for capacity planning and overtime approval.
Export all four process maps as PNG files to complete your portfolio.

Create the production planning diagram

This management process happens monthly to allocate production capacity across customer orders. Unlike the swimlane diagrams you built for the core and support processes, this one uses a simple top-to-bottom flowchart. A linear flow works well here because production planning is driven by a single team in a sequential meeting structure.

In draw.io, click File in the top menu bar.
Click New.
Name the file SteelCraft-Production-Planning.
Click Create to open a blank canvas.

Why a simple flowchart instead of swimlanes?

Swimlane diagrams shine when multiple departments hand work back and forth (like the Quote-to-Delivery process). Production planning involves the Sales Manager, Production Manager, and floor managers, but the process flows top-to-bottom through a single meeting structure rather than bouncing between lanes.

When in doubt, use swimlanes for cross-functional handoffs and simple flowcharts for sequential decision-making within a single team.

Build the production planning flow

This flowchart has two decision gateways that branch the process into different outcomes. You'll build the main "happy path" first, then add the branching logic for when capacity falls short.

Drag a circle (Start Event) onto the top of your canvas.
Below it, add a rounded rectangle labeled Sales Manager Compiles Order Backlog (Spreadsheet).
Connect the start event to this first activity with a downward arrow.
Add the next activity below: Production Manager Reviews Machine Availability (Whiteboard).
Add the next activity: Planning Meeting with Printouts.
Below the planning meeting, add a diamond shape (decision gateway) labeled Capacity Sufficient?.

Now build the "Yes" path for when there is enough capacity.

From the right side of the diamond, draw an arrow labeled Yes.
Connect it to a new activity: Assign Jobs to Machines & Shifts.
Below that, add: Print Updated Schedule for Floor Managers.
Below that, add: Distribute Printouts.
End this path with a thick-bordered circle (End Event).

Now build the "No" path for when capacity is insufficient.

From the bottom of the Capacity Sufficient? diamond, draw an arrow labeled No.
Connect it to a new activity: Identify Bottleneck Machines.
Below that, add: Decide: Overtime, Outsource, or Delay?.
Below that, add a second decision diamond: Overtime Approved?.
From the Yes side of this diamond, connect to: Schedule Overtime Shifts.
Draw an arrow from Schedule Overtime Shifts back up to Assign Jobs to Machines & Shifts to create the loop.
From the No side of the Overtime Approved? diamond, connect to: Notify Affected Customers of Delay.
Below that, add the final activity: Adjust Delivery Dates in Spreadsheet.
End this path with a thick-bordered circle (End Event).

What do the two decision gateways represent?

The first gateway (Capacity Sufficient?) is the main branch. If machines can handle the order backlog, work proceeds smoothly.

The second gateway (Overtime Approved?) shows a common real-world pattern: when the initial answer is "no," a secondary decision determines the recovery strategy. Overtime lets you loop back to the happy path. Without overtime approval, customers must be notified of delays.

Save the file by pressing Ctrl+S (Windows) or Cmd+S (macOS).

Arrows overlapping or crossing?

The loop-back arrow from "Schedule Overtime Shifts" to "Assign Jobs" can get messy. Right-click the arrow and select Edit Style to adjust its routing. You can also drag the midpoints of any arrow to reroute it around other shapes.

If shapes are too close together, select all (Ctrl+A or Cmd+A) and use Arrange > Align/Distribute to space them evenly.

Still having trouble laying out your diagram? Help me arrange my flowchart so arrows don't overlap.

Review all four diagrams and export your portfolio

You now have four complete process maps covering all three process types. Before exporting, take a moment to look at the patterns across your diagrams.

Open each of your four diagrams and scan for common themes.

What patterns should I notice?

Look across all four diagrams. Paper forms appear in onboarding and production. Spreadsheets drive quoting, planning, and delivery date tracking. Phone calls slow down ordering and shipping. Physical handoffs (walking job tickets, distributing printouts) create delays and lost information.

These recurring patterns are exactly what a digital transformation initiative would target. Every paper form is a candidate for a digital form. Every spreadsheet is a candidate for a purpose-built system. Every phone call is a candidate for automated notifications.

Now export each diagram as a PNG file to create your process mapping portfolio.

Open the SteelCraft-Process-Architecture diagram.
Click File in the top menu bar.
Click Export as, then select PNG.
Click Export in the dialog that appears, then Download to save the file to your computer.
Repeat these export steps for SteelCraft-Quote-to-Delivery, SteelCraft-Employee-Onboarding, and SteelCraft-Production-Planning.

You should now have four PNG files in your downloads folder, one for each process map.

Export dialog not showing the download button?

Make sure you click Export first (which sets the PNG options), and then the Download button appears. If you selected "Device" as your storage location at the start, the file saves directly to your downloads.

If you still can't export, help me export my draw.io diagram as a PNG file.

Secret mission

Design the Digital Transformation

You've mapped SteelCraft's manual, paper-heavy processes. Now it's time to think like a digital transformation consultant. Can you redesign the Quote-to-Delivery process to replace every manual step with an automated equivalent?

Clean Up Your Resources

This project runs entirely locally using draw.io in your browser, so there are no ongoing costs or cloud resources to manage.

Decide whether to keep your diagram files for your portfolio, or delete them from your computer.

Resources you used:

Local diagram files saved to your device (5 .drawio files and 5 .png exports).

Keep everything running

No action needed. Choose this if you want to keep your process maps as a portfolio piece or plan to extend them further.

Your .drawio files remain editable. You can reopen them anytime at https://app.diagrams.net by selecting File > Open from > Device.
Your .png exports are ready to include in presentations, reports, or your professional portfolio.
No account was created and nothing is stored in the cloud, so there is nothing running in the background.

Pause - I'll come back to this later

Since all files are saved locally and draw.io is browser-based, there is nothing to pause. Your files sit on your device until you need them again.

Consider organizing your files into a dedicated folder (e.g., SteelCraft-Process-Maps) so you can find them easily later.
No browser tabs or background processes need to be closed.

Delete - I don't want to use this again

Remove all project files from your computer to start fresh.

Locate the folder where you saved your draw.io files (wherever you chose when saving to Device).
Delete all 10 files: SteelCraft-Process-Architecture.drawio, SteelCraft-Quote-to-Delivery.drawio, SteelCraft-Employee-Onboarding.drawio, SteelCraft-Production-Planning.drawio, SteelCraft-Quote-to-Delivery-AUTOMATED.drawio, and their corresponding .png exports.
Empty your Trash (macOS) or Recycle Bin (Windows) to permanently remove the files.

Nothing else to remove

draw.io runs entirely in your browser with no installation and no account. Once you delete the local files, there is no trace of this project on your machine.

That's a Wrap!

Nice work! You've just built a complete process mapping portfolio for a traditional manufacturing company, exposing exactly where manual, paper-heavy workflows are ripe for digital transformation.

You've learned how to:

Created a Process Architecture Map classifying SteelCraft's processes into management, core, and support layers with dependency arrows showing how they relate.
Mapped a core commercial process (Quote-to-Delivery) using swimlane diagrams with decision gateways, annotations, and cross-functional handoffs across four departments.
Identified automation opportunities by annotating manual steps with their time costs and pain points, then used those annotations to justify where digital tools would have the highest impact.
Designed a digitally-transformed "to-be" process showing how CRM, ERP, and API integrations can replace manual work and reduce overall lead time from 2 weeks to 8 days.

Ready to quiz yourself?