Objetivo

• Este código implementa gráficos com a biblioteca "/js/mermaid.min.js".
• Este arquivo não declara a sintaxe markdown para mermaid porque a instalação da extensão Markdown Preview Mermaid Support faz com que toda vêz que se salva um documento markdown, a biblioteca é salva, mesmo não precisando dela e o código é muito grande, por isso estou usando o código mermaid.min.js por ser pequeno e prática.

As possíveis orientações do Fluxograma são:

• TB - De cima para baixo
• TD - De cima para baixo/igual a de cima para baixo
• BT - De baixo para cima
• RL – Da direita para a esquerda
• LR - Da esquerda para a direita

Exemplos graph TD

   graph TD;
      A(Características?)-->B(O que é Mermaid?);    
      A(Características?)-->C(Aceita comentários?); 
      A(Características?)-->D(Aceita imagem?); 

      B-->f1(É um recurso gráfico editado com editor de texto.);
      C-->f2(Não sei)
      D-->f3(Vou checar)

    graph TD;
        A(Características?)-->B(O que é Mermaid?);    
        A(Características?)-->C(Aceita comentários?); 
        A(Características?)-->D(Aceita imagem?); 

        B-->f1(É um recurso gráfico editado com editor de texto.);
        C-->f2(Não sei)
        D-->f3(Vou checar)

Exemplos de gráfico de setor

  pie title Animais de estimação adotados por voluntários
    "Cachorros" : 386
    "Gatos" : 85
    "Ratas" : 15

   pie title Animais de estimação adotados por voluntários
   "Cachorros" : 386
   "Gatos" : 85
   "Ratas" : 15

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Exemplo listas e markdown

flowchart TD
    %% A linha abaixo é uma diretivas%%
    %%{init: {"flowchart": {"htmlLabels": false}} }%%

    %%Definindo estilo do gráfico%%
    classDef default fill:#e6c07b,stroke:#333,stroke-width:4px;

      1[("`
      **1. Operadores**
         id
         Nome
         Telefone`")]

      2[("`
      **2. Hospitais**
            id
            Nome
            Telefone`")]

      3[("`
      **3. Natureza da interação**
            id
            nome `")]

      4[("`
      **4. Médicos**
           Id
           Id_Operadores
           Nome
           Telefone
           Telefone_da_secretaria
           Login
           Senha`")]

      5[("`
      **5. Serviço_de_agendas**
           id
           Nome
           Login
           Senha `")]

      6[("`
      **6. Convênios**
           Id
           Nome
           Login
           Senha `")]

      7[("`
      **7. clientes**
           Id;
           Nome;
           Telefone_WhatsApp;
           e-mail
           Login
           senha
           Id_Convenio
           Data_disponível
           Hora_disponível
           `")]

      8[("`
      **8. Integração**
           id
           endereço_do_site
           login
           senha
           status `")]
      9[("`
      **9. Expediente_do_medico_data**
           id_medico
           Data`")]

      10[("`
      **10. Expediente_do_medico_horas**
            Id_Medico
            Data
            Hora_inicial
            Hora_final`")]

      11[("`
      **11. Agenda**
            Id
            Id_Medico
            Id_Cliente
            Data
            Hora
            Id_Convenio
            Id_Natureza_da_Interação
            Observações`")]

1 --> |n-1| 4
4 --> |n-1| 9
4 --> |n-1| 10
4 --> |n-1| 11
7 --> |n-1| 11
6 --> |n-1| 11
3 --> |n-1| 11

Exemplo Aplicando estilos

flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f

Referências

1. Tutoriais
2. Mermaid Live
3. Github Mermaid
4. How to add Mermaid (Markdown) Plugin in Visual Studio Code
5. Como criar diagramas como código com Mermaid, GitHub e Visual Studio Code
6. Crie diagramas para transmitir informações sobre gráficos
7. flowchart