Как показать это лучше всего, чтобы объяснить общую концепцию?

Question

У меня есть куча проектов с похожей архитектурой ...

A----1      Y
 \  / \     /
  \/   \   /
 /  \   \ /
B---2----X----Z, etc, etc
\  /    /
  \    /
 /  \ /
C----3

(извините за плохое искусство ascii)

• может быть несколько A, B, C (обычно одно, но может быть больше) в каждом проекте (устройства измерения / контроля)
• каждый из которых будет использовать один из 1, 2, 3 (технологии связи)
• для связи с X (сервером базы данных)
• , который обслуживает Y, Z и т. Д. (Приложения на основе браузера)

Я не очень хорош в графическом отображении вещей, поэтому мне интересно, может ли кто-нибудь предложить:

1. что-то статичное - общий способ отобразить это в документации (я пытался использовать красивые символы, чтобы отразить действительные компоненты системы, но визуально грязно)
2. что-то динамическое - какой-то способ показать это на веб-сайте (возможно, иметь только один элемент для каждого из столбцов A, B, C и 1, 2, 3 и слияния изображений друг с другом).

Должен ли я сделать это автоматически или в результате ввода пользователя?

Answer 1

Как на счет этого для статики (извините за плохой ascii art;)

--------------       -------------            --- Client 1
| Components |       | Comms     |           /
|            |-------| Channel   | --- Server --- Client 2
| A, B, C    |       | 1, 2 or 3 |           \
--------------       -------------            --- Client X

Обновление : «Динамический для веб-сайта» немного универсален.Зависит от того, что вы подразумеваете под этим.Вы можете генерировать SVG-графику или какой-нибудь необычный HTML5 + JavaScript - может быть, инструменты, упомянутые в других ответах, поддерживают такой вывод?

Answer 2

Graphviz обычно мой первый выбор. Галерея содержит множество примеров, а язык Dot прост и понятен.

Мысль о компоновке: возможно, канал связи должен быть выражен как интерфейс на сервере базы данных, а не как отдельный узел. Как предлагает ChrisWue, трех (или четырех) многоуровневый граф с компонентом -> сервер базы данных -> клиенты. Пример switch Graphviz кажется довольно близким.

Answer 3

Если вы хотите визуализировать данные каким-либо образом: http://vis.stanford.edu/protovis/