CI/CD pipeline

A flow diagram. A push through lint and unit tests to an image in the registry and a staging deploy.

                    ┌─ CI ───────────────────────────────────┐
                    │                                        │
                    │  ┌────────────┐                        │
                 ┌──┼─►│    Lint    │───┐                    │                    ┌─ CD ─────────────────────────────────────────────────────────────────────────────────────────────┐
  ╭──────────╮   │  │  └────────────┘   │  ┌──────────────┐  │                    │                                                            yes              on failure           │
  │ git push │───┘  │                   └─►│ Build Image  │  │    ╒══════════╕    │  ┌────────────────┐    ┌────────────┐    ┌────────────────┐    ┌──────────────┐    ┌──────────┐  │
  │          │───┐  │                   ┌─►│              │──┼───►│ Registry │────┼─►│ Deploy Staging │───►│ E2E Tests  │───►│ ◇ Approved? ◇  │───►│ Deploy Prod  │╌╌╌►│ Rollback │  │
  ╰──────────╯   │  │  ┌────────────┐   │  └──────────────┘ push  └──────────┘ pull  └────────────────┘    └────────────┘    └────────────────┘    └──────────────┘    └──────────┘  │
                 └──┼─►│ Unit Tests │───┘                    │                    └──────────────────────────────────────────────────────────────────────────────────────────────────┘
                    │  └────────────┘                        │
                    └────────────────────────────────────────┘

Spec

JSON

{
  "type": "flow",
  "direction": "RIGHT",
  "nodes": [
    {"id": "push", "label": "git push", "shape": "circle"},
    {"id": "lint", "label": "Lint"},
    {"id": "test", "label": "Unit Tests"},
    {"id": "build", "label": "Build Image"},
    {"id": "registry", "label": "Registry", "shape": "cylinder"},
    {"id": "staging", "label": "Deploy Staging", "color": "blue"},
    {"id": "e2e", "label": "E2E Tests"},
    {"id": "gate", "label": "Approved?", "shape": "diamond", "color": "yellow"},
    {"id": "prod", "label": "Deploy Prod", "color": "green"},
    {"id": "rollback", "label": "Rollback", "color": "red"}
  ],
  "edges": [
    {"id": "e-push-lint", "from": "push", "to": "lint"},
    {"id": "e-push-test", "from": "push", "to": "test"},
    {"id": "e-lint-build", "from": "lint", "to": "build"},
    {"id": "e-test-build", "from": "test", "to": "build"},
    {"id": "e-build-registry", "from": "build", "to": "registry", "label": "push"},
    {"id": "e-registry-staging", "from": "registry", "to": "staging", "label": "pull"},
    {"id": "e-staging-e2e", "from": "staging", "to": "e2e"},
    {"id": "e-e2e-gate", "from": "e2e", "to": "gate"},
    {"id": "e-gate-prod", "from": "gate", "to": "prod", "label": "yes"},
    {
      "id": "e-prod-rollback",
      "from": "prod",
      "to": "rollback",
      "label": "on failure",
      "style": "dashed",
      "color": "red"
    }
  ],
  "groups": [
    {"id": "ci", "label": "CI", "contains": ["lint", "test", "build"]},
    {"id": "cd", "label": "CD", "contains": ["staging", "e2e", "gate", "prod", "rollback"]}
  ]
}

Draw it yourself

diago render cicd-pipeline.json > cicd-pipeline.svg

Open it in the playground to edit it in your browser.