Desenvolvimento Web

Ferramentas gratuitas para desenvolvimento web

Ana Lisseth Juárez Marenco

Jul 16, 2024 • 7 min read

Como desenvolvedor(a) web, é importante manter familiaridade com ferramentas que apoiem a simplificação e otimização do trabalho diário. Conhecê-las não só agiliza o processo de desenvolvimento, mas também garante a qualidade e confiabilidade do produto final, sem esquecer que, ao estar ciente das ferramentas atualizadas disponíveis no mercado, proporciona uma vantagem competitiva.

Neste artigo, menciono quatro ferramentas que serão de grande utilidade. Tenho a certeza de que são de grande ajuda, pois em algum momento as usei e continuo a usá-las nas minhas tarefas como desenvolvedora.

📌 Mermaid

Logo do mermaid.js.

Mermaid é uma ferramenta de documentação muito fácil de usar que permite criar diagramas de maneira rápida. Funciona criando até gráficos tediosos ou complexos com muita precisão, tudo conforme as necessidades de cada projeto. Sua versatilidade a torna adequada para contextos profissionais onde é necessária uma visualização de informações com base em diagramas. Embora seja baseada em JavaScript, sua sintaxe é inspirada em Markdown.

Entre os diagramas que você pode criar, estão:

1. Diagrama de estados ou State Diagram: É usado para descrever o comportamento de um sistema, das mudanças que resultam pela execução de um evento.

Por exemplo: Um pequeno diagrama de estado, simulando ir à loja onde podemos encontrar ou não um produto.

💡 Neste exemplo, veremos que a sintaxe é similar ao plantUml, pois tenta ser o mais compatível possível para facilitar a compreensão dos usuários e assim possa compartilhar os trabalhos realizados.

💡Para seguir o exemplo, Mermaid tem à disposição uma página onde você pode criar e visualizar os diagramas ao vivo, acessando este link.

---

title: Exemplo Diagrama de Estado

---

stateDiagram-v2

[*] --> Ir_à_loja

Sair --> [*]

Ir_à_loja --> Procurar_produto

Procurar_produto --> Produto_encontrado

Procurar_produto --> Produto_não_encontrado

Produto_encontrado --> Ir_para_o_caixa

Produto_não_encontrado --> Sair

Ir_para_o_caixa --> Sair

Pode-se observar que, com algumas poucas linhas de código, temos um diagrama pronto e muito estético. Além disso, podemos adicionar detalhes ao diagrama, tais como:

Comentários: Estes são feitos adicionando o sinal de porcentagem duas vezes, seguido do que você quiser escrever, assim:

%% este é um comentário

Textos nos estados: Se você quiser adicionar texto nas transições dos estados, pode fazer isso adicionando dois pontos seguido da palavra, desta maneira:

Ir_à_loja --> Procurar_produto : para

Se você quiser mostrar escolhas representadas de uma melhor maneira, considere fazer isso desta maneira:

state comprar <<choice>>

[*] --> Ir_ao_mercado

Ir_al_mercado --> comprar

comprar --> Comida: if dinero > 0

comprar --> Nada : if dinero <= 0

Comida --> Buscar_producto

Nada --> Salir

O qual, adicionando ao código anterior, é representado da seguinte maneira, onde depende se há dinheiro ou não, é onde se procura o produto.

Opcionalmente, se você desejar adicionar algumas pequenas notas, também pode incluí-las adicionando ao código:

note right of comprar

a nota que você

desejar escrever

end note

Se você gostaria de usar esta opção em seus projetos, integrá-la é muito fácil. Aqui, mostro um exemplo de como fazer isso com um projeto em JavaScript vanilla.

👉 Estarei usando VSC como editor de código.

Passo 1: Crie um arquivo .html, neste caso chamado index.html.

Passo 2: Escreva a sintaxe básica de um arquivo HTML.

Passo 3: Adicione o CDN do Mermaid.js no seu arquivo, o qual é:

<script src="https://cdn.jsdelivr.net/npm/mermaid@10.8.0/dist/mermaid.min.js">

</script>

Passo 4: Deve-se adicionar o script de inicialização do Mermaid.js, o qual além de inicializar, configura o Mermaid para que o diagrama seja renderizado assim que a página terminar de carregar.

<script>mermaid.initialize({startOnLoad:true});</script>

Paso 5: Crie um contêiner onde você terá todo o código Mermaid que usará. Sempre deve estar dentro de um componente pai que tenha uma classe chamada mermaid, isso para que a biblioteca saiba onde renderizar e encontrar o conteúdo. Copiando o exemplo anterior, fica da seguinte maneira:

<div class="mermaid">

---

title: Ejemplo Diagrama de Estado