シーケンス図 (Sequence diagram)

@startuml
actor User
User -> User: アプリケーション起動
activate User
  App -> App: main()
  activate App
    App -> window: alert("Hi.")
    App -> window: prompt("Enter your name.")
    activate window
      App <-- window: name
    deactivate window

    alt name == null
      App -> window: alert("Invalid name.")
      activate window
        note right
          この後returnする
        end note
      deactivate
    else
      loop 10 times
        App->window: alert(`Hi, ${name}.`)
        activate window
        deactivate
      end
    end
  deactivate
deactivate
@enduml

class App {
  run() {
    window.alert("Hi.");
    const name = window.prompt("Enter your name.");
    if (!name) {
      window.alert("Invalid name.");
      return;
    }
    for (let i = 0; i < 10; i++) {
      window.alert(`Hi, ${name}.`);
    }
  }
}

const app = new App();
app.run();