DEV Community

Remi Kristelijn
Remi Kristelijn

Posted on

JavaScript developer's visualization and design

A few weeks ago I made a small contribution to a github repo. This is actually something I do often when I want to try out stuff from another developer; I clone the repo, usually there's some outdated dependencies or error in the installation instruction, how hard is it to fork it and make a PR? Usually this is highly appreciated.

In this case it was a project that I use very often, which is a plugin in Visual Studio Code called yUML. I use this to visualize my code, or idea before I key it in. It is very simple;

  1. you create a new *.yuml file, and type one of the following words: [class|activity|usecase|state|deployment|package|sequence] and an example is pre-generated for you, visualizing the diagram desired so you can start tinkering around to your desire. When done, you add // {generate:true} to the top and you can import your design in your .md file using `.

I found that the examples were a bit hard to find. So I contributed to the wiki, so whenever you press 'wiki' in the preview, you see my contribution.

Next to that I found two other projects that are similar:

  1. Chart.js Markdown Preview however this doesn't work on github
  2. Mermaid Editor that you can manually generate svg files from, which is not as strict as yUML

I'd love to hear about your (free) visualization techniques that work cross-os without having to install complex programs!

Top comments (0)