Viz.js + Vue.js Graphviz editor

Basic Graphviz editor prototype - I'll create a github page based on this code.

by gbkim1988

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<div id="app">
  <h2>
  Examples
  </h2>
  <button class="btn btn-default" @click="show(index)" v-for="(example, index) in examples">
    {{example.caption}}
  </button>
  <local-graph-storage :graphs="storedGraphs" @show="showStored" @remove="removeGraph"></local-graph-storage>
  <hr/>
  <h2>
  Definition
  </h2>
  <button @click="dotData=''" class="btn btn-small btn-default">Clear</button>
  <button @click="save()" class="btn btn-small btn-default">Save in browser</button>
  <textarea v-model="dotData"></textarea>
  <h2>
  Render
  </h2>
  <graph-viz :dot-data="dotData"></graph-viz>
  
  <footer>Examples from <a href="http://www.graphviz.org/Gallery.php" target="_blank">http://www.graphviz.org/Gallery.php</a></footer>
</div>

CSS

textarea {
  width: 100%;
  height: 150px;
  padding-bottom: 10px;
  font-family: "Lucida Console", Monaco, monospace
}

footer {
  font-size: 0.9em;
  text-align: right;
}

JavaScript

options = {
  namespace: 'GraphVizApp_VueJS__'
};

Vue.use(VueLocalStorage, options);

const graphViz = {
	template: `<div></div>`,
  props: ['dotData'],
  watch: {
  	dotData() {
    	this.render(this.dotData);
    }
  },
	mounted() {
  	// initial render (if data not undefined)
    if (this.dotData) {
    	this.render(this.dotData);
    } 
  },
  methods: {
  	render(data) {
    	$(this.$el).html(Viz(data));
    }
  }
};

const localGraphStorage = {
	props: ['graphs'],
  methods: {
  	formatData(date) {
    	return moment(date).format('YYYY-MM-DD HH:m:s');
    }
  },
  template: `
  <div v-if="graphs.length > 0" class="container">
  	<h4>Stored graphs (in Browser):</h4>
  	<div class="media" v-for="graph in graphs">
    	<div class="media-body">
        <h4 class="media-heading">{{graph.name}}</h4>
      	<button class="btn btn-xs" @click="$emit('show', graph.data)">show</button> 
        <button class="btn btn-xs btn-danger" @click="$emit('remove', graph)">delete</button>
        <div class="media-footer">created at {{formatData(graph.createdAt)}}</div>
      </div>
   </div>
   </div>
  `  

}

const examples = [
	{
  	id: 0,
    caption: 'Simple',
    data: 
`digraph G {
  ## Comment with double hash char
  Hello->World
}`
  },
	{
  	id: 1,
    caption: 'State machine',
  	data: 
`digraph finite_state_machine {
  rankdir=LR;
  size="8,5"
  node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
  node [shape = circle];
  LR_0 -> LR_2 [ label = "SS(B)" ];
  LR_0 -> LR_1 [ label = "SS(S)" ];
  LR_1 -> LR_3 [ label = "S($end)" ];
  LR_2 -> LR_6 [ label = "SS(b)" ];
  LR_2 -> LR_5 [ label = "SS(a)" ];
  LR_2 -> LR_4 [ label = "S(A)" ];
  LR_5 -> LR_7 [ label = "S(b)" ];
  LR_5 -> LR_5 [ label = "S(a)" ];
  LR_6 -> LR_6 [ label = "S(b)" ];
  LR_6 -> LR_5 [ label = "S(a)" ];
  LR_7 -> LR_8 [ label = "S(b)" ];
  LR_7 -> LR_5 [ label = "S(a)" ];
  LR_8 -> LR_6 [ label = "S(b)" ];
  LR_8 -> LR_5 [ label = "S(a)" ];
}`
  },
  {
  	id: 2,
    caption: 'Crazy',
    url:...