Exemplos de diagramas de arquitetura de software bem projetados

Passo bastante tempo desenhando diagramas da arquitetura de software, que geralmente consistem em variações nas caixas conectadas por setas. Embora esses diagramas transmitam as informações relevantes, eles geralmente deixam muito a desejar da perspectiva da estética.

Alguns exemplos de diagramas de arquitetura de software que demonstram isso:

• 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

Pesquisei centenas de infográficos para encontrar inspiração, mas a maioria tende a consistir em elementos visuais discretos, relacionados apenas pelos conceitos gerais do conceito e da gestalt. Os poucos que contêm setas para representar algum tipo de fluxo tendem a ser muito mais simples do que minhas necessidades.

O exemplo (não software) que encontrei ( http://visual.ly/house-democrats-health-plan-flow-chart ) sofre (talvez deliberadamente para demonstrar complexidade) de muitos dos mesmos problemas que os acima ...

Existem exemplos de diagramas de arquitetura de software esteticamente agradáveis ​​ou, pelo menos, infográficos que mostram fluxos de processos complexos que seriam inspiração útil?

Não consigo pensar em nenhum diagramas de arquitetura de software especialmente bons que não tenham os dados que mostram muito simplificados e reduzidos, mas podemos encontrar algumas coisas relevantes primeiro detalhando o que é um diagrama de arquitetura de software.

Em seguida, veremos alguns exemplos de projetos que lidam com desafios semelhantes.

É um tipo de fluxograma / diagrama de processo com foco nas categorias de elemento / nó. Esse, por sua vez, é um tipo de diagrama de rede de link de nó, com direcionalidade adicional: essencialmente, nós, que podem ter categorias, e conexões, que podem ter direção.

Qualquer coisa baseada em links de nós pode se transformar em uma bagunça confusa quando a complexidade do que ela está tentando representar aumenta. Se nada sugerido abaixo, com base nos links dos nós, funcionar - se a coisa em questão for muito complexa -, aqui está um artigo de um respeitado acadêmico de visualização de dados sobre algumas alternativas ao conceito "link de nó" como base para mapas de rede que os pesquisadores de visualização de dados veio com. Se você descobrir como adaptar alguns desses itens em algo fácil de usar e direcional, poderá ser o vencedor. Mas esse é realmente o caminho mais difícil , apenas tente se for necessário.

Assim, diagramas de fluxo complexos e diagramas de rede com ênfase na direção / fluxo e categorias de nó / elemento. Primeiros princípios básicos:

• Mantenha cada nó / elemento simples
• Torne as diferenças entre os tipos de elemento claras e simples com uma hierarquia clara entre eles
• Torne o fluxo e a conectividade o máximo possível de um elemento de plano de fundo

Pense na relação sinal / ruído (às vezes chamada de relação dados-tinta no contexto dos gráficos de informações): as conexões são guias visuais, não dados; Pense também na figura-base : os dados devem ser atendidos em primeiro plano, as pistas visuais mostrando fluxo e categoria devem ser o pano de fundo que as pessoas estão cientes, mas não distraídas.

Primeiro exemplo, um cartaz de fluxograma de decisão de tipografia (tenho certeza que algumas pessoas vão discordar do conteúdo ...). Usando apenas preto e branco, torna um diagrama complexo utilizável com uma hierarquia clara entre os elementos:

É muito claro o que cada elemento é, usando iluminação e variação clara, mas sutil, que adicionam ruído mínimo. O todo é complexo, mas cada parte é clara.

Possíveis aprimoramentos - não há direção geral, com isso indo do meio para fora - as linhas podem ter informações direcionais sem adicionar ruído sendo pequenas divisões sutis pontilhadas (como >>>>>) em vez de pontos, para que você possa começar em qualquer lugar e veja para onde ir sem essas dicas de direção que distraem.

Aqui está outro exemplo semelhante em que o fluxo está se movendo através de uma hierarquia (mais geral> mais específica). Ele transforma muitas categorias em dois tipos de nó: produtos e tipos, e o tamanho do nó informa a especificidade do tipo. (os contornos do círculo e as linhas de conexão podem ser muito mais sutis, mas parecem ter sido ponderados para complementar o tipo e dar a tudo, exceto o copo central, uma textura mais uniforme). O tamanho do círculo também funciona como uma indicação de posição e fluxo - você passa de círculos maiores para menores, para que não precisem de outras pistas visuais que adicionam complexidade, como pontas de seta.

Os muitos tipos de cerveja

Muito do trabalho realizado pelo PopChartLab é relevante. Eles se especializam em grandes pôsteres mostrando muitas coisas interconectadas e, às vezes, escrevem seu processo. Aqui está a descrição de um projeto em que eles realmente lutaram com a quantidade de coisas que queriam mostrar . Eu, pessoalmente, não gosto muito do resultado final (eles trabalharam duro para domar a bola de pêlo, mas o resultado final ainda é uma bola de pêlo), mas lendo o que eles tentaram e o que funcionou e o que não ajudou.

Aqui está um exemplo que faz bom uso da veiculação na página para mostrar categorias e ordem no fluxo. Ele não precisa do esquema de cores berrante (que é uma referência ao assunto, o antigo logotipo colorido da Apple em arco-íris). Usar as páginas xey nos eixos como este significa que pode salvar as linhas de conexão para outros tipos de informações.

Finalmente, como mencionei no início, os diagramas de arquitetura de software são um exemplo de mapas de rede, que são um tipo de mapa. Assim, você pode obter idéias de mapas regulares (cartográficos), que também têm um problema semelhante de muitas categorias de informações densas e complexas que geralmente têm conexões e direção - constantemente tentando impedir que seus muitos sinais se transformem em ruído.

Os Mapas de Eixo produzem mapas tipográficos surpreendentes que têm algumas das melhores taxas de sinal-ruído de todos os gráficos de informação que eu já vi, simplesmente usando seus rótulos como as coisas que os rótulos rotulam - em seguida, cores e algumas reviravoltas sutis de tipografia e espaçamento para indicar categoria.

Se você não se importa com alguma tipografia extrema, isso provavelmente poderia ser usado para domar um fluxograma que estava ficando fora de controle. Parece um trabalho meticuloso, mas os resultados são impressionantes.

Deseja belos diagramas de arquitetura de software? Veja projetos de código aberto de alto perfil, como Eclipse, Aptana, Magento, Android, Fedora, etc.

Estes são documentos funcionais, não materiais de marketing, mas esses projetos geralmente são executados ou contribuídos por organizações que têm consciência da marca o suficiente para ainda dedicar algum esforço ao projetar sua documentação técnica.

Empresas como Apple (por exemplo, documentação do desenvolvedor para iOS e OS X), Google (documentação para App Engine e Android), IBM, Oracle e até fabricantes de hardware como Intel e Nvidia devem ter bons diagramas de software ou de arquitetura de sistema, dos quais você pode se inspirar. .

As plataformas da Web, especialmente os provedores de PaaS, como Heroku, AWS, EngineYard, OpenShift (Redhat), Cloudbees etc. também seriam boas fontes para diagramas de arquitetura genuinamente bonitos, já que eles realmente servem parcialmente a uma função de marketing.

Um artigo interessante sobre o uso de diagramas para arquitetura de software é o Simple Sketches for Diagramming your Architecture Architecture, de Simon Brown.

Existem mais exemplos de ótimos diagramas do Lucid Chart em https://www.lucidchart.com/pages/examples/network_diagram_software