Step-by-Step Process Examples

This page demonstrates various approaches for creating step-by-step documentation with images (typically screen captures) in Docusaurus.

Pattern 1: Numbered Steps with Images

Best for: Linear processes where each step builds on the previous one.

Step 1: Open the application

Launch the application from your desktop or start menu. You should see the main welcome screen.

Application welcome screen showing the main dashboard with navigation menu on the left and welcome message in the center

Figure 1: Application welcome screen with main navigation visible

Step 2: Navigate to settings

Click on the "Settings" option in the left sidebar menu. This will open the configuration panel.

Settings panel opened showing various configuration options including user preferences, theme settings, and account management

Figure 2: Settings panel showing available configuration categories

📋 Copy Pattern 1 Code

### Step 1: Open the application

Launch the application from your desktop or start menu. You should see the main welcome screen.

![Application welcome screen showing the main dashboard with navigation menu on the left and welcome message in the center](./images/number1.png)

*Figure 1: Application welcome screen with main navigation visible*

### Step 2: Navigate to settings

Click on the "Settings" option in the left sidebar menu. This will open the configuration panel.

![Settings panel opened showing various configuration options including user preferences, theme settings, and account management](./images/number2.png)

*Figure 2: Settings panel showing available configuration categories*

Pattern 2: Admonition-Based Steps

Best for: Important processes where you want steps to stand out visually.

Step 1: Install dependencies

First, make sure you have all required dependencies installed:

pnpm install @docusaurus/core @docusaurus/preset-classic

Terminal showing successful installation of Docusaurus dependencies with version numbers

Installation should complete without errors as shown above

Step 2: Configure your site

Edit your docusaurus.config.js file with your site information:

docusaurus.config.js
module.exports = {
  title: 'My Site',
  tagline: 'My awesome documentation site',
  url: 'https://my-site.com',
  // ... other config
};

Code editor showing docusaurus.config.js with highlighted configuration sections

Make sure to update the URL and title fields

Step 3: Test your setup

Run the development server to verify everything works:

pnpm start

Browser showing the running Docusaurus site with default theme and navigation

Your site should load successfully at http://localhost:3000

📋 Copy Pattern 2 Code

:::info[Step 1: Install dependencies]
First, make sure you have all required dependencies installed:

```bash
pnpm install @docusaurus/core @docusaurus/preset-classic
```

![Terminal showing successful installation of Docusaurus dependencies with version numbers](./images/number4.png)

*Installation should complete without errors as shown above*
:::

:::warning[Step 2: Configure your site]
Edit your `docusaurus.config.js` file with your site information:

```javascript title="docusaurus.config.js"
module.exports = {
  title: 'My Site',
  tagline: 'My awesome documentation site',
  url: 'https://my-site.com',
  // ... other config
};
```

![Code editor showing docusaurus.config.js with highlighted configuration sections](./images/number5.png)

*Make sure to update the URL and title fields*
:::

:::tip[Step 3: Test your setup]
Run the development server to verify everything works:

```bash
pnpm start
```

![Browser showing the running Docusaurus site with default theme and navigation](./images/number6.png)

*Your site should load successfully at http://localhost:3000*
:::

Pattern 3: Tabbed Steps

Useful when you have related pages that need to be grouped together

VS Code
External Terminal

Method 1: Using VS Code

Step 1: Open the integrated terminal

Press `Ctrl+`` (backtick) to open the integrated terminal in VS Code.

VS Code interface with integrated terminal open at the bottom, showing the file explorer and editor

VS Code with integrated terminal ready for commands

Step 2: Run the build command

Type the following command in the terminal:

pnpm build

Terminal showing the build process with progress indicators and successful completion message

Build process completing successfully

Method 2: Using External Terminal

Step 1: Open your system terminal

Open Terminal (macOS/Linux) or Command Prompt (Windows).

System terminal window open with current directory showing the project folder

System terminal ready for commands

Step 2: Navigate to your project

Change to your project directory:

cd /path/to/your/project
pnpm build

Terminal showing directory navigation and build command execution

Building from external terminal

📋 Copy Pattern 3 Code

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="vscode" label="VS Code" default>

### Method 1: Using VS Code

#### Step 1: Open the integrated terminal
Press `Ctrl+` (backtick) to open the integrated terminal in VS Code.

![VS Code interface with integrated terminal open at the bottom, showing the file explorer and editor](./images/number7.png)

*VS Code with integrated terminal ready for commands*

#### Step 2: Run the build command
Type the following command in the terminal:

```bash
    pnpm build
```

![Terminal showing the build process with progress indicators and successful completion message](./images/number8.png)

*Build process completing successfully*

</TabItem>
<TabItem value="external" label="External Terminal">

### Method 2: Using External Terminal

#### Step 1: Open your system terminal
Open Terminal (macOS/Linux) or Command Prompt (Windows).

![System terminal window open with current directory showing the project folder](./images/number1.png)

*System terminal ready for commands*

#### Step 2: Navigate to your project
Change to your project directory:

```bash
    cd /path/to/your/project
    pnpm build
```

![Terminal showing directory navigation and build command execution](./images/number2.png)

*Building from external terminal*

</TabItem>
</Tabs>

Pattern 4: Multiple Images in a Row

Best for: Showing a quick sequence of steps or comparing multiple states side-by-side.

Method 1: Using HTML `<img>` tags

When you need precise control over layout and sizing, use HTML <img> tags with flexbox styling:

Quick 4-step process overview:

Step 1
Login screen

Step 2
Dashboard view

Step 3
Settings panel

Step 4
Confirmation

Complete workflow from login to confirmation

📋 Copy Pattern 4 Code (Flexbox Method)

#### Quick 4-step process overview:

<div style={{display: 'flex', gap: '20px', flexWrap: 'wrap', justifyContent: 'center', marginBottom: '20px'}}>
  <div style={{textAlign: 'center', flex: '1', minWidth: '150px', maxWidth: '200px'}}>
    <img 
      src={require('./images/number1.png').default}
      alt="Step 1: Login screen" 
      style={{width: '100%', maxWidth: '150px', height: 'auto', border: '3px solid #dc2626', borderRadius: '4px', display: 'block', margin: '0 auto'}}
    />
    <div style={{marginTop: '10px'}}>
      <strong>Step 1</strong><br/>
      Login screen
    </div>
  </div>
  <div style={{textAlign: 'center', flex: '1', minWidth: '150px', maxWidth: '200px'}}>
    <img 
      src={require('./images/number2.png').default}
      alt="Step 2: Dashboard view" 
      style={{width: '100%', maxWidth: '150px', height: 'auto', border: '3px solid #16a34a', borderRadius: '4px', display: 'block', margin: '0 auto'}}
    />
    <div style={{marginTop: '10px'}}>
      <strong>Step 2</strong><br/>
      Dashboard view
    </div>
  </div>
  <div style={{textAlign: 'center', flex: '1', minWidth: '150px', maxWidth: '200px'}}>
    <img 
      src={require('./images/number3.png').default}
      alt="Step 3: Settings panel" 
      style={{width: '100%', maxWidth: '150px', height: 'auto', border: '3px solid #2563eb', borderRadius: '4px', display: 'block', margin: '0 auto'}}
    />
    <div style={{marginTop: '10px'}}>
      <strong>Step 3</strong><br/>
      Settings panel
    </div>
  </div>
  <div style={{textAlign: 'center', flex: '1', minWidth: '150px', maxWidth: '200px'}}>
    <img 
      src={require('./images/number4.png').default}
      alt="Step 4: Confirmation dialog" 
      style={{width: '100%', maxWidth: '150px', height: 'auto', border: '3px solid #ea580c', borderRadius: '4px', display: 'block', margin: '0 auto'}}
    />
    <div style={{marginTop: '10px'}}>
      <strong>Step 4</strong><br/>
      Confirmation
    </div>
  </div>
</div>

*Complete workflow from login to confirmation*

Method 2: Markdown Table approach

You can also use a table for more structured layout:

Step 1: Start	Step 2: Configure	Step 3: Review	Step 4: Complete

Initial setup	Set preferences	Review changes	Process complete

📋 Copy Pattern 4 Code (Table Method)

| Step 1: Start | Step 2: Configure | Step 3: Review | Step 4: Complete |
|:---:|:---:|:---:|:---:|
| <img src={require('./images/number5.png').default} alt="Initial setup screen" style={{width: '100%', maxWidth: '120px', height: 'auto', border: '1px solid #ddd'}} /> | <img src={require('./images/number6.png').default} alt="Configuration options" style={{width: '100%', maxWidth: '120px', height: 'auto', border: '1px solid #ddd'}} /> | <img src={require('./images/number7.png').default} alt="Review settings" style={{width: '100%', maxWidth: '120px', height: 'auto', border: '1px solid #ddd'}} /> | <img src={require('./images/number8.png').default} alt="Success confirmation" style={{width: '100%', maxWidth: '120px', height: 'auto', border: '1px solid #ddd'}} /> |
| Initial setup | Set preferences | Review changes | Process complete |

Markdown images stack vertically by default and use original image dimensions

Pattern 5: Images On The Left, Text On The Right (or vice versa)

Step 1: Initial Login

Start by opening the application and entering your credentials on the login screen. Make sure to use your company email address and the password provided during onboarding. If this is your first time logging in, you may need to change your password.

Step 2: Navigate Dashboard

Once logged in, you'll see the main dashboard with various widgets and navigation options. Take a moment to familiarize yourself with the layout. The left sidebar contains the main navigation menu, while the center panel shows your recent activities and notifications.

Layout uses flexWrap for natural responsive behavior on smaller screens

📋 Copy Pattern 5 Code (Image Left)

<div style={{display: 'flex', alignItems: 'flex-start', gap: '20px', marginBottom: '20px', flexWrap: 'wrap'}}>
  <img 
    src={require('./images/number1.png').default} 
    alt="Step 1: Login screen" 
    style={{
      width: '200px', 
      maxWidth: '100%',
      height: 'auto',
      flexShrink: 0, 
      border: '1px solid #ddd', 
      borderRadius: '4px'
    }}
  />
  <div style={{flex: 1, minWidth: 0}}>
    <h5>Step 1: Initial Login</h5>
    <p>Start by opening the application and entering your credentials on the login screen. Make sure to use your company email address and the password provided during onboarding. If this is your first time logging in, you may need to change your password.</p>
  </div>
</div>

<div style={{display: 'flex', alignItems: 'flex-start', gap: '20px', marginBottom: '20px', flexWrap: 'wrap'}}>
  <img 
    src={require('./images/number2.png').default} 
    alt="Step 2: Dashboard overview" 
    style={{
      width: '200px', 
      maxWidth: '100%',
      height: 'auto',
      flexShrink: 0, 
      border: '1px solid #ddd', 
      borderRadius: '4px'
    }}
  />
  <div style={{flex: 1, minWidth: 0}}>
    <h5>Step 2: Navigate Dashboard</h5>
    <p>Once logged in, you'll see the main dashboard with various widgets and navigation options. Take a moment to familiarize yourself with the layout. The left sidebar contains the main navigation menu, while the center panel shows your recent activities and notifications.</p>
  </div>
</div>

Images On The Right, Text On The Left

Step 1: Review Requirements

Before starting the installation process, review the system requirements and ensure your environment meets all prerequisites. Check that you have sufficient disk space and the required permissions.

Step 2: Download Installer

Download the latest version of the installer from the official website. Make sure to select the correct version for your operating system. Verify the download integrity using the provided checksum.

Text and images wrap naturally based on available screen space

📋 Copy Pattern 5 Code (Image Right)

<div style={{display: 'flex', alignItems: 'flex-start', gap: '20px', marginBottom: '20px', flexWrap: 'wrap'}}>
  <div style={{flex: 1, minWidth: 0}}>
    <h5>Step 1: Review Requirements</h5>
    <p>Before starting the installation process, review the system requirements and ensure your environment meets all prerequisites. Check that you have sufficient disk space and the required permissions.</p>
  </div>
  <img 
    src={require('./images/number3.png').default} 
    alt="Step 1: Requirements checklist" 
    style={{
      width: '200px', 
      maxWidth: '100%',
      height: 'auto',
      flexShrink: 0, 
      border: '1px solid #ddd', 
      borderRadius: '4px'
    }}
  />
</div>

<div style={{display: 'flex', alignItems: 'flex-start', gap: '20px', marginBottom: '20px', flexWrap: 'wrap'}}>
  <div style={{flex: 1, minWidth: 0}}>
    <h5>Step 2: Download Installer</h5>
    <p>Download the latest version of the installer from the official website. Make sure to select the correct version for your operating system. Verify the download integrity using the provided checksum.</p>
  </div>
  <img 
    src={require('./images/number4.png').default} 
    alt="Step 2: Download page" 
    style={{
      width: '200px', 
      maxWidth: '100%',
      height: 'auto',
      flexShrink: 0, 
      border: '1px solid #ddd', 
      borderRadius: '4px'
    }}
  />
</div>

Other Techniques

Creating Collapsible Steps

The entire step-by-step flow can be hidden:

Optional: Advanced configuration

If you need more control over the build process, you can customize these settings:

Step A: Edit configuration file

Modify the advanced.config.js file:

module.exports = {
  customBuildOptions: {
    minify: true,
    sourceMaps: true
  }
};

Code editor showing the advanced configuration file with syntax highlighting

📋 Copy Collapsible Code Block

<details>
<summary>Optional: Advanced configuration </summary>

```javascript
module.exports = {
  customBuildOptions: {
    minify: true,
    sourceMaps: true
  }
};

<!-- Small image for code screenshots -->
<img src={require('./images/number2.png').default} alt="Code editor showing the advanced configuration file with syntax highlighting" width="500" />

Image Sizing With A Border

Step 1: Overview (Large image with border)

Get familiar with the main interface layout:

Complete application interface showing all panels and navigation

Full interface overview - click to zoom

📋 Copy Image Sizing With A Border

#### Step 1: Overview (Large image with border)

Get familiar with the main interface layout:

<!-- Large image for overview screenshots -->
<img 
  src={require('./images/number3.png').default}
  alt="Complete application interface showing all panels and navigation" 
  width="300" 
  style={{maxWidth: '100%', border: '10px solid #ddd'}}
/>

*Full interface overview - click to zoom*

Status indicator in active state

Responsive Image Sizing

For images that should adapt to different screen sizes:

📋 Copy Responsive Image Sizing

<img 
  src={require('./images/number6.png').default}
  alt="Dashboard showing responsive layout" 
  style={{
    width: '100%',
    maxWidth: '700px', 
    height: 'auto',
    border: '1px solid #ccc',
    borderRadius: '4px'
  }}
/>

Pattern 1: Numbered Steps with Images​

Step 1: Open the application​

Step 2: Navigate to settings​

Pattern 2: Admonition-Based Steps​

Pattern 3: Tabbed Steps​

Method 1: Using VS Code​

Step 1: Open the integrated terminal​

Step 2: Run the build command​

Method 2: Using External Terminal​

Step 1: Open your system terminal​

Step 2: Navigate to your project​

Pattern 4: Multiple Images in a Row​

Method 1: Using HTML <img> tags​

Quick 4-step process overview:​

Method 2: Markdown Table approach​

Pattern 5: Images On The Left, Text On The Right (or vice versa)​