Conteúdo didático sobre Mermaid — o que é, tipos de diagramas e…

INEMA

Aqui vai a lista prática com os links diretos das principais ferramentas que você pode usar para trabalhar com Mermaid:

Editores Online⌗

Mermaid Live Editor (oficial): https://mermaid-js.github.io/mermaid-live-editor/
StackEdit (editor Markdown com suporte a Mermaid): https://stackedit.io

Plataformas de Documentação⌗

GitHub (suporte nativo em Markdown): https://github.com
GitLab (suporte nativo em Markdown): https://gitlab.com
Notion (bloco de código, com suporte parcial a Mermaid): https://www.notion.so
Confluence (via plugin Atlassian): https://marketplace.atlassian.com/apps/1213036/mermaid-diagrams-for-confluence

Aplicações Locais⌗

Visual Studio Code (extensão Mermaid): https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview
Typora (editor Markdown com Mermaid): https://typora.io
Obsidian (suporte nativo a Mermaid): https://obsidian.md

Exportação e Design⌗

Mermaid CLI (gerar SVG, PNG e PDF via linha de comando): https://github.com/mermaid-js/mermaid-cli
Draw.io (integrado ao Diagrams.net, com plugin Mermaid): https://app.diagrams.net
Excalidraw (com plugin Mermaid para diagramas estilo sketch): https://excalidraw.com

Você pode usar várias ferramentas para criar e visualizar diagramas em Mermaid, dependendo do seu fluxo de trabalho. Aqui estão as principais:

1. Online (rápido e prático)⌗

Mermaid Live Editor (https://mermaid-js.github.io/mermaid-live-editor/) Editor oficial onde você escreve o código Mermaid e vê o diagrama em tempo real.
StackEdit (https://stackedit.io) Editor online de Markdown que suporta Mermaid.
Obsidian (com plugin Mermaid) Muito usado para anotações e documentação pessoal.

2. Plataformas de Documentação e Colaboração⌗

GitHub – já suporta Mermaid nativamente nos arquivos Markdown.
GitLab – também integrado para documentação de projetos.
Notion – aceita Mermaid através de blocos de código (dependendo da versão).
Confluence (Atlassian) – pode integrar via plugin.

3. Aplicações Locais⌗

VS Code (extensão “Markdown Preview Mermaid Support”) Permite editar e renderizar diagramas direto no editor.
Typora Editor Markdown que renderiza Mermaid ao vivo.
Obsidian (com suporte nativo ou via plugins).

4. Exportação e Design⌗

Mermaid CLI (linha de comando) – gera SVG, PNG ou PDF direto do código.
Draw.io + Mermaid plugin – alternativa híbrida.
Excalidraw com Mermaid – para diagramas mais soltos no estilo sketch.

Vou te mostrar exemplos práticos dos principais tipos de diagramas que o Mermaid pode criar. Assim você vê como funciona na prática.

1. Fluxograma⌗

flowchart TD A[Início] --> B{Tem café?} B -->|Sim| C[Beber café] B -->|Não| D[Fazer café] D --> C C --> E[Fim]

Usado para processos passo a passo, decisões e fluxos lógicos.

2. Diagrama de Sequência⌗

sequenceDiagram Alice->>+Bob: Oi Bob, como vai? Bob-->>-Alice: Tudo bem, e você? Alice->>+Bob: Quer sair hoje? Bob-->>-Alice: Claro!

Mostra a interação entre atores ou sistemas em ordem cronológica.

3. Diagrama de Gantt (cronograma de projeto)⌗

gantt title Projeto Exemplo dateFormat YYYY-MM-DD section Planejamento Pesquisa :a1, 2025-09-01, 3d Definição :after a1, 2d section Execução Desenvolvimento :2025-09-06, 5d Testes :2025-09-11, 3d section Finalização Entrega :2025-09-15, 1d

Ótimo para gerenciar tarefas no tempo.

4. Diagrama de Classes (UML)⌗

classDiagram class Pessoa { +String nome +int idade +falar() } class Aluno { +int matricula +estudar() } Pessoa <|-- Aluno

Muito usado em programação para representar estruturas de software.

5. Diagrama de Entidade-Relacionamento (Banco de Dados)⌗

erDiagram CLIENTE ||--o{ PEDIDO : faz PEDIDO ||--|{ ITEM : contém CLIENTE { string nome string email } PEDIDO { int id date data } ITEM { string produto int quantidade }

Representa como tabelas de um banco de dados se relacionam.

6. Jornada do Usuário (User Journey)⌗

journey title Jornada de Compra section Procurando Usuário pesquisa no Google : 5: Feliz Usuário compara preços : 3: Neutro section Compra Usuário adiciona ao carrinho : 4: Animado Usuário paga : 2: Ansioso section Pós-compra Usuário recebe o produto : 5: Muito feliz

Mostra como o usuário se sente em cada etapa de uma experiência.

Mermaid é uma linguagem de marcação simples usada para criar diagramas e visualizações a partir de texto. Com ela, você escreve algumas linhas em formato parecido com pseudocódigo, e o sistema gera automaticamente diagramas como:

Fluxogramas
Diagramas de Gantt (cronogramas de projetos)
Diagramas de classes (UML)
Diagramas de sequência
Mapas de jornada do usuário
Diagramas de entidade-relacionamento

A ideia do Mermaid é ser fácil e rápido: em vez de desenhar manualmente, você descreve o diagrama com texto e ele gera a imagem. Por isso, é muito usado em documentação técnica (como no GitHub, GitLab, Notion, Obsidian) para explicar processos, sistemas ou projetos.

Exemplo simples de fluxograma em Mermaid:

flowchart TD A[Início] --> B{Decisão?} B -->|Sim| C[Executa ação] B -->|Não| D[Fim]

Esse código gera um fluxograma onde há um ponto inicial, uma decisão, e dois caminhos (Sim/Não).

MERMAID o q é e Como Usar

chatgpt.com ↗