chartletv0.23.0

← All examples

From commit to release: the quality gate

The release flow with one decision emphasized and the way through the quality gate drawn in the accent: the outline and the line are heavier than anything else, so the cue does not rest on color, and the rest stays neutral. A legend strip below the drawing names the node kinds, the line patterns and the emphasis. The description names what is emphasized.

From commit to release: the quality gate

examples/release-focus.json
{
  "schemaVersion": 1,
  "type": "flow",
  "title": "From commit to release: the quality gate",
  "source": "Team handbook, release process",
  "width": 1120,
  "height": 1064,
  "flow": {
    "lanes": [
      {
        "id": "dev",
        "label": "Development"
      },
      {
        "id": "ci",
        "label": "Continuous integration"
      },
      {
        "id": "ops",
        "label": "Operations"
      }
    ],
    "nodes": [
      {
        "id": "commit",
        "label": "Commit pushed",
        "kind": "start",
        "lane": "dev"
      },
      {
        "id": "review",
        "label": "Code review",
        "lane": "dev"
      },
      {
        "id": "build",
        "label": "Build",
        "sublabel": "locked inputs",
        "lane": "ci"
      },
      {
        "id": "tests",
        "label": "Run tests",
        "lane": "ci"
      },
      {
        "id": "green",
        "label": "All green?",
        "kind": "decision",
        "lane": "ci"
      },
      {
        "id": "fix",
        "label": "Fix failures",
        "lane": "dev"
      },
      {
        "id": "staging",
        "label": "Deploy to staging",
        "lane": "ops"
      },
      {
        "id": "approve",
        "label": "Approved?",
        "kind": "decision",
        "lane": "ops"
      },
      {
        "id": "prod",
        "label": "Deploy to production",
        "lane": "ops"
      },
      {
        "id": "done",
        "label": "Released",
        "kind": "end",
        "lane": "ops"
      }
    ],
    "edges": [
      {
        "from": "commit",
        "to": "review"
      },
      {
        "from": "review",
        "to": "build",
        "label": "merged"
      },
      {
        "from": "build",
        "to": "tests"
      },
      {
        "from": "tests",
        "to": "green"
      },
      {
        "from": "green",
        "to": "staging",
        "label": "yes"
      },
      {
        "from": "green",
        "to": "fix",
        "label": "no"
      },
      {
        "from": "fix",
        "to": "build",
        "label": "retry"
      },
      {
        "from": "staging",
        "to": "approve"
      },
      {
        "from": "approve",
        "to": "prod",
        "label": "yes"
      },
      {
        "from": "approve",
        "to": "review",
        "label": "changes requested",
        "dash": "dashed"
      },
      {
        "from": "prod",
        "to": "done"
      }
    ],
    "groups": [
      {
        "label": "Quality gates",
        "nodes": [
          "build",
          "tests",
          "green"
        ]
      }
    ],
    "mainPath": [
      "commit",
      "review",
      "build",
      "tests",
      "green",
      "staging",
      "approve",
      "prod",
      "done"
    ]
  },
  "emphasis": {
    "nodes": [
      "green"
    ],
    "path": [
      "build",
      "tests",
      "green",
      "staging"
    ]
  },
  "legend": "auto",
  "mobile": {
    "width": 584,
    "height": 1500
  }
}
Focus
From commit to release: the quality gate
From commit to release: the quality gateFlow chart with 10 steps and 11 connections in 3 lanes: Development, Continuous integration and Operations. Main path: Commit pushed → Code review → Build → Run tests → All green? → Deploy to staging → Approved? → Deploy to production → Released. Loop: Code review → Build → Run tests → All green? → Deploy to staging → Approved? → Code review. Bottleneck: Approved?; without it the diagram falls apart. Commit pushed (start) in Development: leads to Code review. Code review in Development: leads to Build (merged). Build in Continuous integration: leads to Run tests. Run tests in Continuous integration: leads to All green?. All green? (decision) in Continuous integration: leads to Deploy to staging (yes) and Fix failures (no). Fix failures in Development: leads to Build (retry). Deploy to staging in Operations: leads to Approved?. Approved? (decision) in Operations: leads to Deploy to production (yes) and Code review (changes requested). Deploy to production in Operations: leads to Released. Released (end) in Operations: no further step. Group "Quality gates": Build, Run tests, All green?. Emphasized: All green?. Emphasized path: Build → Run tests → All green? → Deploy to staging. Legend: start, end, step, decision, emphasized, solid line, dashed line, emphasized path.DevelopmentContinuous integrationOperationsQuality gatesCommit pushed → Code reviewCode review → Build: mergedBuild → Run testsRun tests → All green?All green? → Deploy to staging: yesAll green? → Fix failures: noFix failures → Build: retryDeploy to staging → Approved?Approved? → Deploy to production: yesApproved? → Code review: changes requestedDeploy to production → Releasedmergedyesnoretryyeschanges requestedCommit pushedCommit pushedCode reviewCode reviewBuild – locked inputsBuildlocked inputsRun testsRun testsAll green?All green?Fix failuresFix failuresDeploy to stagingDeploy to stagingApproved?Approved?Deploy to productionDeploy to productionReleasedReleasedStartEndStepDecisionEmphasizedSolid lineDashed lineEmphasized path
From commit to release: the quality gateFlow chart with 10 steps and 11 connections in 3 lanes: Development, Continuous integration and Operations. Main path: Commit pushed → Code review → Build → Run tests → All green? → Deploy to staging → Approved? → Deploy to production → Released. Loop: Code review → Build → Run tests → All green? → Deploy to staging → Approved? → Code review. Bottleneck: Approved?; without it the diagram falls apart. Commit pushed (start) in Development: leads to Code review. Code review in Development: leads to Build (merged). Build in Continuous integration: leads to Run tests. Run tests in Continuous integration: leads to All green?. All green? (decision) in Continuous integration: leads to Deploy to staging (yes) and Fix failures (no). Fix failures in Development: leads to Build (retry). Deploy to staging in Operations: leads to Approved?. Approved? (decision) in Operations: leads to Deploy to production (yes) and Code review (changes requested). Deploy to production in Operations: leads to Released. Released (end) in Operations: no further step. Group "Quality gates": Build, Run tests, All green?. Emphasized: All green?. Emphasized path: Build → Run tests → All green? → Deploy to staging. Legend: start, end, step, decision, emphasized, solid line, dashed line, emphasized path.DevelopmentContinuous integrationOperationsQuality gatesCommit pushed → Code reviewCode review → Build: mergedBuild → Run testsRun tests → All green?All green? → Deploy to staging: yesAll green? → Fix failures: noFix failures → Build: retryDeploy to staging → Approved?Approved? → Deploy to production: yesApproved? → Code review: changes requestedDeploy to production → Releasedmergedyesnoretryyeschanges requestedCommit pushedCommit pushedCode reviewCode reviewBuild – locked inputsBuildlocked inputsRun testsRun testsAll green?All green?Fix failuresFix failuresDeploy to stagingDeploy to stagingApproved?Approved?Deploy to productionDeploy to productionReleasedReleasedStartEndStepDecisionEmphasizedSolid lineDashed lineEmphasized path

Source: Team handbook, release process

Show chart data
Data for From commit to release: the quality gate
StepKindLaneGroupLeads toEmphasis
Commit pushedstartDevelopmentCode review
Code reviewstepDevelopmentBuild (merged)
BuildstepContinuous integrationQuality gatesRun testson emphasized path
Run testsstepContinuous integrationQuality gatesAll green?on emphasized path
All green?decisionContinuous integrationQuality gatesDeploy to staging (yes), Fix failures (no)emphasized, on emphasized path
Fix failuresstepDevelopmentBuild (retry)
Deploy to stagingstepOperationsApproved?on emphasized path
Approved?decisionOperationsDeploy to production (yes), Code review (changes requested)
Deploy to productionstepOperationsReleased
ReleasedendOperations
  • Flow chart with emphasis and a legend
  • Point at the step that matters