MARKDOWN COM MERMAID

O QUE É MARKDOWN

Markdown é uma linguagem de marcação leve que você pode usar para adicionar elementos de formatação a documentos de texto simples. Criada por John Gruber em 2004, o Markdown é agora uma das linguagens de marcação mais populares do mundo.

Usar Markdown é diferente de usar um editor WYSIWYG. Em um aplicativo como o Microsoft Word, você clica em botões para formatar palavras e frases, e as mudanças são visíveis imediatamente. O Markdown não é assim. Quando você cria um arquivo formatado em Markdown, você adiciona a sintaxe Markdown ao texto para indicar quais palavras e frases devem ter uma aparência diferente.

Por exemplo, para denotar um título, você adiciona um sinal de número antes dele (por exemplo, # Título Um). Ou para deixar uma frase em negrito, você adiciona dois asteriscos antes e depois dela (por exemplo, este texto está em negrito). Pode levar um tempo para se acostumar a ver a sintaxe Markdown no seu texto, especialmente se você estiver acostumado a aplicativos WYSIWYG.

Referencias:

https://daringfireball.net/projects/markdown/.
https://dillinger.io/ (editor online de markdown)
https://www.markdownguide.org/ (guia de markdown)
https://www.markdownguide.org/cheat-sheet/ (cheat sheet de markdown)

O QUE É MERMAID

Mermaid é uma ferramenta baseada em JavaScript para criação de diagramas e gráficos que permite criar visualizações usando uma sintaxe simples e intuitiva. É frequentemente usada em arquivos Markdown para gerar diagramas dinamicamente. Mermaid suporta vários tipos de diagramas, incluindo:

Fluxogramas
Diagramas de sequência
Diagramas de classe
Diagramas de Entidade-Relacionamento (ERD)
Gráficos de Gantt
Gráficos de pizza

O site oficial do Mermaid é https://mermaid-js.github.io/.

Sites onde posso ficar testando meus Mermaid diagrams?

Mermaid Live Editor: https://mermaid-js.github.io/mermaid-live-editor/
Dillinger: https://dillinger.io/
StackEdit: https://stackedit.io/
Markdown Live Preview: https://markdownlivepreview.com/

Mermaid é particularmente útil para desenvolvedores e redatores técnicos que precisam incluir diagramas em sua documentação sem depender de ferramentas de design gráfico externas. Os diagramas são definidos usando uma sintaxe baseada em texto, o que facilita o controle de versão e a edição. Aqui está um exemplo de um fluxograma simples em Mermaid:

mindmap
  root((Universidade))
    Campus_Principal
      Faculdade_de_Engenharia(RESENDE)
      Faculdade_de_Medicina
      Faculdade_de_Direito
    Campus_Secundario
      Faculdade_de_Economia
      Faculdade_de_Artes
    Campus_Terceiro
      Faculdade_de_Ciências
      Faculdade_de_Educação

TITULO

erDiagram
    CLIENT {
        int id
        string name
        string email
        string phone
    }
    ORDER {
        int id
        date orderDate
        float totalAmount
        int clientId
    }
    PRODUCT {
        int id
        string name
        float price
    }
    ORDER_DETAIL {
        int id
        int orderId
        int productId
        int quantity
    }

    CLIENT ||--o{ ORDER : places
    ORDER ||--|{ ORDER_DETAIL : contains
    PRODUCT ||--o{ ORDER_DETAIL : in

Relationship Diagram (ERD). O ERD é usado para representar a estrutura de um banco de dados, mostrando tabelas (entidades), seus atributos e as relações entre elas.

Aqui está um exemplo de como você pode criar um ERD em Mermaid para documentar um banco de dados:

Cadastro de Potencialidades

Estrutura da Tabela no MySQL

-- Criar a tabela de projetos
CREATE TABLE projetos (
    id SERIAL PRIMARY KEY,
    descricao TEXT,
    tipo VARCHAR(255),
    inicio INT,
    fim INT
);

-- Modificar a tabela cadastro_potencialidades para adicionar a chave estrangeira
ALTER TABLE cadastro_potencialidades
ADD COLUMN projeto_id INT,
ADD CONSTRAINT fk_projeto
FOREIGN KEY (projeto_id) REFERENCES projetos(id);

MER

erDiagram
    CADASTRO_POTENCIALIDADES {
        INT id
        VARCHAR area
        VARCHAR cpf
        TEXT descricao
        INT fim
        VARCHAR grande_area
        INT inicio
        VARCHAR projeto
        VARCHAR situacao
        VARCHAR subarea
        INT projeto_id
    }
    PROJETOS {
        INT id
        TEXT descricao
        VARCHAR tipo
        INT inicio
        INT fim
    }
    CADASTRO_POTENCIALIDADES ||--o{ PROJETOS : "pertence a"

UML

classDiagram
    class CadastroPotencialidades {
        int id
        String area
        String cpf
        String descricao
        int fim
        String grande_area
        int inicio
        String projeto
        String situacao
        String subarea
        int projeto_id
        cadastrarArea()
    }

    class Projetos {
        int id
        String descricao
        String tipo
        int inicio
        int fim
    }

    CadastroPotencialidades --> Projetos : "pertence a"

Diagrama de sequencia teste

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!