Программно рисуем блок-диаграмму в d3.js или graphviz или аналогичном

Я хотел бы программно рисовать блок-схемы типа, используемого в теории управления и системном анализе. См. Например http://en.wikibooks.org/wiki/Control_Systems/Block_Diagrams.

Лучший инструмент, который я нашел, http://blockdiag.com/, однако маркировка границ не очень приятная: мне нужны ярлыки не в ящиках и сторона ребер.

Чтобы получить представление о проблеме, я получаю (от blockdiag):  http://interactive.blockdiag.com/?compression=deflate&src=eJyr5lJQcFTQtVNwAhHO1kAuGIC5LgrROYlJqTm2SklKsXApF4hymFQiSKoWABD8D8U

связанных qns:   чертеж схемы/блок-схемы

3 ответа

Вы можете программно рисовать структурные диаграммы SVG с помощью меток MathJax в стиле LaTeX, используя этот онлайн-инструмент: http://puzlet.com/m/b00b1. Примером исходной блок-схемы является система управления (http://en.wikipedia.org/wiki/State_observer). Его источником является CoffeeScript. Вы редактируете источник диаграммы в соответствии с вашими потребностями или начинаете с нового холста, а затем экспортируете свою диаграмму в виде SVG (автономный файл или ссылку на диаграмму, сохраненную на сервере).


Soooooo опоздал на вечеринку, но теперь вам не нужно выбирать между d3.js и graphviz. У вас могут быть оба с d3-graphviz:


Ну, как d3.js, так и graphviz должны иметь возможность производить нужный результат. Если у вас вопрос, какой из них выбрать, проще генерировать png или pdf файлы из gaphviz, но проще создавать интерактивные визуализации с помощью d3.js.

licensed under cc by-sa 3.0 with attribution.