arquitetura.md

@@ -132,6 +132,11 @@ Pensando agora de maneira mais técnica e entrando mais afundo no código, o sis
 *  Para acessar as páginas existentes, uma rota é especificada para cada uma delas. 
 > Por exemplo, caso o usuário deseje acessar a parte de Criações de uma Receita, é necessário que o caminho que ele faça na aplicação tenha uma rota que leve para `/creations`
 
+<img src="https://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/system_diagram_frontend.png">
+
+
+Neste diagrama de sistema abordamos exatamente o que foi explicado acima, onde a Routes (através do `react-router`) manipula os diversos caminhos da aplicação, sendo que caso o desejo seja acessar a página responsável pelo Feed, é necessário que o seu *path* seja igual à `/recipes`. Também é demonstrado a forma como se comunicam as estruturas do sistema, onde uma página chama diversos componentes ou um único componente que, dentro de si, chama outros componentes.
+
 
 ### Diagramas de Sequência
 O Diagrama de sequência é uma abordagem na modelagem em UML na qual o objetivo é incidir sobre as *linhas da vida* existentes na aplicação. Em outras palavras, é uma espécie de diagrama de interação, pois descreve **como** e **em qual ordem** os diversos pacotes de trabalho trabalham juntos.