Question

我想以编程方式绘制控制理论和系统分析中使用的类型的框图。请参阅示例http://en.wikibooks.org/wiki/Control_Systems/Block_Diagrams。

我找到的最好的工具是http://blockdiag.com/但边缘标签不是很好：我要求标签不在方框和边缘。

为了了解问题，我得到了（来自blockdiag）： http://interactive.blockdiag.com/?compression=deflate&src=eJyr5lJQcFTQtVNwAhHO1kAuGIC5LgrROYlJqTm2SklKsXApF4hymFQiSKoWABD8D8U

相关qns： circuit/block-diagram drawing

Answer 1

您可以使用此在线工具http://puzlet.com/m/b00b1以编程方式使用LaTeX样式的MathJax标签绘制SVG程序框图。这里的初始框图示例是控制系统（http://en.wikipedia.org/wiki/State_observer）。它的来源是CoffeeScript。您可以编辑图表源以满足您的需要，或者从新画布开始，然后将图表导出为SVG（独立文件或链接到保存在服务器上的图表）。

Answer 2

Soooooo迟到了，但现在你不必在d3.js和graphviz之间做出选择。您可以同时使用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>

Answer 3

d3.js和graphviz都应该能够产生你正在寻找的那种结果。如果您的问题是选择哪一个，那么从gaphviz生成png或pdf文件会更容易，但使用d3.js更容易创建交互式可视化。

以编程方式绘制d3.js或graphviz或类似的框图

3 个答案: