How to create digraph with javascript in blogger post

Back>

This example demonstrate stylish golden text glowing with mouse over in blogger post.

Here is the example:

Example

<div class="stage">
<div id="app-6">
    <nav class="navbar navbar-dark bg-secondary">
    <span class="navbar-brand mb-0 h1">Digraph</span>
  </nav>
  <div class="row">
    <div class="col-4 bg-light input">
        <div class="form-group">
          <br>
          <label for="exampleFormControlTextarea1">change connections</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="7" v-model="dots"></textarea>
        </div>
     
    </div>
    <div class="col-8">
      <center><div class="image" v-html="image"></div></center>
    </div>
  </div>
</div>
</div>

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">

<style>
.stage {
  height: 500px;
  width: 800px;
}

</style>

<script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js"></script>


<script>
var app6 = new Vue({
  el: '#app-6',
  data: {
    dots: 'digraph "x"{\n  1->2\n  5->2;\n  1->3;\n  3->4;\n  4->1\n}'
  },
  computed: {
    image: function(){
      var image = Viz(this.dots, {format: 'svg'});
      return image;
    }
  }
})
</script>