以d3.js或graphviz或类似方式以编程方式绘制框图 [英] Programmatically draw block diagram in d3.js or graphviz or similar

问题描述

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

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 .

我发现最好的工具是 http://blockdiag.com/，但是边缘标签不是很不错:我需要标签不要放在盒子里，而且要在边缘的侧面.

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.

要了解这个问题，我正在(从blockdiag)获得: http://interactive.blockdiag.com/?compression=deflate&src=eJyr5lJQcFTQtVNwAhHO1kAuGIC5LgrROYlJqTm2SklKsXApF4hymFQiSKoWABD8D8U

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

相关qns: 电路/框图的绘制

related qns: circuit/block-diagram drawing

推荐答案

您可以使用以下在线工具以LaTeX样式的MathJax标签以编程方式绘制SVG框图: http://en.wikipedia.org/wiki/State_observer ).它的来源是CoffeeScript.您可以根据需要编辑图源，也可以先使用新的画布，然后将图导出为SVG(独立文件或指向保存在服务器上的图的链接).

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).

这篇关于以d3.js或graphviz或类似方式以编程方式绘制框图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！