Diagram a Web App Architecture

Create a cloud architecture diagram for an e-commerce app in Eraser.io.

Introduction

30 Second Summary

Every time you browse an online store, your click travels through a hidden chain of systems. Load balancers, servers, caches, and databases all work together behind the scenes to show you that product page in milliseconds.

In this project, you will diagram the architecture of a simplified e-commerce app called "ShopFlow" using Eraser.io. You'll write simple code that turns into a professional, shareable architecture diagram showing how a user's request flows from the browser all the way to the database and back.

Whoa! Welcome to our new beta feature!

This is a NextWork project generated with AI. It's a new feature and may have some bugs. If you spot anything, please let us know in [our community](LINK TO DISCORD). We're improving this everyday and really want to hear what you'd like to see us fix next. Happy learning.

What You'll Build

A cloud architecture diagram of a multi-layer e-commerce application, built entirely with Eraser.io's diagram-as-code syntax.

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

  • A fully rendered architecture diagram in Eraser.io with proper icons, color-coded groups, and labeled connections.
  • Hands-on experience with diagram-as-code syntax for defining nodes, groups, and connections that you can reuse, share, or version-control.
  • A mental model for how real web applications are structured in layers including frontend, API, caching, and database.
  • A secret mission to add asynchronous order processing with a message queue and background worker.

Are there any prerequisites?

None. All you need is a web browser and an email address to sign up for Eraser.io. No installations, no credit card, and no prior diagramming experience required.

Before We Start

Before We Start...

Set Up Your Eraser.io Workspace

Before you can diagram an architecture, you need a workspace to build in. Eraser.io is a browser-based diagramming tool that lets you create architecture diagrams by writing simple code instead of dragging boxes around.

In this step, you will create a free Eraser.io account, set up a new file, and open the diagram-as-code editor where you will build your ShopFlow architecture.

In this step, get ready to:
  • Sign up for a free Eraser.io account.
  • Create a new file for your ShopFlow architecture diagram.
  • Open the diagram-as-code editor and confirm it is ready for your first diagram.
Sign up for Eraser.io

Eraser.io runs entirely in your browser. There is nothing to install.

  • Open your web browser and go to app.eraser.io.
  • Click Sign up.
  • Choose your signup method: Google, GitHub, or Email. Any option works. No credit card is required.
  • Complete the signup flow. Eraser may ask you a few onboarding questions about your team size or role. You can skip these or answer them quickly.

After signing up, you land on the Eraser dashboard. This is your home base for organizing files.

What is the free tier?

The free plan gives you up to 3 files, 5 AI diagram generations, and full access to diagram-as-code. Since you are writing your diagrams in code (not using AI generation), the 5 AI diagram limit does not apply. You only need 1 file for this entire project.

✋ Having trouble signing up?

If your Google or GitHub login does not work, try signing up with email instead. Make sure pop-ups are not blocked in your browser, as the OAuth flow opens in a new window.

Help me troubleshoot my Eraser.io signup.

Create a new file

In Eraser, a file is a workspace that contains an infinite canvas and a note editor. You will create one file to hold your entire ShopFlow architecture diagram.

  • On the Eraser dashboard, click Create file.
  • Name your file ShopFlow Architecture.

You should now see a blank canvas. This is where your diagram will live.

Pro tip: keyboard shortcut

You can also create a new file by pressing Ctrl+N (Windows) or ^+N (macOS) from the dashboard.

Open the diagram-as-code editor

Eraser supports two ways to create diagrams: AI-generated diagrams from a text prompt, and diagram-as-code where you write the diagram yourself. You will use diagram-as-code because writing the code forces you to think about each component and connection in your architecture.

  • On the blank canvas, open the insert menu by pressing / on your keyboard.
  • Select Diagram as Code from the menu.
  • Choose Cloud Architecture Diagram as the diagram type.

You should now see a split view: a code editor panel on one side and a diagram preview on the other. The code editor may contain some example code or be blank.

What is diagram-as-code?

Diagram-as-code means you describe your diagram using a simple text syntax instead of dragging shapes with your mouse. You define nodes (components), groups (layers), and connections (arrows) in code. Eraser automatically renders them into a polished visual diagram.

This approach is faster to update and easier to version-control than a manually drawn diagram.

  • If the editor has example code, select all of it and delete it so you start with a clean slate.
  • Test that the editor works by typing this single line into the code editor:
Browser [icon: monitor]

What does this code do?

This creates a single node called Browser with a monitor icon. In Eraser's syntax, a node is just a name followed by optional properties in square brackets.

The diagram preview should update automatically and show a single box labeled "Browser" with a monitor icon. If you see it, your editor is working.

Don't see the diagram preview?

Make sure you selected Cloud Architecture Diagram as the diagram type. If you accidentally chose a different type (like Sequence Diagram), the syntax will not render correctly.

Also check that you typed the code exactly as shown. The square brackets and colon are required.

Help me get the Eraser diagram-as-code editor working.

  • Delete the test line you just typed. You will start building the real diagram in the next step.

Your workspace is ready. Next up, you will write your first nodes and connections to build the frontend and API layer of the ShopFlow architecture.

Build Your First Components - The Frontend and API Layer

Your Eraser workspace is set up and you have a blank diagram ready to go.

Every web application starts with the same basic question: how does a user's request get from their browser to the server that handles it? In this step, you'll answer that question by building the first three components of your ShopFlow architecture.

In this step, get ready to:
  • Define your first diagram nodes for the browser and web app.
  • Add an API server and connect all three components with arrows.
  • Preview your rendered diagram in Eraser.
Define the user-facing components

Every web app has a starting point: the user's browser. From there, the request hits a frontend web application that renders the pages the user sees.

  • Click into the diagram-as-code editor panel on your Eraser canvas.
  • Type the following code to create your first two nodes:
// User-facing components
Browser [icon: monitor]
"Web App" [icon: globe]

What does this code do?

Each line defines a node in your architecture diagram.

  • The word before the brackets is the node's name. It appears as a label in the diagram.
  • The icon: property assigns a visual icon to the node. monitor shows a screen icon, and globe shows a web icon.
  • Names with spaces or special characters need double quotes around them, like "Web App".

Your diagram should now show two nodes side by side: a Browser with a monitor icon and a Web App with a globe icon.

Don't see any nodes?

  • Make sure you're typing in the code editor panel, not on the canvas itself.
  • Check that icon: has a colon and a space before the icon name.
  • Eraser renders automatically as you type. If nothing appears, try clicking elsewhere on the canvas to trigger a re-render.

Help me figure out why my nodes aren't showing up in Eraser.

Add the API layer and connect your components

The frontend doesn't talk to the database directly. Instead, it sends requests to an API server that handles the business logic.

  • Replace everything in your code editor with the following code to add the API server and draw connections between all three components:
// User-facing components
Browser [icon: monitor]
"Web App" [icon: globe]

// Backend entry point
"API Server" [icon: server]

// Data flow: user request travels from browser to API
Browser > "Web App" > "API Server"

What's happening here?

  • The > symbol creates a directional arrow between two nodes. It shows which direction data flows.
  • You can chain connections in a single line. Browser > "Web App" > "API Server" draws two arrows: one from Browser to Web App, and another from Web App to API Server.
  • The server icon gives the API Server a server-rack visual.

Your diagram now shows three nodes connected by arrows flowing left to right: Browser, Web App, and API Server.

Arrows not showing up?

  • Make sure the node names in your connection line match the names you defined above exactly, including the double quotes.
  • Check that you're using > (the greater-than symbol), not a hyphen -.

My arrows aren't appearing between my Eraser nodes. Help me debug.

Preview and verify your diagram

Eraser renders your diagram in real time as you type. Take a moment to check that everything looks right before moving on.

  • Look at the rendered diagram on the canvas to the right of the code editor.
  • Verify that you see three nodes: Browser, Web App, and API Server.
  • Verify that two arrows connect them in order: Browser to Web App, then Web App to API Server.

What is an API server?

An API server is the middleman between the frontend (what the user sees) and the backend (where data lives). When you browse products on an e-commerce site, the Web App sends a request to the API Server asking for product data. The API Server fetches that data and sends it back.

Awesome, I've got everything!

Great. Double check you haven't missed any quotes around node names with spaces.

I'd like to double check the full code

Here is the complete code you should have in your editor so far:

// User-facing components
Browser [icon: monitor]
"Web App" [icon: globe]

// Backend entry point
"API Server" [icon: server]

// Data flow: user request travels from browser to API
Browser > "Web App" > "API Server"

Your first three components are in place and connected. Next up, you'll add the data layer with a database and caching to show where ShopFlow actually stores and retrieves information.

Add the Data Layer - Database and Caching

Your frontend and API layer are connected and rendering on the canvas. The next piece of the puzzle is where your application actually stores and retrieves data.

In this step, you will add a database and a caching layer to your diagram. You will also learn how to use groups to visually organize your architecture into distinct layers.

In this step, get ready to:
  • Add a database node and connect it to your API Server.
  • Add a Redis cache between the API Server and the Database.
  • Organize your diagram into groups that represent architectural layers.
Add a database node

Every web application needs a place to store its data. For ShopFlow, the database holds product listings, user accounts, and order history.

  • In the diagram-as-code editor, add a new line below your existing code and type the following:
Database [icon: database]

What does this code do?

This creates a node called Database with a database icon. The icon property inside the square brackets tells Eraser which visual icon to display on the node.

  • Connect the API Server to the Database by adding this connection on a new line:
"API Server" > Database

Why the quotes around API Server?

Node names that contain spaces or reserved characters must be wrapped in double quotes. "API Server" needs quotes because of the space between the two words. Single-word names like Database do not need them.

The > symbol creates a directional arrow showing that the API Server sends requests to the Database.

  • Check the canvas preview. You should see a new Database node with a database icon, connected to your API Server by an arrow.

Don't see the Database node?

  • Make sure Database is spelled exactly the same in both the node definition and the connection line. Names are case-sensitive.
  • Check that "API Server" in your connection matches the node name you defined in Step 2 exactly, including the quotes.
  • My Database node is not showing up in the diagram.
Add a caching layer

Reading from a database every single time a user loads a page is slow. A cache stores frequently accessed data in memory so the application can skip the database for repeated requests.

What is a cache?

Think of a cache like a sticky note on your desk. Instead of walking to the filing cabinet (the database) every time you need a piece of information, you jot down the most-used facts on a sticky note for instant access.

Redis is one of the most popular caching tools in real-world web applications. It stores data in memory, which makes lookups extremely fast compared to reading from a traditional database on disk.

  • Add a Cache node by typing this on a new line in the editor:
Cache [icon: redis]

Why the Redis icon?

This creates a node called Cache and assigns it the redis icon. Eraser includes built-in icons for popular technologies like Redis, Docker, and Kubernetes. Using the Redis icon immediately signals caching to anyone reading the diagram.

  • Delete the "API Server" > Database connection you added in the previous substep. You are going to replace it with two new connections that route through the Cache.
  • Add these two connections on separate lines:
"API Server" > Cache: check cache
Cache > Database: cache miss

What is happening here?

  • The first line connects the API Server to the Cache with the label check cache. This shows that the API Server looks in the Cache first before going to the Database.
  • The second line connects the Cache to the Database with the label cache miss. A cache miss means the requested data was not found in the Cache, so the system falls back to the Database.
  • Connection labels are added after a colon (:) at the end of the connection line. The label text appears directly on the arrow in the rendered diagram.
  • Check the canvas preview. You should see the Cache node with a Redis icon sitting between the API Server and the Database, with labeled arrows showing the data flow.

Labels not showing on the arrows?

  • Make sure there is a colon (:) between the connection target and the label text. The format is NodeA > NodeB: label text.
  • Check that you deleted the old "API Server" > Database line. Duplicate connections can cause unexpected rendering.
  • My connection labels are not appearing on the diagram.
Use groups to organize your layers

Right now, all your nodes are floating independently on the canvas. In a real architecture diagram, related components are grouped into layers to make it clear which parts of the system belong together.

What are groups?

Groups are visual containers that wrap related nodes together. In Eraser's syntax, you create a group by writing a name followed by curly braces { } and placing nodes inside them. Groups can have their own icons and colors, just like nodes.

You are going to restructure your entire code file to wrap nodes into two groups: a Frontend group and a Backend group. This means replacing all the code you have written so far.

  • Select all the code in your editor and replace it with the following:
// Frontend layer - what the user interacts with
Frontend [color: blue] {
  Browser [icon: monitor]
  "Web App" [icon: globe]
}

// Backend layer - server-side processing and data
Backend [color: green] {
  "API Server" [icon: server]
  Cache [icon: redis]
  Database [icon: database]
}

// Connections between components
Browser > "Web App"
"Web App" > "API Server"
"API Server" > Cache: check cache
Cache > Database: cache miss

What does this code do?

  • Frontend [color: blue] { } creates a group called Frontend with a blue color. The Browser and Web App nodes are placed inside the curly braces, so they visually belong to this group.
  • Backend [color: green] { } creates a second group with a green color. The API Server, Cache, and Database all live inside this group.
  • The connections are defined outside the groups at the bottom of the file. Eraser matches node names across the entire file, so connections work even when nodes are inside different groups.
  • Lines starting with // are comments. They help you organize your code but do not appear in the rendered diagram.
  • Check the canvas preview. You should see two colored boxes on the diagram. The blue Frontend box contains Browser and Web App. The green Backend box contains API Server, Cache, and Database.
  • Verify that arrows still connect the components across groups: Browser to Web App, Web App to API Server, API Server to Cache, and Cache to Database.

Groups not showing as colored boxes?

  • Make sure each group has matching opening and closing curly braces { }. A missing closing brace is the most common syntax error.
  • Check that nodes are placed inside the curly braces of their group, not after the closing brace.
  • Verify the color property uses the format [color: blue] with square brackets, a colon, and a space before the color name.
  • My groups are not rendering correctly in the diagram.

Awesome, I've got everything

Double check that you have two colored groups with five nodes total, and four arrows connecting them across groups. Save your work before moving on.

I'd like to double check the full code

Here is the complete code you should have in your editor at this point.

// Frontend layer - what the user interacts with
Frontend [color: blue] {
  Browser [icon: monitor]
  "Web App" [icon: globe]
}

// Backend layer - server-side processing and data
Backend [color: green] {
  "API Server" [icon: server]
  Cache [icon: redis]
  Database [icon: database]
}

// Connections between components
Browser > "Web App"
"Web App" > "API Server"
"API Server" > Cache: check cache
Cache > Database: cache miss

Your diagram now has a clear data layer with a caching strategy. Next up, you will add infrastructure components like a load balancer and CDN to make the architecture production-ready.

Add Infrastructure Components - Load Balancer and CDN

Your diagram already shows how data flows from the user's browser through the API layer and into the database. In a real production system, two critical infrastructure components sit in front of your application to handle scale and speed.

In this step, you will add a load balancer to distribute traffic across servers and a CDN to serve static files faster. You will also apply styling to make the diagram look polished and professional.

In this step, get ready to:
  • Add a load balancer node between the frontend and API layer.
  • Add a CDN node to cache static assets closer to the user.
  • Apply color-coding and styling to create a professional-looking diagram.
Add a load balancer between the frontend and API server

A load balancer sits between users and your servers. When thousands of people visit a website at once, a single server would collapse under the pressure. The load balancer distributes incoming requests across multiple servers so no single one gets overwhelmed.

In your ShopFlow diagram, the load balancer goes between the Web App and the API Server. You need to update the connection chain so traffic flows through it.

  • In the Eraser code editor, find the connection line that links Web App to API Server.
  • Find this line:
"Web App" > "API Server"
  • Replace it with the following two lines to insert a load balancer node and route traffic through it:
// Load balancer distributes traffic across servers
"Load Balancer" [icon: load-balancer]

"Web App" > "Load Balancer" > "API Server"

What does this code do?

  • The first line defines a new node called Load Balancer with the built-in load-balancer icon from Eraser's networking icon set.
  • The connection chain "Web App" > "Load Balancer" > "API Server" replaces the direct link so that traffic now passes through the load balancer first.
  • Names with spaces like "Load Balancer" need double quotes because the space is a reserved character in Eraser's syntax.
  • Check the rendered diagram on the canvas. You should see the Load Balancer node appear between Web App and API Server with arrows connecting all three in sequence.

Don't see the Load Balancer node?

  • Make sure the old "Web App" > "API Server" line is fully deleted. If both lines exist, you will see duplicate connections.
  • Check that the node name "Load Balancer" is wrapped in double quotes. Without quotes, Eraser treats each word as a separate token.
  • If the icon is missing, verify that the icon name is load-balancer with a hyphen, not a space or underscore.

Still stuck? Ask for help.

💡 Why does the load balancer sit here?

In a real e-commerce app like ShopFlow, the load balancer is the gatekeeper between the public internet and your private backend servers. It decides which API server handles each incoming request. If one server goes down, the load balancer routes traffic to the remaining healthy servers automatically.

Add a CDN in front of the web app

A CDN (Content Delivery Network) caches static files like images, CSS, and JavaScript on servers spread around the world. When a user in Tokyo visits ShopFlow, the CDN serves these files from a nearby server instead of fetching them from the origin server in another country.

  • Add the CDN node by placing the following code above your existing Browser connection line:
// CDN caches static assets closer to the user
CDN [icon: cloudflare]

What does this code do?

This creates a CDN node using the cloudflare icon. Cloudflare is one of the most popular CDN providers, so its logo makes the node instantly recognizable.

  • Now update the connection from Browser to Web App. Find this line:
Browser > "Web App"
  • Replace it with this line so the browser's request passes through the CDN first:
Browser > CDN > "Web App"
  • Check the rendered diagram. You should now see the full flow: Browser connects to CDN, which connects to Web App, which connects to Load Balancer, which connects to API Server.

CDN not appearing in the diagram?

  • Make sure you deleted the old Browser > "Web App" line. Leaving it in creates a duplicate path that skips the CDN.
  • The node name CDN has no spaces, so it does not need quotes. But the icon name must be exactly cloudflare in all lowercase.

Still stuck? Ask for help.

Apply styling to make the diagram professional

Eraser supports diagram-level styling properties that change how the entire diagram looks. You can also color-code individual groups to visually separate the layers of your architecture.

  • Add the following three lines at the very top of your code, before any node or group definitions:
// Diagram-level styling
typeface clean
colorMode bold
styleMode plain

What do these styling properties do?

  • typeface clean switches the font from a hand-drawn style to a clean, professional typeface.
  • colorMode bold makes the group and node colors more vivid and saturated.
  • styleMode plain removes drop shadows for a flat, modern look.
  • Now add color properties to your groups. Find your Frontend group definition and add a color property. Find this line:
Frontend {
  • Replace it with:
Frontend [color: blue] {
  • Do the same for your Backend group. Find this line:
Backend {
  • Replace it with:
Backend [color: green] {
  • Check the rendered diagram. Your Frontend group should have a blue tint and your Backend group should have a green tint.
  • The overall diagram should look clean and flat with no hand-drawn styling.

Pro tip: color options

Eraser supports color names like blue, green, red, and orange. You can also use hex codes like "#FF5733" for precise colors. Hex codes must be wrapped in double quotes.

✋ Colors not showing up?

  • Make sure the color property is inside square brackets [ ] and placed before the opening curly brace { of the group.
  • If colors look faint, check that you added colorMode bold at the top of your code. The default pastel mode uses very light fills that can be hard to see.

Still stuck? Ask for help.

Awesome, I've got everything!

Great. Double check that you have saved your file in Eraser before moving on.

I'd like to double check the full code

Here is the full diagram-as-code file with all the changes from this step included. Compare it against your code in the editor.

// Diagram-level styling
typeface clean
colorMode bold
styleMode plain

// User's browser
Browser [icon: monitor]

// CDN caches static assets closer to the user
CDN [icon: cloudflare]

// Frontend group - user-facing components
Frontend [color: blue] {
  "Web App" [icon: globe]
}

// Load balancer distributes traffic across servers
"Load Balancer" [icon: load-balancer]

// Backend group - server-side components
Backend [color: green] {
  "API Server" [icon: server]
  Cache [icon: redis]
  Database [icon: database]
}

// Connection flow
Browser > CDN > "Web App"
"Web App" > "Load Balancer" > "API Server"
"API Server" > Cache: check cache
Cache > Database: cache miss

Your architecture diagram now includes all the infrastructure components that a real production system uses. Next up, you will add connection labels to document what data flows between each component and export your finished diagram.

Polish and Export Your Diagram

In the previous step, you added infrastructure components like a load balancer and CDN to your ShopFlow architecture. Your diagram now has all the right components in place.

Right now, someone looking at the arrows between your nodes has no idea what data is actually flowing through them. In this step, you will add connection labels to turn your diagram into real documentation, review the full architecture, and export it to share.

In this step, get ready to:
  • Add connection labels that document the data flowing between each component.
  • Review the full diagram to verify the end-to-end request flow.
  • Export and share your finished architecture diagram.
Add connection labels to document data flow

Arrows without labels show that two components are connected, but they do not explain what travels between them. Connection labels answer the question "what data moves here?" and transform a picture into useful documentation.

  • In the Eraser.io diagram-as-code editor, find the connection lines at the bottom of your code (the lines that use the > syntax).
  • Update your connection lines to include labels by adding a colon and label text after each connection. Replace your existing connections with the following code:
// Connections with labels
Browser > CDN : "request page"
CDN > "Web App" : "serve static assets"
"Web App" > "Load Balancer" : "API call"
"Load Balancer" > "API Server" : "route request"
"API Server" > Cache : "check cache"
Cache > Database : "cache miss"
"API Server" > Database : "read/write orders"

What does this code do?

  • The colon : after a connection adds a text label to the arrow. The syntax is A > B : "label".
  • Each label describes the type of data or action happening on that connection, like "request page" or "cache miss".
  • Labels appear directly on the arrows in the rendered diagram, so anyone reading it can trace the full request lifecycle without guessing.
  • Check the rendered diagram on the canvas. You should see text labels appearing on each arrow between your components.

Labels not showing up?

  • Make sure there is a space before and after the colon. A > B : "label" works, but A > B:"label" may not.
  • Check that your node names match exactly between the connection lines and the node definitions above. Names are case-sensitive.
  • Help me debug my connection labels.
Review the full diagram

Before exporting, you want to verify that the entire architecture tells a coherent story. A good architecture diagram lets someone trace a user's request from start to finish without any dead ends.

  • Look at the rendered diagram on the canvas and trace the flow from left to right: Browser, CDN, Web App, Load Balancer, API Server, Cache, and Database.
  • Verify that every arrow has a label describing the data that flows through it.
  • Confirm that your groups (Frontend and Backend) visually separate the layers of the architecture.

Your full diagram code should now look similar to this:

// Diagram-level styling
typeface clean

// Frontend layer
Frontend [color: blue] {
  Browser [icon: monitor]
  CDN [icon: cloud]
  "Web App" [icon: globe]
}

// Backend layer
Backend [color: green] {
  "Load Balancer" [icon: load-balancer]
  "API Server" [icon: server]
  Cache [icon: redis]
  Database [icon: database]
}

// Connections with labels
Browser > CDN : "request page"
CDN > "Web App" : "serve static assets"
"Web App" > "Load Balancer" : "API call"
"Load Balancer" > "API Server" : "route request"
"API Server" > Cache : "check cache"
Cache > Database : "cache miss"
"API Server" > Database : "read/write orders"

Why does this diagram read left to right?

Eraser defaults to direction right, which lays out nodes from left to right. This matches how most people read data flow diagrams. You can change this by adding direction down at the top of your code if you prefer a vertical layout.

💡 Pro tip: color your connections

You can add color to individual connections to highlight important paths. For example, "API Server" > Database : "read/write orders" {color: green} makes that arrow green. This is useful for calling attention to critical data flows.

Export and share your diagram

Your diagram is complete. Now you need to get it out of Eraser so you can share it in presentations, documentation, or portfolios.

  • Click on your diagram in the canvas to select it.
  • Right-click on the diagram to open the context menu.
  • Select the export option and choose PNG to download a high-resolution image of your diagram.

What export format should I pick?

  • PNG is best for presentations, Slack messages, and embedding in documents.
  • SVG is a vector format that scales to any size without losing quality. Great for printing or high-resolution displays.
  • PDF works well for formal documentation and reports.
  • To share a live link instead, click the Copy link button at the top of the file. This generates a shareable URL that anyone can use to view your diagram.

Why save your diagram-as-code text?

The diagram-as-code text in your editor is the source of truth for your diagram. Unlike a PNG image, you can edit it, version-control it in Git, and regenerate the diagram at any time. Copy the full code from the editor and save it in a text file or a code repository so you can reuse and modify it later.

  • Select all the code in the diagram-as-code editor.
  • Copy it using Cmd+C (macOS) or Ctrl+C (Windows).
  • Paste it into a text file, a note-taking app, or a code repository for safekeeping.

Can't find the export option?

  • Make sure you are clicking directly on the diagram element on the canvas, not on the code editor panel.
  • If right-clicking does not show export options, try selecting the diagram and looking for an export icon in the toolbar that appears above the selection.
  • Help me find the export option in Eraser.io.

You now have a polished, shareable architecture diagram and a reusable code file. Next up, you will tackle the Secret Mission and add asynchronous order processing to your ShopFlow architecture.

Secret mission

Add Asynchronous Order Processing

Your ShopFlow diagram covers the basics, but real e-commerce apps don't process orders inline. When a user clicks "Place Order," the API server doesn't sit there crunching numbers. It drops a message into a queue, and a background worker picks it up. Ready to add this pattern to your diagram?

Before you go

🗑 Before you go

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely in the browser using Eraser.io's free tier, so there are no ongoing costs.

Resources you used:

  • Eraser.io free account.
  • ShopFlow Architecture diagram file in your Eraser workspace.

Keep everything running

No action needed. Choose this if you're still actively building or want to revisit your diagram later.

  • Your Eraser.io account and diagram file will remain available at no cost.
  • The free tier supports up to 3 files, so you still have room for more diagrams.
  • You can return to your diagram anytime by signing in at app.eraser.io.

Pause - I'll come back to this later

Since Eraser.io is browser-based and free, there is nothing to shut down or pause. Your diagram stays saved in your account.

  • Save a copy of your diagram-as-code text in a local file on your computer as a backup.
  • Your diagram will be waiting for you next time you sign in.

Delete - I don't want to use this again

Remove all project resources and start fresh.

  • Open your Eraser workspace at app.eraser.io.
  • Find your ShopFlow Architecture file in the workspace.
  • Click the three-dot menu on the file and select Delete.
  • If you want to delete your Eraser.io account entirely, go to your account settings and look for the option to delete your account.

Mission accomplished

🎉 Mission Accomplished

Nice work! You just built a professional cloud architecture diagram for a complete e-commerce application using Eraser.io's diagram-as-code syntax.

You've learned how to:

  • Created a multi-layer architecture diagram with nodes, groups, connections, and icons to represent a real e-commerce system called ShopFlow.
  • Used diagram-as-code syntax in Eraser.io to define components, style groups with colors, and label data flows between layers.
  • Built an understanding of how web applications are structured across layers: frontend, CDN, load balancer, API server, cache, and database.
  • Added asynchronous order processing with a message queue, background worker, and email service to handle orders the way real production systems do.

Ready to quiz yourself?