You can visualize any graph with pure javascript！This tutorial is not specific to visualize circuit, it can be applied to any graph you want.

What is AAG-Visualizer? It is an elegant visualizer which can convert complex circuit format like AIGER (hard to understand for human) into simple and pretty .svg with just one click.

Inspiration by Final project “Fraig” of Data Structure and Programming (held by Professor Ric Huang) In the National Taiwan University Electrical Engineering Department.

A brief introduction of Fraig and AAG

What does FRAIG do?

It Functionally Reduces And-Inverter Graph, making circuit as small as possible.

Still don’t know what it is? See the pic below and you will understand.

FRAIG

What is AAG?

It looks like this:

aag 8 2 0 2 2

2

4

9

10

8 3 16

10 5 2

c

generated by Byron Hsu

For details, please check out Brief Guide of Aiger Format.

You don’t need to understand it thoroughly. What you need to know is that it is just a format of And-Inverter Graph.

Ok, so let’s get into the topic. How did I convert .aag to .svg on the browser?

Application Structure

.

├── .gitignore

├── README.md

├── package.json

├── public

│ ├── bundle.js

│ ├── index.html

│ └── assets/

├── server

│ ├── config.js

│ └── server.js

├── src

│ ├── assets

│ ├── js

│ │ └── animate.js

│ │ └── parser.js

│ ├── scss

│ │ └── index.scss

│ ├── index.js

│ └── template.html

├── webpack.dev.config.js

└── webpack.prod.config.js

Brief Introduction of Viz.js

This project is a Makefile for building Graphviz with Emscripten and a simple wrapper for using it in the browser — A super fast and convenient way to draw graphs on the browser. If you want to know more about Viz.js, please check official docs.

Install

npm install viz.js

Basic Usage in javascript

// format ofi .dot

let digraph = 'digraph { a -> b; }'; // for svg

let svgXml = Viz(digraph, { format: "svg"});

document.body.innerHtml = svgXml; // for img-element

let img-element = Viz(digraph, { format: "png-image-element"});

document.body.append(img-element);

Customization

What’s more? You can customize the node color, the vertex width…etc on the graph. Just roll up your sleeves and change the style at your will. See the docs here.

It is just that easy.

Now we only need to parse our input into .dot file. And we can see our string magically turns into pretty .svg circuit!

Parser

parser.js

Use the mightiness of regexp in javascript, and you can parse anything with ease. Check out this fantastic tutorial: JavaScript: Learn Regular Expressions for Beginners.

In view of different input format should have their own parser; therefore, I skip the part of discussing how to parse them. However, I believe that if you can use regexp well, it is not really a big deal.

Parsing

//parser.js function parser(args...){

}

export default parser;

Combine

import parser from './js/parser.js' // format of .dot

let digraph = parser(data); //for svg

let svgXml = Viz(digraph, { format: "svg"});

document.body.innerHtml = svgXml; //for img-element

let img-element = Viz(digraph, { format: format: "png-image-element"});

document.body.append(img-element);

svg circuit

Enjoy the fantastic fancy graph you make!

Brief Introduction of animate.css

A super easy library to make fantastic animation on dom object. If you want to know more about animate.css , please check official docs.

Install

<head>

<!-- animate.css -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<!-- jquery -->

<script

src="https://code.jquery.com/jquery-3.1.1.min.js"

integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="

crossorigin="anonymous"></script>

</head>

Basic Usage

// animate.js

$.fn.extend({

animateCss: function (animationName, callback) {

let animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

this.addClass('animated ' + animationName).one(animationEnd, function() {

$(this).removeClass('animated ' + animationName);

if (callback) {

callback();

}

});

return this;

}

}); // index.js

// load animate.js in advance for repeated animation

import './js/animate.js'

document.getElementById('container').animateCss('shake');

Implementation

My goal is to add “shake” animation on visualize button when the format is wrong. And add “squeeze” animation on it when it is visualized successfully.

How to do that? It is unbelievably easy. You don’t need to write a lot of keyframes and some annoying thing. Just call animateCss and the magic will happen.

Visualize Button

// index.js

function handleFileSelected(event) {

...

if(input.files.length === 0) { // no file in <input>

$('#btn').animateCss('shake');

return;

}else

if(!/.aag/g.test(input.files[0].name)){ // format is wrong

$('#btn').animateCss('shake');

return;

}

...

// Right format and ready to visualize

$('#btn').animateCss('rubberBand');

}

document.getElementById('btn').addEventListener('click', handleFileSelected);

animation demo

Write 10 lines of code yet impress all the user who step into your website. Why not ?

❤ If this post was helpful, please hit the little heart!

And don’t forget to give a star to my repo 🎉 ✨: AAG-Visualizer.

Any PR and Issue is welcome!

You can clone from Github, and upload any .aag file in the example folders and wait for the magic moments.

Hope you enjoy!

My GitHub Link: https://github.com/ByronHsu/