Integrate ZenUML with Vanilla JavaScript

Below is an HTML page that uses ZenUML’s offical rendering library “vue-sequence” to render a sequence diagram. What it does is:

Include vue (for DOM manipulation), vuex(for state management), vue-sequenc(for rendering). Line 6, 7, 8.
Include styles from vue-sequence for layout. This is required during rendering. Line 9.
Define a mounting point. Line 12.
Configure Vue with Vuex. Line 14.
Get the VueSequence object defined in vue-sequence library. Line 15.
Get the Store object from VueSequence and use it to build a vuex Store. Line 16.
Set up initial text. Line 17 ~ 23.
Create a new Vue instance and mount it to #app. Line 24 ~ 28.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Integration ZenUML Library with Vanilla JavaScript</title>
  <script src="https://unpkg.com/vue@2.6.14"></script>
  <script src="https://unpkg.com/vuex@3.6.2"></script>
  <script src="https://unpkg.com/vue-sequence"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-sequence/dist/vue-sequence.css">
</head>
<body>
<div id="app" />
<script>
  Vue.use(Vuex);
  const VueSequence = window['vue-sequence'].VueSequence;
  const store = new Vuex.Store(VueSequence.Store());
  store.dispatch('updateCode',{ code: `
  @EC2 BookService
  @DynamoDB BookRepository
  BookService.saveBook(1) {
    BookRepository.storeBook()
  }
  `});
  new Vue({
    el: '#app',
    store,
    render: h => h(VueSequence.DiagramFrame)
  });
</script>
</body>
</html>