Przykłady dobrze zaprojektowanych diagramów architektury oprogramowania

Spędzam sporo czasu rysując diagramy architektury oprogramowania, które zwykle składają się z odmian pudełek połączonych strzałkami. Chociaż te diagramy zawierają odpowiednie informacje, często pozostawiają wiele do życzenia z punktu widzenia estetyki.

Niektóre przykłady diagramów architektury oprogramowania, które to pokazują:

• http://applicationarchitecture.files.wordpress.com/2011/06/f0039-component-diagram-complete-component-model.png
• http://applicationarchitecture.files.wordpress.com/2010/03/f0022-sample-network-diagram.png

Przeszukałem setki infografik, aby znaleźć inspirację, ale większość z nich składa się z dyskretnych elementów wizualnych związanych wyłącznie z ogólną koncepcją i zasadami gestalt. Nieliczne, które zawierają strzałki przedstawiające pewien rodzaj przepływu, wydają się być znacznie prostsze niż moje potrzeby.

Jedyny przykład (niezwiązany z oprogramowaniem), który znalazłem ( http://visual.ly/house-democrats-health-plan-flow-chart ) cierpi (być może celowo, aby wykazać złożoność) z powodu wielu takich samych problemów jak powyżej ...

Czy są jakieś przykłady estetycznych schematów architektury oprogramowania lub przynajmniej infografiki, które pokazują złożone procesy, które byłyby przydatne?

Nie mogę wymyślić żadnych szczególnie dobrych diagramów architektury oprogramowania, które nie miałyby danych, które pokazują, że są znacznie uproszczone i skrócone, ale możemy znaleźć kilka istotnych rzeczy, najpierw dzieląc, czym jest schemat architektury oprogramowania.

Następnie przyjrzymy się niektórym przykładom projektów, które dotyczą podobnych wyzwań.

Jest to rodzaj schematu blokowego / diagramu procesu z naciskiem na kategorie elementu / węzła. To z kolei jest rodzajem schematu sieci węzła-łącza, z dodatkową kierunkowością: w zasadzie węzłów, które mogą mieć kategorie, i połączeń, które mogą mieć kierunek.

Wszystko, co opiera się na łączach węzłów, może zmienić się w niechlujny „włos”, gdy wzrasta złożoność tego, co próbuje reprezentować. Jeśli nic nie sugeruje poniżej oparte na linkach do węzłów - jeśli sprawa jest po prostu zbyt skomplikowana - oto artykuł szanowanego naukowca zajmującego się wizualizacją danych na temat niektórych alternatyw dla koncepcji „węzła-łącza” jako podstawy map sieciowych, które badacze wizualizacji danych wymyśliłem. Jeśli możesz dowiedzieć się, jak dostosować niektóre z nich do przyjaznych dla użytkownika i kierunkowych, możesz być zwycięzcą. Ale to naprawdę trudna droga, spróbuj tego, jeśli musisz.

Tak więc złożone diagramy przepływu i diagramy sieciowe z naciskiem na kierunek / przepływ i kategorie węzłów / elementów. Pierwsze podstawowe zasady:

• Utrzymuj każdy węzeł / element prosty
• Spraw, aby różnice między typami elementów były jasne i proste dzięki jasnej hierarchii między nimi
• Spraw, aby przepływ i łączność były jak największym elementem tła

Pomyśl o stosunku sygnału do szumu (czasem nazywanym stosunkiem atramentu do danych w kontekście grafiki informacyjnej): połączenia są wizualnymi przewodnikami, a nie danymi, więc uczyń je tak subtelnymi, jak to możliwe, bez zmniejszania ich czytelności. Pomyśl także o płaszczyźnie liczbowej: na pierwszym planie powinny znajdować się dane, a wizualne wskazówki pokazujące przepływ i kategorię powinny być tłem, o którym ludzie są świadomi, ale nie rozpraszają ich.

Pierwszy przykład, schemat blokowy decyzji typografii (jestem pewien, że niektórzy ludzie nie zgodzą się z treścią ...). Używając tylko czerni i bieli, sprawia, że ​​skomplikowany schemat jest użyteczny z jasną hierarchią między elementami:

Jest bardzo jasne, czym jest każdy element, dzięki wyraźnemu, ale subtelnemu podświetleniu i wariacji, która dodaje minimalny hałas. Całość jest złożona, ale każda część jest jasna.

Możliwe ulepszenia - nie ma ogólnego kierunku, a biegnie od środka - linie mogą zawierać informacje kierunkowe bez dodawania szumu, ponieważ są bardzo małymi subtelnymi kropkowanymi szewronami (jak >>>>>) zamiast kropek, dzięki czemu możesz zacząć gdziekolwiek i zobacz, gdzie pójść dalej bez rozpraszających wskazówek kierunkowych.

Oto kolejny podobny przykład, w którym przepływ przechodzi przez hierarchię (najbardziej ogólna> najbardziej konkretna). Zamienia wiele kategorii w dwa typy węzłów: produkty i typy, a rozmiar węzła mówi o specyfice typu. (kontury koła i linie łączące mogą być znacznie bardziej subtelne, ale wydaje się, że zostały wyważone, aby uzupełnić typ i nadać wszystkim oprócz środkowego kufla bardziej jednolitą teksturę). Rozmiar koła podwaja się również jako wskaźnik położenia i przepływu - przechodzisz z większych na mniejsze koła, więc nie potrzebują żadnych innych wizualnych wskazówek, takich jak groty strzał.

Bardzo wiele rodzajów piwa

Wiele pracy wykonanej przez PopChartLab jest istotne. Specjalizują się w dużych plakatach pokazujących wiele powiązanych ze sobą rzeczy, a czasem opisują swój proces. Oto ich opis projektu, w którym naprawdę zmagali się z ilością rzeczy, które chcieli pokazać . Osobiście nie podoba mi się efekt końcowy (ciężko pracowali, aby oswoić sierść, ale efektem końcowym jest nadal sierść), ale czytam, co próbowali, co działało, a co nie mogło pomóc.

Oto przykład, który starannie wykorzystuje miejsce docelowe na stronie, aby pokazać kategorie i kolejność w toku. Nie potrzebuje jaskrawej, jaskrawej kolorystyki (która nawiązuje do tematu, starego tęczowego logo Apple). Korzystanie ze strony xiy w ten sposób oznacza, że ​​można zapisać linie łączące dla innych rodzajów informacji.

Wreszcie, jak wspomniałem na początku, diagramy architektury oprogramowania są przykładem map sieciowych, które są rodzajem map. Możesz więc czerpać pomysły ze zwykłych (kartograficznych) map, które mają podobny problem z wieloma kategoriami gęstych, złożonych informacji, które często mają połączenia i kierunek - ciągle próbując powstrzymać wiele sygnałów zamienianych w hałas.

Axis Maps produkuje niesamowite mapy typograficzne, które mają jedne z najlepszych współczynników sygnału i szumu spośród wszystkich grafik informacyjnych, jakie widziałem, po prostu wykorzystując ich etykiety jako elementy etykiety - a następnie kolor i kilka subtelnych zwrotów liter i odstępów, aby wskazać Kategoria.

Jeśli nie masz nic przeciwko jakiejś ekstremalnej typografii, prawdopodobnie można ją wykorzystać do oswojenia schematu, który wymyka się spod kontroli. Wygląda na żmudną pracę, ale wyniki są niesamowite.

Chcesz ładne diagramy architektury oprogramowania? Spójrz na głośne projekty open source, takie jak Eclipse, Aptana, Magento, Android, Fedora itp.

Są to dokumenty funkcjonalne, a nie materiały marketingowe, ale projekty te są często prowadzone lub wnoszone przez organizacje, które są wystarczająco świadome marki, aby nadal wkładać trochę wysiłku w projektowanie dokumentacji technicznej.

Firmy takie jak Apple (np. Dokumentacja programistów dla iOS i OS X), Google (dokumentacja dla App Engine i Android), IBM, Oracle, a nawet producenci sprzętu, tacy jak Intel i Nvidia, powinni mieć dobre diagramy oprogramowania lub architektury systemu, z których można czerpać inspirację .

Platformy internetowe, zwłaszcza dostawcy PaaS, takie jak Heroku, AWS, EngineYard, OpenShift (Redhat), Cloudbees itp. Również byłyby dobrym źródłem autentycznie dobrze wyglądających diagramów architektury, ponieważ ich faktycznie pełnią częściowo funkcję marketingową.

Ciekawym artykułem na temat korzystania z diagramów w architekturze oprogramowania jest Proste szkice do diagramowania architektury oprogramowania autorstwa Simona Browna.

Więcej przykładów świetnych diagramów autorstwa Lucid Chart na https://www.lucidchart.com/pages/examples/network_diagram_software