grid-rows: 3
grid-columns: 5
horizontal-gap: 20

*.class: [text; blue]

0,0: {
  label: "npm i -g\n@forge/cli"
  style: {
    fill: "#30304c"
    stroke: transparent
    font-color: white
    font: mono
    font-size: 10
    bold: false
  }
}

0,1: {
  label: "Set up an\nAtlassian site"
  class: [text; gray]
}
0,2.class: empty
0,3: {
  label: "View the hello\nworld app"
  class: [text; gray]
}
0,4: forge\ntunnel
1,0: forge\nlogin
1,1: forge\ncreate
1,2: forge\ndeploy
1,3: forge\ninstall
1,4: {
  shape: diamond
  label: "Hot reload\nchanges?"
  class: [text; gray]
}
2,0: "" {
  grid-rows: 3
  grid-columns: 1
  grid-gap: 0

  class: []

  style: {
    fill: transparent
    stroke: transparent
  }

  *.style: {
    fill: transparent
    stroke: transparent
    font-color: "#30304c"
    font-size: 10
    bold: false
  }
  *.label.near: center-left
  *.height: 20
  a: ⬤ Forge CLI {
    style.font-color: "#0033cc"
  }

  b: ⬤ Required {
    style.font-color: "#30304c"
  }
  c: ⬤ Optional {
    style.font-color: "#cecece"
  }
}
2,1.class: empty
2,2.class: empty
2,3.class: empty
2,4: forge\ndeploy

0,0 -> 1,0 -> 1,1 -> 1,2 -> 1,3 -> 1,4: {
  class: arrow
}
1,1 -> 0,1: {
  class: arrow
  style.stroke: "#cecece"
}
1,3 -> 0,3: {
  class: arrow
  style.stroke: "#cecece"
}
1,4 -> 0,4: Yes {
  class: arrow
  style.font-size: 10
}
1,4 -> 2,4: No {
  class: arrow
  style.font-size: 10
}

classes: {
  text.style: {
    stroke: transparent
    font-color: white
    font: mono
    font-size: 10
    bold: false
  }
  text: {
    width: 100
    height: 60
  }
  blue.style: {
    fill: "#0033cc"
    stroke: "#0033cc"
    border-radius: 10
  }
  gray.style: {
    fill: "#cecece"
    stroke: "#cecece"
    border-radius: 10
  }
  empty: {
    label: ""
    width: 50
    height: 50
    style: {
      fill: transparent
      stroke: transparent
    }
  }
  arrow: {
    target-arrowhead.shape: arrow
    style: {
      stroke: black
      stroke-width: 2
    }
  }
}