Prototype action to autogenerate md files

.github/workflows/main.yaml

@@ -0,0 +1,25 @@
+name: main
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        repo: [relacionamentos, icones, cms, imersaofc, intencoes, maonamassa, niveis, ]
+    permissions:
+      contents: write
+    container:
+      image: structurizr/cli:latest
+    steps:
+      - name: Install git
+        run: apt-get update && apt-get install -y git
+      - name: Mark directory as safe for git
+        run: git config --global --add safe.directory /__w/modeloC4/modeloC4
+      - uses: actions/checkout@v4
+      - name: Generate diagrams
+        run: |
+          bash scripts/gerar-diagramas.sh ${{ matrix.repo }}
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "Diagramas gerados automaticamente para o repositório ${{ matrix.repo }}"

.gitignore

@@ -1,3 +1,4 @@
 out
 .structurizr
 */export-diagrams.js
+*.mmd

cms/diagramas.md

@@ -0,0 +1,65 @@
+## Containers
+
+```mermaid
+graph LR
+  linkStyle default fill:#ffffff
+
+  subgraph diagram ["CMS - Containers"]
+    style diagram fill:#ffffff,stroke:#ffffff
+
+    1["<div style='font-weight: bold'>Leitor</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Pessoa que consome as<br />notícias do site.</div>"]
+    style 1 fill:#08427b,stroke:#052e56,color:#ffffff
+    2["<div style='font-weight: bold'>Editor</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Pessoa que escreve conteúdo<br />para o site.</div>"]
+    style 2 fill:#08427b,stroke:#052e56,color:#ffffff
+
+    subgraph 3 [CMS]
+      style 3 fill:#ffffff,stroke:#0b4884,color:#0b4884
+
+      4("<div style='font-weight: bold'>Portal de Notícias</div><div style='font-size: 70%; margin-top: 0px'>[Container: Python and Django]</div><div style='font-size: 80%; margin-top:10px'>Site que fornece as notícias<br />e conteúdos. Possui área<br />acessível somente para<br />editores.</div>")
+      style 4 fill:#438dd5,stroke:#2e6295,color:#ffffff
+      5[("<div style='font-weight: bold'>Banco de Dados</div><div style='font-size: 70%; margin-top: 0px'>[Container: Postgresql]</div><div style='font-size: 80%; margin-top:10px'>Armazena notícias e<br />informações sobre usuários.</div>")]
+      style 5 fill:#438dd5,stroke:#2e6295,color:#ffffff
+      6["<div style='font-weight: bold'>Armazenamento de imagens</div><div style='font-size: 70%; margin-top: 0px'>[Container: Bucket S3]</div><div style='font-size: 80%; margin-top:10px'>Armazena imagens que serão<br />utilizadas nas notícias e no<br />conteúdo do portal.</div>"]
+      style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff
+      7["<div style='font-weight: bold'>Aplicativo móvel</div><div style='font-size: 70%; margin-top: 0px'>[Container: Android/iOS]</div><div style='font-size: 80%; margin-top:10px'>Aplicativo que permite o<br />acesso ao conteúdo e às<br />notícias do portal.</div>"]
+      style 7 fill:#438dd5,stroke:#2e6295,color:#ffffff
+      8["<div style='font-weight: bold'>Fila de processamento em segundo plano</div><div style='font-size: 70%; margin-top: 0px'>[Container: RabbitMQ]</div><div style='font-size: 80%; margin-top:10px'>Recebe eventos de criação de<br />imagem para serem consumidos<br />pelo processador.</div>"]
+      style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff
+      9("<div style='font-weight: bold'>Processador de Imagens</div><div style='font-size: 70%; margin-top: 0px'>[Container: Python]</div><div style='font-size: 80%; margin-top:10px'>Processa imagens<br />otimizando-as e gerando<br />thumbnails.</div>")
+      style 9 fill:#438dd5,stroke:#2e6295,color:#ffffff
+    end
+
+    1-. "<div>Consome notícias e conteúdo<br />em</div><div style='font-size: 70%'></div>" .->4
+    1-. "<div>Consome notícias e conteúdo<br />em</div><div style='font-size: 70%'></div>" .->7
+    2-. "<div>Escreve conteúdo em</div><div style='font-size: 70%'></div>" .->4
+    7-. "<div>Consome notícias e conteúdo<br />em</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->4
+    4-. "<div>Lê de e escreve em</div><div style='font-size: 70%'>[Postgresql Protocol]</div>" .->5
+    4-. "<div>Lê de e escreve em</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->6
+    4-. "<div>Envia evento de adição de<br />nova imagem para</div><div style='font-size: 70%'>[AMQP]</div>" .->8
+    9-. "<div>Consome eventos de</div><div style='font-size: 70%'>[AMQP]</div>" .->8
+    9-. "<div>Escreve imagens em</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->6
+    4-. "<div>Consome conteúdo estático de</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->6
+  end
+```
+
+## SystemContext
+
+```mermaid
+graph TB
+  linkStyle default fill:#ffffff
+
+  subgraph diagram ["CMS - System Context"]
+    style diagram fill:#ffffff,stroke:#ffffff
+
+    1["<div style='font-weight: bold'>Leitor</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Pessoa que consome as<br />notícias do site.</div>"]
+    style 1 fill:#08427b,stroke:#052e56,color:#ffffff
+    2["<div style='font-weight: bold'>Editor</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Pessoa que escreve conteúdo<br />para o site.</div>"]
+    style 2 fill:#08427b,stroke:#052e56,color:#ffffff
+    3("<div style='font-weight: bold'>CMS</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Sistema de gerenciamento de<br />conteúdo.</div>")
+    style 3 fill:#1168bd,stroke:#0b4884,color:#ffffff
+
+    1-. "<div>Consome notícias e conteúdo<br />em</div><div style='font-size: 70%'></div>" .->3
+    2-. "<div>Escreve conteúdo em</div><div style='font-size: 70%'></div>" .->3
+  end
+```
+

icones/diagramas.md

@@ -0,0 +1,23 @@
+## Icones
+
+```mermaid
+graph TB
+  linkStyle default fill:#ffffff
+
+  subgraph diagram ["Exemplos de Ícones"]
+    style diagram fill:#ffffff,stroke:#ffffff
+
+    1["<div style='font-weight: bold'>Título 2</div><div style='font-size: 70%; margin-top: 0px'>[tecnologia]</div><div style='font-size: 80%; margin-top:10px'>Descrição de um elemento.</div>"]
+    style 1 fill:#dddddd,stroke:#9a9a9a,color:#000000
+    2["<div style='font-weight: bold'>Título 3</div><div style='font-size: 70%; margin-top: 0px'>[tecnologia]</div><div style='font-size: 80%; margin-top:10px'>Descrição de um elemento.</div>"]
+    style 2 fill:#dddddd,stroke:#9a9a9a,color:#000000
+    3["<div style='font-weight: bold'>Título 4</div><div style='font-size: 70%; margin-top: 0px'>[tecnologia]</div><div style='font-size: 80%; margin-top:10px'>Descrição de um elemento.</div>"]
+    style 3 fill:#dddddd,stroke:#9a9a9a,color:#000000
+    4["<div style='font-weight: bold'>Título 5</div><div style='font-size: 70%; margin-top: 0px'>[tecnologia]</div><div style='font-size: 80%; margin-top:10px'>Descrição de um elemento.</div>"]
+    style 4 fill:#dddddd,stroke:#9a9a9a,color:#000000
+    5["<div style='font-weight: bold'>Título 6</div><div style='font-size: 70%; margin-top: 0px'>[tecnologia]</div><div style='font-size: 80%; margin-top:10px'>Descrição de um elemento.</div>"]
+    style 5 fill:#dddddd,stroke:#9a9a9a,color:#000000
+
+  end
+```
+

maonamassa/diagramas.md

@@ -0,0 +1,58 @@
+## ContainerDiagram
+
+```mermaid
+graph LR
+  linkStyle default fill:#ffffff
+
+  subgraph diagram ["Mão na Massa CMS - Containers"]
+    style diagram fill:#ffffff,stroke:#ffffff
+
+    1["<div style='font-weight: bold'>Usuário</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Consumidor de conteúdo.</div>"]
+    style 1 fill:#08427b,stroke:#052e56,color:#ffffff
+    2["<div style='font-weight: bold'>Admin</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Administrador de conteúdo.</div>"]
+    style 2 fill:#08427b,stroke:#052e56,color:#ffffff
+
+    subgraph 3 [Mão na Massa CMS]
+      style 3 fill:#ffffff,stroke:#0b4884,color:#0b4884
+
+      4("<div style='font-weight: bold'>Plataforma WEB - SPA</div><div style='font-size: 70%; margin-top: 0px'>[Container: Vue.js]</div><div style='font-size: 80%; margin-top:10px'>Prover conteúdo para usuarios<br />e acesso administrativo ao<br />CMS.</div>")
+      style 4 fill:#438dd5,stroke:#2e6295,color:#ffffff
+      5("<div style='font-weight: bold'>Mobile</div><div style='font-size: 70%; margin-top: 0px'>[Container: Flutter]</div><div style='font-size: 80%; margin-top:10px'>Prover conteúdo para usuarios<br />e acesso administrativo ao<br />CMS.</div>")
+      style 5 fill:#438dd5,stroke:#2e6295,color:#ffffff
+      6("<div style='font-weight: bold'>Backend</div><div style='font-size: 70%; margin-top: 0px'>[Container: NestJS, Typescript]</div><div style='font-size: 80%; margin-top:10px'>Gerenciar e prover conteúdos<br />da plataforma e controle de<br />acesso.</div>")
+      style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff
+      7("<div style='font-weight: bold'>Banco de dados SQL</div><div style='font-size: 70%; margin-top: 0px'>[Container: PostgreSQL]</div><div style='font-size: 80%; margin-top:10px'>Armazenar informações dos<br />usuários e de conteúdo.</div>")
+      style 7 fill:#438dd5,stroke:#2e6295,color:#ffffff
+    end
+
+    1-. "<div>Acessa o conteúdo do</div><div style='font-size: 70%'>[HTTPS]</div>" .->5
+    2-. "<div>Acessa painel administrativo<br />da</div><div style='font-size: 70%'>[HTTPS]</div>" .->4
+    2-. "<div>Acessa painel administrativo<br />do</div><div style='font-size: 70%'>[HTTPS]</div>" .->5
+    4-. "<div>Realiza chamadas de api no</div><div style='font-size: 70%'>[HTTPS, JSON]</div>" .->6
+    5-. "<div>Realiza chamadas de api no</div><div style='font-size: 70%'>[HTTPS, JSON]</div>" .->6
+    6-. "<div>Lê e escreve no</div><div style='font-size: 70%'></div>" .->7
+    1-. "<div>Acessa o conteúdo da</div><div style='font-size: 70%'>[HTTPS]</div>" .->4
+  end
+```
+
+## ContextDiagram
+
+```mermaid
+graph TB
+  linkStyle default fill:#ffffff
+
+  subgraph diagram ["Mão na Massa CMS - System Context"]
+    style diagram fill:#ffffff,stroke:#ffffff
+
+    1["<div style='font-weight: bold'>Usuário</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Consumidor de conteúdo.</div>"]
+    style 1 fill:#08427b,stroke:#052e56,color:#ffffff
+    2["<div style='font-weight: bold'>Admin</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>Administrador de conteúdo.</div>"]
+    style 2 fill:#08427b,stroke:#052e56,color:#ffffff
+    3("<div style='font-weight: bold'>Mão na Massa CMS</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>")
+    style 3 fill:#1168bd,stroke:#0b4884,color:#ffffff
+
+    2-. "<div>Acessa painel administrativo<br />da</div><div style='font-size: 70%'>[HTTPS]</div>" .->3
+    1-. "<div>Acessa o conteúdo da</div><div style='font-size: 70%'>[HTTPS]</div>" .->3
+  end
+```
+

relacionamentos/diagramas.md

@@ -0,0 +1,46 @@
+## RelacionamentosAntes
+
+```mermaid
+graph LR
+  linkStyle default fill:#ffffff
+
+  subgraph diagram ["Relacionamentos Antes"]
+    style diagram fill:#ffffff,stroke:#ffffff
+
+    1("<div style='font-weight: bold'>Sistema de Dados Comerciais</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Um sistema de dados<br />comerciais.</div>")
+    style 1 fill:#438dd5,stroke:#2e6295,color:#ffffff
+    2("<div style='font-weight: bold'>Sistema de Risco Financeiro</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Um sistema de risco<br />financeiro.</div>")
+    style 2 fill:#438dd5,stroke:#2e6295,color:#ffffff
+    5("<div style='font-weight: bold'>Aplicativo de Página Única</div><div style='font-size: 70%; margin-top: 0px'>[Container: NestJS]</div><div style='font-size: 80%; margin-top:10px'>Fornece acesso a páginas web.</div>")
+    style 5 fill:#438dd5,stroke:#2e6295,color:#ffffff
+    6("<div style='font-weight: bold'>Aplicativo API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Python e FastAPI]</div><div style='font-size: 80%; margin-top:10px'>Fornece API de dados.</div>")
+    style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff
+
+    1-. "<div>Dados Comerciais</div><div style='font-size: 70%'></div>" .->2
+    5-. "<div>Usa</div><div style='font-size: 70%'></div>" .->6
+  end
+```
+
+## RelacionamentosDepois
+
+```mermaid
+graph LR
+  linkStyle default fill:#ffffff
+
+  subgraph diagram ["Relacionamentos Depois"]
+    style diagram fill:#ffffff,stroke:#ffffff
+
+    1("<div style='font-weight: bold'>Sistema de Dados Comerciais</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Um sistema de dados<br />comerciais.</div>")
+    style 1 fill:#438dd5,stroke:#2e6295,color:#ffffff
+    2("<div style='font-weight: bold'>Sistema de Risco Financeiro</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Um sistema de risco<br />financeiro.</div>")
+    style 2 fill:#438dd5,stroke:#2e6295,color:#ffffff
+    5("<div style='font-weight: bold'>Aplicativo de Página Única</div><div style='font-size: 70%; margin-top: 0px'>[Container: NestJS]</div><div style='font-size: 80%; margin-top:10px'>Fornece acesso a páginas web.</div>")
+    style 5 fill:#438dd5,stroke:#2e6295,color:#ffffff
+    6("<div style='font-weight: bold'>Aplicativo API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Python e FastAPI]</div><div style='font-size: 80%; margin-top:10px'>Fornece API de dados.</div>")
+    style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff
+
+    1-. "<div>Envia dados comerciais para</div><div style='font-size: 70%'></div>" .->2
+    5-. "<div>Faz chamadas de API<br />utilizando</div><div style='font-size: 70%'></div>" .->6
+  end
+```
+

scripts/gerar-diagramas.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+
+function _gerar_markdown() {
+	arquivo_mmd="$1"
+	conteudo_mmd=$(cat "$arquivo_mmd")
+
+	arquivo_sem_extensao="${arquivo_mmd%.*}"
+	echo "## ${arquivo_sem_extensao##*-}"
+	echo ""
+	echo "\`\`\`mermaid"
+	echo "$conteudo_mmd"
+	echo "\`\`\`"
+	echo ""
+}
+
+nome=$1
+
+/usr/local/structurizr-cli/structurizr.sh export \
+	-format mermaid \
+	-workspace "$nome"/"$nome".dsl
+
+[ -f "$nome"/diagramas.md ] && rm "$nome"/diagramas.md
+for arquivo_mmd in "$nome"/*.mmd; do
+	_gerar_markdown "$arquivo_mmd" >>"$nome"/diagramas.md
+done