Lab_01b_Mermaid

Author

Henrique Alvarenga

Published

11 de setembro de 2024

Parte 1: Introdução ao Mermaid

1.1 O que é Mermaid?

Mermaid é uma ferramenta de código aberto que permite criar diagramas baseados em texto, utilizando uma sintaxe simples e intuitiva. Ao invés de desenhar diagramas manualmente, você escreve o código do diagrama em um formato legível, e o Mermaid o converte automaticamente em uma visualização gráfica.

Tipos de Diagramas Criados com Mermaid:

  • Fluxogramas: Representam processos ou fluxos de trabalho.
  • Diagramas de Gantt: Úteis para planejamento e gestão de projetos.
  • Diagramas de Classe: Usados para representar estruturas em programação orientada a objetos.
  • Diagramas de Estado: Representam estados e transições em sistemas dinâmicos.

Vantagens do Mermaid:

  • Facilidade de Uso: A sintaxe simples facilita a criação rápida de diagramas, mesmo para quem não tem experiência com ferramentas gráficas.
  • Integração Simples: Mermaid pode ser facilmente integrado a diversas plataformas e linguagens de programação, incluindo Markdown, Quarto, e até documentos HTML.
  • Reprodutibilidade: Como os diagramas são definidos em texto, eles podem ser versionados, compartilhados e reproduzidos de forma consistente.
  • Manutenção Simples: Modificar um diagrama é tão simples quanto alterar o texto que o define, o que facilita a atualização e manutenção.

1.2 Por que usar o Mermaid?

Na área da saúde, a comunicação clara e eficaz é crucial. Diagramas são ferramentas poderosas para: - Explicar Processos Complexos: Um fluxograma pode ilustrar claramente um protocolo clínico, mostrando as etapas do atendimento ao paciente. - Planejar Pesquisas: Diagramas de Gantt são ideais para representar cronogramas de estudos clínicos, visualizando prazos e marcos importantes. - Documentação e Relatórios: Integrar diagramas diretamente em relatórios e publicações científicas aumenta a clareza e a compreensão dos dados apresentados.

Exemplo de Uso na Área da Saúde:

Imagine que você está criando um relatório sobre um estudo clínico. Utilizando o Mermaid, você pode incluir um diagrama de Gantt para visualizar o cronograma do estudo, ou um fluxograma para descrever o fluxo de pacientes através das diferentes fases do tratamento. Isso torna o relatório mais intuitivo e fácil de entender para os leitores, incluindo colegas de trabalho, financiadores e revisores.

Fluxograma

Um fluxograma é útil para ilustrar um processo ou fluxo de trabalho, como um protocolo clínico.

graph TD
    A[Início] --> B{O paciente apresenta sintomas?}
    B -->|Sim| C[Consulta Médica]
    B -->|Não| D[Fim]
    C --> E{Precisa de exames?}
    E -->|Sim| F[Solicitar exames]
    E -->|Não| G[Prescrever tratamento]
    F --> H[Realizar exames]
    H --> I[Resultados disponíveis?]
    I -->|Sim| G[Prescrever tratamento]
    I -->|Não| F[Repetir exames]
    G --> D[Fim]

No Mermaid, os caracteres {}, [], e | | são usados para criar e definir diferentes tipos de elementos em um fluxograma ou gráfico. Aqui está o que cada um desses caracteres significa:

1. {} - Decisão ou Condicional

  • Uso: {Texto}
  • Significado: Quando você coloca o texto dentro de chaves {}, você está definindo um nó de decisão no fluxograma. Esse nó geralmente representa um ponto em que o processo pode seguir diferentes caminhos com base em uma condição ou pergunta.
  • Exemplo: B{O paciente apresenta sintomas?} define um nó de decisão onde a resposta a essa pergunta determinará o próximo passo no fluxo.

2. [] - Nó de Processo ou Ação

  • Uso: [Texto]
  • Significado: Quando o texto é colocado dentro de colchetes [], ele define um nó de processo ou ação. Esse nó representa uma etapa no fluxo onde algo acontece, como uma ação que deve ser executada.
  • Exemplo: A[Início] define um nó de processo chamado “Início”, que é o ponto de partida do fluxo.

3. | | - Rótulo de Conexão ou Condicional

  • Uso: --> |Texto|
  • Significado: Os caracteres |Texto| são usados para adicionar um rótulo a uma conexão entre dois nós, geralmente para especificar uma condição ou descrever a conexão. Esse rótulo é colocado na linha que conecta dois nós e explica o que acontece durante a transição de um nó para outro.
  • Exemplo: B -->|Sim| C[Consulta Médica] significa que, se a condição for “Sim”, o fluxo seguirá para a “Consulta Médica”.

Resumo de Uso:

  • {}: Define uma decisão no fluxo, onde diferentes caminhos podem ser tomados com base em uma condição.
  • []: Define uma ação ou processo específico no fluxo.
  • | |: Adiciona um rótulo ou condição a uma conexão entre dois nós, explicando o motivo ou resultado dessa transição.

Esses caracteres ajudam a criar fluxogramas claros e fáceis de entender, representando de forma visual como as diferentes partes de um processo se conectam e interagem.

Diagrama de Gantt

Um diagrama de Gantt é útil para planejar e gerenciar cronogramas, como um estudo projeto de pesquisa

gantt
    title Cronograma do projeto de pesquisa
    dateFormat  DD-MM-YYYY
    
    section Preparação
    Escrita do Estudo         :done,    pre1, 01-01-2024, 30d
    Aprovação Ética           :done,    pre2, 02-02-2024, 30d
    Recrutamento de Pacientes :active,  pre3, 02-03-2024, 30d
    
    section Execução
    Fase 1                    :active,  fase1, 01-04-2024, 30d
    Fase 2                    :         fase2, after fase1, 60d
    Fase 3                    :         fase3, after fase2, 30d
    
    section Conclusão
    Análise dos Dados         :         analise, after fase3, 30d
    Publicação dos Resultados :         publicacao, after analise, 45d

Explicação do código:
- gantt: Indica que o diagrama será um diagrama de Gantt.
- title Cronograma do projeto de pesquisa: Define o título do diagrama como “Cronograma do projeto de pesquisa”.
- dateFormat DD-MM-YYYY: Define o formato de data utilizado no diagrama, onde DD é o dia, MM é o mês, e YYYY é o ano. Isso garante que as datas sejam interpretadas corretamente.

section Preparação: Inicia uma nova seção chamada “Preparação”. Seções ajudam a organizar diferentes fases ou áreas do projeto.

  • Escrita do Estudo :done, pre1, 01-01-2024, 30d:
    • Escrita do Estudo: Nome da tarefa. done: Estado da tarefa. done indica que a tarefa foi concluída.
    • pre1: Um identificador único para a tarefa. Pode ser usado para referenciar esta tarefa em outras partes do diagrama.
    • 01-01-2024: Data de início da tarefa.
    • 30d: Duração da tarefa em dias.

  • Aprovação Ética :done, pre2, 02-02-2024, 30d: Similar ao anterior, indica que a aprovação ética foi concluída e durou 30 dias, começando em 02-02-2024.

  • Recrutamento de Pacientes :active, pre3, 02-03-2024, 30d
    • active: Estado da tarefa. active indica que a tarefa está em andamento.
    • pre3: Identificador único da tarefa de recrutamento de pacientes.
    • 02-03-2024: Data de início.
    • 30d: Duração de 30 dias.

section Execução: Inicia a seção chamada “Execução”, que provavelmente inclui a parte principal do estudo.
- Fase 1 :active, fase1, 01-04-2024, 30d: A Fase 1 está em andamento (active), começou em 01-04-2024 e vai durar 30 dias.
- Fase 2 : fase2, after fase1, 60d: O espaço vazio indica que esta tarefa não tem um estado específico atribuído (não concluída, ativa, etc.), então é interpretada como uma tarefa futura.
- after fase1: A Fase 2 começa após a conclusão da Fase 1.
- 60d: Duração de 60 dias. Fase 3 : fase3, after fase2, 30d A Fase 3 começa após a conclusão da Fase 2 e dura 30 dias.

Diagrama de Estado

Este diagrama é útil para mostrar os diferentes estados em que um processo ou entidade pode estar, como o progresso de um tratamento.

stateDiagram
    [*] --> Avaliacao
    Avaliacao --> Exame
    Exame --> Tratamento : "Resultados"
    Tratamento --> Alta : "Melhora"
    Tratamento --> Reavaliacao : "Sem melhora"
    Reavaliacao --> [*] : "Alta"
    Alta --> [*]