Imagem padrão
23/12/2024
Criando um Diagrama de Classes no Mermaid Chart

De todos os diagramas presentes na UML (Unified Modeling Language ou Linguagem de Modelagem Unificada) um dos mais utilizados e mais importantes é o Diagrama de Classes, até pelo seu caráter de servir como base para a elaboração de outros diagramas da UML. De forma resumida, este diagrama representa as classes de um sistema e suas associações.

É importante utilizar um Diagrama de Classes ainda na fase de análise, elaborando um modelo conceitual a respeito das informações necessárias ao software, se preocupando em representar quais classes, atributos e relacionamentos existirão. E mesmo que os métodos sejam declarados nesse diagrama, identificando parâmetros e valores retornados, a definição das ações que tais métodos deverão executar quando forem chamados é função atribuída a outros diagramas.

Existem várias ferramentas que podem ser utilizadas para criar um Diagrama de Classes e uma que tem realizado muito bem essa tarefa é a Mermaid Chart. Com versão gratuita, ela foi desenvolvida em JavaScript e permite a criação de diagramas e outras visualizações através de texto ou código. Mais informações sobre a ferramenta você pode conferir na própria documentação.

Veja na imagem a seguir que para criar o diagrama de uma classe Automóvel, contendo seus atributos e métodos, basta inserir o texto no editor e a visualização será gerada. Perceba que é possível informar a visibilidade, tipos, retornos e parâmetros. Para ver mais detalhes sobre criação de um diagrama de classes, você pode consultar a seção específica na documentação clicando aqui.

Conforme a documentação, há formas de representar relacionamentos comuns (associação binária), herança, composição, agregação, navegabilidade, dependência e realização, conforme você pode observar na tabela abaixo, no código e na imagem a seguir.

TypeDescription
<|--Herança
*--Composição
o--Agregação
-->Associação
--Associação binária
..>Dependência
..|>Realização
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN

Que tal analisar um exemplo melhor envolvendo agregação, composição e herança? Observe o diagrama a seguir. Perceba que há uma relação de composição entre Cinema e Bilheteria, onde um objeto cinema terá apenas uma única bilheteria. Caso o cinema deixe de existir, a bilheteria também deixará de existir. Há ainda uma agregação entre Cinema e Filme, onde o cinema pode exibir vários filmes diferentes. E para criar categorias diferentes de filmes, foi adicionada uma relação de herança. Assim, as categorias herdam as caraterísticas de Filme.

Para gerar o diagrama do exemplo, foras dadas as seguintes instruções:

classDiagram
    class Cinema {
        -Bilheteria bilheteria
    }
    class Bilheteria {
        -int numeroDeBilhetesVendidos
    }
    class Filme {
        -String titulo
    }
    class FilmeAcao {
        -int cenasExplosivas
    }
    class FilmeComedia {
        -int numeroDePiadas
    }
    Cinema "1" *-- "1" Bilheteria : possui
    Cinema "0..*" o-- "0..*" Filme : exibe
    Filme <|-- FilmeAcao
    Filme <|-- FilmeComedia

Muito massa, né? Essa ferramenta é bem interessante para auxiliar em diversas tarefas. E o fato de ter a geração a partir de texto ajuda a acelerar a produção do diagrama, já que você não precisa se preocupar em organizar os elementos visuais, apenas informa o que deve conter no diagrama e o mesmo será desenhado. Para mais informações, acesse a documentação.