🧩 Exercícios Práticos: Diagramas como Código com Mermaid.js

Extra Guia De Markdown • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 05.1 — Geração de Fluxogramas (Flowcharts) Mermaid

Contexto: Geração de Fluxogramas (Flowcharts) Mermaid aplicado ao domínio de Diagramas como Código com Mermaid.js.

Requisitos de Execução:

  1. Escrever função em Python que monte nós e conexões de um flowchart Mermaid LR dinamicamente.
  2. Validar sintaxe com identificadores seguros.

Resultado Esperado

Flowchart Mermaid LR gerado e validado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_1_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Diagramas como Código com Mermaid.js
🔑 Gabarito de Código & Solução Comentada 
# mermaid_flowchart_gen.py
def gerar_flowchart(etapas):
    linhas = ["flowchart LR"]
    for i in range(len(etapas) - 1):
        origem = f'N{i}["{etapas[i]}"]'
        destino = f'N{i+1}["{etapas[i+1]}"]'
        linhas.append(f"    {origem} --> {destino}")
    codigo = "\n".join(linhas)
    print("=== FLOWCHART MERMAID ===")
    print(codigo)
    return codigo

etapas = ["Checkout Codigo", "Linter", "Testes Unitarios", "Build Imagem"]
gerar_flowchart(etapas)

🔍 Nível 2: Prática

Problema 05.2 — Diagrama de Sequência e Troca de Mensagens

Contexto: Diagrama de Sequência e Troca de Mensagens aplicado ao domínio de Diagramas como Código com Mermaid.js.

Requisitos de Execução:

  1. Implementar gerador de sequenceDiagram com participantes, chamadas síncronas e ativações.

Resultado Esperado

Sequence Diagram com Cliente, API e Banco de Dados montado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_2_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Diagramas como Código com Mermaid.js
🔑 Gabarito de Código & Solução Comentada 
# mermaid_sequence_gen.py
def gerar_diagrama_sequencia(fluxo):
    linhas = ["sequenceDiagram", "    autonumber"]
    for origem, destino, msg in fluxo:
        linhas.append(f"    {origem}->>+{destino}: {msg}")
        linhas.append(f"    {destino}-->>-{origem}: Resposta OK")
    codigo = "\n".join(linhas)
    print("=== SEQUENCE DIAGRAM ===")
    print(codigo)
    return codigo

mensagens = [
    ("Cliente", "Gateway", "POST /login"),
    ("Gateway", "AuthService", "Validar Token"),
    ("AuthService", "Database", "Consultar Usuario")
]
gerar_diagrama_sequencia(mensagens)

⚡ Nível 3: Integração

Problema 05.3 — Diagrama de Classes e Entidades Relacionais (ERD)

Contexto: Diagrama de Classes e Entidades Relacionais (ERD) aplicado ao domínio de Diagramas como Código com Mermaid.js.

Requisitos de Execução:

  1. Criar gerador de diagramas erDiagram Mermaid a partir de metadados de tabelas e cardinalidade.

Resultado Esperado

Diagrama ERD com tabelas USUARIO e PEDIDO gerado com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_3_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Diagramas como Código com Mermaid.js
🔑 Gabarito de Código & Solução Comentada 
# mermaid_erd_gen.py
def gerar_erd_relacional(entidades):
    linhas = ["erDiagram"]
    for ent, campos in entidades.items():
        linhas.append(f"    {ent} {{")
        for tipo, nome in campos:
            linhas.append(f"        {tipo} {nome}")
        linhas.append("    }")
    codigo = "\n".join(linhas)
    print("=== ERD MERMAID ===")
    print(codigo)
    return codigo

schema = {
    "USUARIO": [("int", "id_pk"), ("string", "email_uk"), ("string", "nome")],
    "PEDIDO": [("int", "id_pk"), ("int", "usuario_fk"), ("float", "total")]
}
gerar_erd_relacional(schema)

🏆 Nível 4: Desafio Corporativo

Problema 05.4 — Validador e Sanitizador de Sintaxe Mermaid para Jekyll

Contexto: Validador e Sanitizador de Sintaxe Mermaid para Jekyll aplicado ao domínio de Diagramas como Código com Mermaid.js.

Requisitos de Execução:

  1. Desenvolver verificador que garanta que labels com parênteses estejam protegidas com aspas para evitar quebra de renderização.

Resultado Esperado

Sintaxe Mermaid corrigida: labels com caracteres especiais escapadas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_4_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Diagramas como Código com Mermaid.js
🔑 Gabarito de Código & Solução Comentada 
# mermaid_sanitizer.py
import re

def sanitizar_mermaid_labels(mermaid_code):
    padrao = r'(\w+)\[([^"\]]+[\(\)\{\}][^"\]*)\]'
    corrigido = re.sub(padrao, r'\1["\2"]', mermaid_code)
    linhas = [l for l in corrigido.splitlines() if l.strip()]
    print(f"Total de Linhas Sanitizadas: {len(linhas)}")
    print(corrigido)
    return corrigido

codigo_invalido = "A[Setup (Inicial)] --> B[Processar (Core)] --> C[Fim (Output)]"
sanitizar_mermaid_labels(codigo_invalido)