🔄 Building a CI/CD Pipeline Diagram

What You'll Build

In this tutorial, you'll create a complete CI/CD (Continuous Integration/Continuous Delivery) pipeline diagram that shows the flow from code commit to production deployment. By the end, you'll have a beautiful, hand-drawn style diagram that's perfect for:

• Engineering documentation
• Team onboarding materials
• Technical presentations
• Architecture decision records (ADRs)

Understanding the Structure

Before we start building, let's break down what makes a good CI/CD diagram. Our pipeline will have four main stages:

Step 1: Create the Canvas Background

Every great diagram starts with a solid foundation. We'll create a dark background that makes our colorful stages pop.

{
  "id": "bg",
  "type": "rectangle",
  "x": 20,
  "y": 20,
  "w": 1300,
  "h": 600,
  "options": {
    "stroke": "#0f172a",
    "fill": "#1e293b",
    "fillStyle": "solid",
    "roughness": 1.8
  }
}

Step 2: Add the Title and Subtitle

A clear title immediately tells viewers what they're looking at. We'll add a main title and a descriptive subtitle.

{
  "id": "title",
  "type": "text",
  "x": 350,
  "y": 40,
  "w": 600,
  "h": 35,
  "text": "🔄 CI/CD Pipeline Architecture",
  "fontSize": 28,
  "fontWeight": "bold",
  "align": "center",
  "options": {
    "stroke": "#e2e8f0"  // Light color for dark background
  }
}

Step 3: Build the Stage Containers

Now for the main structure. We'll create four colored rectangles to represent each stage of the pipeline. Each stage has:

• A colored background rectangle
• A stage title label
• Internal components (boxes for specific steps)

// Stage background
{
  "id": "stage-dev",
  "type": "rectangle",
  "x": 40,
  "y": 110,
  "w": 220,
  "h": 480,
  "borderRadius": 15,
  "options": {
    "stroke": "blue.500",
    "fill": "#172554",
    "fillStyle": "solid"
  }
}

// Stage label
{
  "id": "stage-dev-label",
  "type": "text",
  "x": 40,
  "y": 125,
  "w": 220,
  "h": 25,
  "text": "💻 DEV",
  "fontSize": 16,
  "fontWeight": "bold",
  "align": "center",
  "options": { "stroke": "blue.400" }
}

Repeat for Other Stages

Following the same pattern, create the remaining three stages. Each stage is positioned to the right of the previous one:

Step 4: Add Internal Components

Within each stage, we add specific components. Let's add the GitHub box and some action items in the DEV stage.

// GitHub component box
{
  "id": "github",
  "type": "rectangle",
  "x": 60,
  "y": 170,
  "w": 180,
  "h": 80,
  "borderRadius": 12,
  "options": {
    "stroke": "#6e7681",
    "fill": "#21262d",
    "fillStyle": "solid"
  }
}

// GitHub icon (emoji)
{
  "id": "github-icon",
  "type": "text",
  "x": 60,
  "y": 185,
  "w": 180,
  "h": 30,
  "text": "🐙",
  "fontSize": 28,
  "align": "center"
}

// GitHub label
{
  "id": "github-label",
  "type": "text",
  "x": 60,
  "y": 220,
  "w": 180,
  "h": 20,
  "text": "GitHub Repo",
  "fontSize": 14,
  "fontWeight": "bold",
  "align": "center",
  "options": { "stroke": "#e6edf3" }
}

Step 5: Connect with Arrows

Arrows show the flow of work through the pipeline. This is where many people get confused, so let's break it down clearly.

// Arrow from DEV to CI stage
{
  "id": "arrow-dev-to-ci",
  "type": "arrow",
  "x": 240,      // Right edge of DEV stage
  "y": 400,      // Vertical center
  "w": 50,       // Distance to CI stage
  "h": 0,        // Same height (horizontal arrow)
  "endArrowhead": "arrow",
  "options": {
    "stroke": "green.400",
    "strokeWidth": 2
  }
}

Arrow Direction Cheat Sheet

Step 6: Add Decision Points

Diamonds are perfect for showing decision points in your flow, like "Does the build pass?"

{
  "id": "trigger",
  "type": "diamond",
  "x": 305,
  "y": 180,
  "w": 80,
  "h": 60,
  "options": {
    "stroke": "green.500",
    "fill": "green.800",
    "fillStyle": "solid"
  }
}

Step 7: Final Touches

Polish your diagram with these finishing touches:

• Add a footer — Credit or watermark at the bottom
• Use consistent spacing — Equal gaps between elements
• Check alignment — Elements should line up visually
• Test the export — Export as SVG to ensure quality

Complete JSON Example

Here's a minimal complete example with the core structure. You can load this directly into Privacy Sketch:

{
  "version": "2.0",
  "elements": [
    // Background
    { "id": "bg", "type": "rectangle", "x": 20, "y": 20, "w": 800, "h": 400,
      "options": { "fill": "#1e293b", "stroke": "#0f172a", "fillStyle": "solid" }
    },
    // Title
    { "id": "title", "type": "text", "x": 200, "y": 40, "w": 400, "h": 30,
      "text": "🔄 My Pipeline", "fontSize": 24, "fontWeight": "bold", "align": "center",
      "options": { "stroke": "#e2e8f0" }
    },
    // Stage 1: DEV
    { "id": "dev", "type": "rectangle", "x": 40, "y": 100, "w": 150, "h": 280, "borderRadius": 12,
      "options": { "stroke": "blue.500", "fill": "#172554", "fillStyle": "solid" }
    },
    { "id": "dev-label", "type": "text", "x": 40, "y": 115, "w": 150, "h": 20,
      "text": "💻 DEV", "fontSize": 14, "fontWeight": "bold", "align": "center",
      "options": { "stroke": "blue.400" }
    },
    // Stage 2: CI
    { "id": "ci", "type": "rectangle", "x": 210, "y": 100, "w": 180, "h": 280, "borderRadius": 12,
      "options": { "stroke": "green.500", "fill": "green.900", "fillStyle": "solid" }
    },
    { "id": "ci-label", "type": "text", "x": 210, "y": 115, "w": 180, "h": 20,
      "text": "✅ CI", "fontSize": 14, "fontWeight": "bold", "align": "center",
      "options": { "stroke": "green.400" }
    },
    // Arrow connecting DEV to CI
    { "id": "arrow-1", "type": "arrow", "x": 190, "y": 240, "w": 20, "h": 0, "endArrowhead": "arrow",
      "options": { "stroke": "green.400", "strokeWidth": 2 }
    }
  ]
}

Next Steps

Now that you've built your first pipeline diagram, here are some ways to level up:

• Getting Started Guide — Learn more fundamentals
• Layout Patterns — Common diagram layouts
• LLM Reference — Technical JSON documentation
• Example Gallery — See more diagram examples