Designing a CI Pipeline with Diagrams and YAML

Real-world delivery pipelines benefit from a quick sketch before writing YAML. Here’s a minimal example.

Pipeline overview (Mermaid)

flowchart LR
  C[Commit] --> L[Lint & Typecheck]
  L --> T[Unit Tests]
  T --> B[Build]
  B --> P{Branch?}
  P -- main --> D[Deploy to Staging]
  P -- feature/* --> PR[Open PR Checks]
  D --> M[Manual Approval]
  M --> R[Release to Prod]

GitHub Actions workflow (YAML)

name: ci
on:
  push:
    branches: [ main, feature/** ]
  pull_request:

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint && npm run typecheck

  test:
    needs: quality
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm test -- --ci

  build:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build

Tip: Keep YAML DRY

# Use composite actions or reusable workflows to share common steps
jobs:
  build:
    uses: org/reusable-workflows/.github/workflows/node-build.yml@v1
    with:
      node-version: 20

Between Shiki highlighting for code and Mermaid for diagrams, posts like this can be both readable and instructive.