algorithmvisualizationgraph-drawing

circuit/block-diagram drawing

I'm looking for either algorithms or visualization tool for (nice) circuit/block-diagram drawing.

I am also interested in a general formulation of the problem.

By "circuit drawing", I mean the capability of exploring place & route for block-diagrams (rectangles) with I/O ports and their connections (wires). These block-diagrams can be hierarchical i.e some blocks may have some nested internal sub-structure etc.

This topic is strongly related to classical graph-drawing, with the supplemental constraint of the need to take ports location into account, and possibly the shape of the blocks (rectangle of various sizes). Graphviz tools do not respond to the problem (at least my previous experiments have not been satisfactory).

Force-directed algorithms retain my attention, but I have just found papers on classical directed graphs.

Any hints ?

[update nov 21 2013] it seems that the best reference to date is Spönemann

Solution

  • To make production quality circuit diagrams as well as block diagrams, I strongly recommend J. D. Aplevich's "circuit macros". It's well documented and actively maintained. See the examples produced by this package circuit macros examples

    There is some learning curve, for example to be able to use the "dpic" graphing language to draw your own diagram. But the tool itself is very powerful.

    For me there are two remaining issues:

    1. no live update
    2. svg output is lacking

    I hacked up some Javascript to 

    (watch m4 file change)->[m4->dpic->latex->pdf]->svg->(show in html)

    Here is the gist of it

    // watch .m4 file

var chokidar = require('chokidar');
var resolve = require('path').resolve;
const touch = require('touch')
const {exec} = require('child_process')

chokidar.watch("*.m4").on('change', fn=>{
   let ff = resolve(fn)
   console.log(ff, "changed")
   exec("runtask.bat " + ff, {cwd:"../"}, (err,stdin,stdout)=>{
    console.log(err,stdin, stdout)
    touch("index.html") //svg updated
    })

})

    Here is the runtask.bat for Windows 

    m4 pgf.m4 %1 | dpic -g > tmp.tex

C:\texlive\2017\bin\win32\pdflatex template.tex

tool\dist-64bits\pdf2svg template.pdf %~dpn1.svg
tool\dist-64bits\pdf2svg template.pdf %~dp1tmp.svg

    That way, you can "draw" by writing m4/dpic code and see the result in the browser live; and svg is generated from pdf which looks a lot nicer.