Create a Software Architecture Diagram

Build a diagram showing a web frontend, an API server, and a database. Keep the main request path easy to follow, then add supporting services.

Create a workspace

Sign in to DrawMotive Diagrams and choose New diagram. For a local editable PNG instead, follow the VS Code guide.

Add the components

1. Choose Rectangle and draw a box for Web Frontend.
2. Add another box for API Server to its right.
3. Add a third box for Database farther right.
4. Add Auth Service, Cache, or Message Queue if they help explain your system.

Use similar sizes for components with similar roles. Leave enough space for connection labels. Use Text to add component names.

Connect the system

Choose Arrow to connect related components:

• Web Frontend to API Server.
• API Server to Database.
• API Server to each supporting service.

Add text labels such as REST API, SQL, OAuth, and Redis to explain important relationships. Make arrow direction match the meaning you want to communicate.

Refine the layout

Move components to make the main reading direction clear. Adjust handles and spacing, and check that labels remain readable. Use the grid to help place objects.

Select objects to change the available color and line controls. A small palette can distinguish the frontend, services, and storage. Avoid using color as the only way to distinguish roles; keep the labels explicit.

Start from text instead

You can begin in the TextGraph playground with:

frontend -> api
api -> database

frontend: Web Frontend
api: API Server
database: Database

Copy this source into Import TextGraph on the website to create a new editable diagram. Refine the imported objects on the canvas. Keep the source separately because canvas edits do not rewrite it.

Save and share

On the website, check that changes have synchronized. In VS Code, choose Save diagram and include the .draw.png in your project documentation. For a page inside Confluence, use the macro workflow.