Diagram with vuejs?

Question

I want to draw a diagram like below on the web and after drawing I want it to render the json string. I don't know what the idea is or is there any npm pulgin?

Answer 1

Take a look at this related and more general question about graph visualization frameworks for the web which has many different options for diagramming libraries.

Some of them work well with Vue.js but the majority has not been created specifically for VueJS. However integrating a library with Vuejs should not be a problem, as VueJS can easily be extended with third party UI components. After all it's just JavaScript and the DOM.

Some of more elaborate solutions from the above answer show examples of how to embed a diagram editor and renderer Vuejs into your applications, but the integration is relatively straight forward, as you can see from this GitHub example showing how to integrate a graph visualization component with Vuejs.

^{Disclaimer: I work for the company that creates the library used in the last two links. However I do not represent my employer here on StackOverflow. You can use the same technique shown in the last link with most of the other libraries shown in the first one, too.}