4

I would like to programmatically draw block diagrams of the type used in control theory and systems analysis. See for example http://en.wikibooks.org/wiki/Control_Systems/Block_Diagrams .

The best tool I have found is http://blockdiag.com/ however the edge labelling is not very nice: I require labels not in boxes and to the side of the edges.

To get an idea of the problem, I am getting (from blockdiag): http://interactive.blockdiag.com/?compression=deflate&src=eJyr5lJQcFTQtVNwAhHO1kAuGIC5LgrROYlJqTm2SklKsXApF4hymFQiSKoWABD8D8U

related qns: circuit/block-diagram drawing

Community
  • 1
  • 1
ati
  • 307
  • 3
  • 10

3 Answers3

2

You can programmatically draw SVG block diagrams with LaTeX-style MathJax labels by using this online tool: http://puzlet.com/m/b00b1. The initial block diagram example here is a control system (http://en.wikipedia.org/wiki/State_observer). Its source is CoffeeScript. You edit the diagram source to suit your needs or start with a fresh canvas, and then export your diagram as SVG (standalone file or link to the diagram saved on server).

martinc
  • 84
  • 3
2

Soooooo late to the party, but now you don't have to chose between d3.js and graphviz. You can have both with d3-graphviz:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js"></script>
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.1.2/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

  var dot = `
digraph G {
    graph [rankdir=LR]
    node [shape="polygon"]
        A -> B -> C;
        B -> D [label="b"];
        D -> B [label="a"];
}
`;

  d3.select("#graph").graphviz()
    .renderDot(dot);

</script>
magjac
  • 857
  • 1
  • 8
  • 12
0

Well both d3.js and graphviz should be able to produce the kind of result you're looking for. If your question is which one to pick, it's easier to generate png or pdf files from gaphviz, but easier to create interactive visualizations with d3.js.

Nicolas78
  • 5,124
  • 1
  • 23
  • 41