8 Bibliotecas de JavaScript para Gráficos – Parte 8: Mermaid

/ Blog

Olá comunidade!! 🥰

Chegamos à oitava e última parte da nossa série sobre bibliotecas de JavaScript para gráficos!

Hoje vamos explorar o Mermaid, uma biblioteca única que se destaca por permitir a criação de diagramas e gráficos através de uma sintaxe simples baseada em texto.

Siga nossa página no Linkedin e no Instagram e ajude a divulgar nosso conteúdo🥰

O que é Mermaid?

Mermaid é uma biblioteca JavaScript que transforma texto em diagramas dinâmicos. Com uma sintaxe inspirada no Markdown, ela permite criar fluxogramas, diagramas de sequência, gráficos de Gantt, diagramas de entidade-relacionamento e muito mais, tudo isso sem precisar desenhar manualmente.

Por que Escolher Mermaid?

✅ Principais Vantagens:

  • Sintaxe Intuitiva: Fácil de aprender e usar, similar ao Markdown
  • Versatilidade: Suporta mais de 10 tipos diferentes de diagramas
  • Integração Simples: Funciona bem com GitHub, GitLab, Notion e outras plataformas
  • Documentação Viva: Diagramas que podem ser versionados junto com o código
  • Zero Dependências de Design: Não precisa de ferramentas gráficas externas
  • Responsivo: Diagramas se adaptam automaticamente ao container
  • Temas Personalizáveis: Múltiplas opções de estilização

⚠️ Limitações a Considerar:

  • Menos flexibilidade visual comparado a bibliotecas de desenho livre
  • Curva de aprendizado para sintaxes específicas de cada tipo de diagrama
  • Limitações em customizações muito específicas de layout

Tipos de Diagramas Suportados

Mermaid oferece uma impressionante variedade de diagramas:

  • Flowcharts (Fluxogramas)
  • Sequence Diagrams (Diagramas de Sequência)
  • Class Diagrams (Diagramas de Classe)
  • State Diagrams (Diagramas de Estado)
  • Entity Relationship Diagrams (Diagramas ER)
  • User Journey (Jornada do Usuário)
  • Gantt Charts (Gráficos de Gantt)
  • Pie Charts (Gráficos de Pizza)
  • Git Graphs (Gráficos Git)
  • C4 Diagrams (Diagramas C4)

Instalação e Setup

Via CDN:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
  mermaid.initialize({ startOnLoad: true });
</script>

Via NPM:

npm install mermaid
import mermaid from 'mermaid';
mermaid.initialize({ startOnLoad: true });

Exemplos Práticos

Olha como é simples e fácil criar vários tipos de gráficos! (Você pode testar aqui)

1. Fluxograma Simples

flowchart TD
    A[Início] --> B{Decisão}
    B -->|Sim| C[Processo 1]
    B -->|Não| D[Processo 2]
    C --> E[Fim]
    D --> E

Saída:

2. Diagrama de Sequência

sequenceDiagram
    participant U as Usuário
    participant A as App
    participant S as Servidor
    
    U->>A: Login
    A->>S: Validar credenciais
    S-->>A: Token JWT
    A-->>U: Acesso liberado

Saída:

3. Gráfico de Pizza

pie title Distribuição de Vendas
    "Q1" : 386
    "Q2" : 85
    "Q3" : 150
    "Q4" : 250

Saída:

Casos de Uso Ideais

Documentação Técnica

Perfeito para documentar arquiteturas de software, fluxos de processos e especificações técnicas que precisam ser mantidas atualizadas.

Processos de Negócio

Visualização clara de workflows, aprovações e jornadas do usuário que podem ser facilmente modificadas conforme necessário.

Apresentações e Relatórios

Criação rápida de diagramas para apresentações, especialmente quando os dados podem mudar frequentemente.

Material Educativo

Excelente para criar conteúdo educativo onde diagramas precisam ser simples de entender e modificar.

Dicas

1. Configuração Avançada

Personalize a aparência dos seus diagramas definindo temas customizados e variáveis de cores. Isso é especialmente útil para manter consistência visual com o design da sua aplicação.

mermaid.initialize({
  startOnLoad: true,
  theme: 'dark',
  themeVariables: {
    primaryColor: '#ff6b6b',
    primaryTextColor: '#ffffff',
    primaryBorderColor: '#ff4757'
  }
});

2. Renderização Dinâmica

Para casos onde você precisa gerar diagramas baseados em dados que mudam em tempo real, use a renderização programática. Isso permite criar diagramas sob demanda sem depender do carregamento automático da página.

const element = document.querySelector("#mermaid-diagram");
const graphDefinition = 'graph TD; A-->B; B-->C;';
mermaid.render('graphDiv', graphDefinition, (svgCode) => {
  element.innerHTML = svgCode;
});

3. Integração com React

Em projetos React, encapsule o Mermaid em um componente reutilizável. Isso garante que os diagramas sejam renderizados corretamente mesmo quando o componente re-renderiza ou props mudam.

import { useEffect } from 'react';
import mermaid from 'mermaid';

function MermaidDiagram({ chart }) {
  useEffect(() => {
    mermaid.initialize({ startOnLoad: true });
    mermaid.contentLoaded();
  }, []);

  return <div className="mermaid">{chart}</div>;
}

Conclusão da Série

Com Mermaid, encerramos nossa jornada pelas 8 principais bibliotecas de JavaScript para gráficos. Cada uma tem seu lugar no ecossistema de desenvolvimento:

  • Chart.js: Gráficos simples e bonitos com poucas linhas de código. Ideal para quem quer resultados rápidos e eficazes.
  • Recharts: Baseado em React e D3. Permite criar gráficos declarativos usando componentes JSX. Ótimo para projetos React modernos.
  • ECharts: Biblioteca da Apache com suporte a visualizações interativas e profissionais. Muito usada em dashboards robustos.
  • D3.js: Uma biblioteca poderosa de visualização em JavaScript. Flexível e customizável, mas com curva de aprendizado maior.
  • Visx (Airbnb): Combina o poder do D3 com a estrutura de componentes React. Ideal para quem quer controle visual e modularidade.
  • Zdog: Crie elementos gráficos e animações 3D com estilo “desenho animado”. Leve e divertida para projetos criativos.
  • P5.js: Foco em arte generativa e visualizações criativas. Muito usada para fins educativos e projetos interativos.
  • Mermaid (➡️ neste post): Gere fluxogramas, diagramas de classe, Gantt e mais usando texto simples (Markdown-style). Perfeito para documentação técnica.

Quando Usar Mermaid?

Use Mermaid quando:

  • Precisar de diagramas que sejam fáceis de manter e versionar
  • Quiser integrar visualizações com documentação em Markdown
  • Precisar criar fluxogramas ou diagramas de processo rapidamente
  • Trabalhar em equipes onde nem todos têm skills de design

Evite Mermaid quando:

  • Precisar de controle total sobre o design visual
  • Trabalhar com grandes volumes de dados numéricos
  • Necessitar de interatividade complexa com os elementos

Mermaid representa uma abordagem única no mundo das visualizações: transformar código em diagramas compreensíveis. É a ferramenta perfeita para desenvolvedores que valorizam simplicidade, manutenibilidade e integração com workflows de desenvolvimento modernos.

✨ Livros para Aprender JavaScript

Para dominar essas bibliotecas de visualização, é essencial ter uma base sólida em JavaScript. Aqui estão algumas recomendações de livros que vão acelerar seu aprendizado:

❤ Essa foi nossa série completa sobre bibliotecas JavaScript para gráficos! Qual dessas ferramentas você está mais ansiosa para experimentar? Compartilhe nos comentários suas experiências e dúvidas!

Posts relacionados