HN Open: GUI para editar diagramas de classes do Mermaid

GUI para editar diagramas de classes do Mermaid

• Vantagens dos gráficos Mermaid: Os gráficos Mermaid, que permitem representar diagramas complexos rapidamente, ficaram ainda mais intuitivos e fáceis de editar diagramas de classes com as atualizações recentes. O novo recurso amplia o editor visual para oferecer suporte à interação direta com diagramas de classes e fornece várias ferramentas para melhorar a experiência do usuário com diagramas.

O que é um diagrama de classes?

• Definição de diagrama de classes: É um tipo de UML (Unified Modeling Language) que modela a estrutura de um sistema, mostrando classes, atributos, métodos e as relações entre objetos. É uma ferramenta essencial no design orientado a objetos e ajuda a visualizar como diferentes partes do sistema interagem.
• Elementos básicos:
  • Classe: representa um objeto ou conceito.
  • Atributo: característica ou propriedade de uma classe.
  • Método: ação ou operação que uma classe pode executar.
  • Relação: representa a conexão ou interação entre classes.

Novas ferramentas do editor visual

• Apresentação das ferramentas: A barra de ferramentas do editor visual apresenta várias novas ferramentas para diagramas de classes.
  • Alterar a direção de renderização do diagrama: ajusta o layout do diagrama.
  • Adicionar nova classe: adiciona facilmente uma nova classe ao diagrama.
  • Adicionar título e notas: adiciona um título ao diagrama ou insere notas não associadas a uma classe específica.
  • Adicionar namespace vazio: define um espaço reservado para classes pertencentes a um namespace específico.
  • Atualizar a configuração do diagrama: alterna opções como a visibilidade de "caixas de membros vazias" para manter uma aparência limpa.
  • Alterar tema e layout: permite escolher diferentes temas e ajustar a aparência do diagrama.

Criando novas classes e relações

• Como criar classes e relações:
  • Criar uma nova classe a partir de uma relação existente: clique em uma classe existente no diagrama e arraste até um espaço vazio para criar uma nova classe e estabelecer uma relação direta com a classe original.
  • Criar relações entre classes existentes: arraste uma linha de relação de uma classe para outra para configurar rapidamente a relação.

Editando detalhes da classe

• Modificar propriedades da classe: O editor visual oferece uma interface interativa poderosa para modificar propriedades de classes sem código. É possível configurar detalhadamente cada propriedade da classe.
  • Atributos: definir modificadores de visibilidade, configurar tipos de dados e nomear atributos.
  • Métodos: configurar a visibilidade dos métodos, definir tipos de retorno e especificar nomes de métodos e parâmetros.

Dicas extras para otimizar diagramas

• Experimentar diferentes layouts: use as opções de layout e tema para encontrar a melhor aparência para o diagrama.
• Adicionar contexto com notas: use o recurso de notas para explicar partes do diagrama e deixar relações complexas mais claras.

Primeiros passos

• Usando as ferramentas do editor visual do Mermaid: Explore os novos recursos para tornar os diagramas de classes mais eficientes e acessíveis. Seja criando um novo diagrama do zero ou aprimorando um diagrama existente, essas atualizações economizam tempo e esforço e permitem focar no design e na estrutura do sistema.

[GN⁺]

Opiniões no Hacker News

• Normalmente uso Claude como front-end para Mermaid. Quando preciso explicar ideias complexas, os diagramas que o Claude cria rapidamente tornam a explicação muito mais fácil
  Também tenho uma conta paga do Mermaid, mas, como de todo modo uso mais o Claude, ele continua sendo meu primeiro ponto de entrada. O que eu espero de uma GUI é poder aplicar estilo e cores a esses diagramas rápidos e mover um pouco as caixas para que as setas fiquem melhores do que no layout automático
  Pelo blog, parece que o recurso de mudar a cor e o estilo de caixas individuais talvez fique de fora, mas essa é a parte que mais toma tempo quando faço manualmente no código, então seria bom ter uma ferramenta rica para isso

  • Interessante, mas fico curioso se não houve nenhum ponto problemático. Na semana passada pedi ao Claude para criar um diagrama de sintaxe de uma linguagem de brinquedo, e caracteres especiais não escapados causaram erro de sintaxe no código-fonte Mermaid
    Mesmo existindo o próprio widget Mermaid do Claude, não consegui fazê-lo corrigir o erro no próprio código

• Sou Dominic, da equipe de produto do Mermaid. Se houver problemas atuais no produto, pedidos de melhoria ou qualquer assunto sobre o qual queiram conversar, peço que me enviem um e-mail em [e-mail] ou reservem um horário no calendário: https://calendly.com/dominic-01w/mermaid-shapers-product-int...

  • Tenho curiosidade sobre quando os diagramas Mermaid serão renderizados fora do navegador web: https://github.com/mermaid-js/mermaid/issues/2485
    Criei um editor Markdown chamado KeenWrite(https://keenwrite.com/) e permiti incorporar diagramas usando a sintaxe de três crases. Ele analisa o prefixo diagram- e passa palavras como graphviz para o Kroki(https://kroki.io/), e o Kroki renderiza vários diagramas ASCII, incluindo Mermaid
    Em Markdown, trechos de código-fonte originalmente são exibidos em fonte monoespaçada com um identificador de linguagem após as três crases, então foi uma decisão lamentável o GitHub ter quebrado essa convenção ao criar um padrão de fato para diagramas Mermaid
  • Concordo com a pergunta sobre renderização sem navegador. Até agora tentei ajustar uma configuração do Selenium para builds headless, mas falhei, e o texto também foi renderizado incorretamente
    Para uma ferramenta que pretende ser amplamente adotada, acho que a renderização sem navegador deveria ser prioridade máxima como funcionalidade básica, não algo além de uma PoC
  • Seria bom melhorar o controle de layout para impedir que os componentes do diagrama colidam entre si. Sei que não é um pedido fácil, mas encontro com bastante frequência componentes mal posicionados, e resolver isso poderia se tornar uma grande vantagem do Mermaid

• Usei isso recentemente e gostei no começo. O ChatGPT também gerou diagramas Mermaid muito bem, mas não testei o recurso de IA próprio
  Porém, depois de criar um diagrama de complexidade média, tentei melhorar o layout arrastando manualmente com o recurso Whiteboard, e a coisa ficou bem instável. Era difícil organizar na posição desejada ou arrastar, e também era difícil resolver sobreposições. Também achei uma pena que alguns tipos de diagrama não oferecessem suporte ao Whiteboard
  A diferença de recursos entre mermaidchart.com e mermaid.live também é confusa. Não sei se são produtos concorrentes ou variações de apps parecidos, e os nomes “Playground” e “Live Editor” também confundem. Ainda assim, fico feliz que exista e espero que continue melhorando

  • Sou o CEO da Mermaid. O Whiteboard ainda está em fase inicial, então deve melhorar bastante nos próximos meses
    mermaidchart.com e mermaid.live são operados pela mesma equipe. Mermaid.live é o editor original do projeto open source de 10 anos e um editor hospedado totalmente open source
    O criador do Mermaid recentemente criou o mermaidchart.com junto com o venture studio do CEO do GitLab, e estamos expandindo para mais usuários e recursos de nível empresarial. A empresa é open core e recebeu investimento de venture capital, mas o projeto Mermaid continuará open source e seguiremos investindo nele
  • Talvez seja um problema fundamental do Mermaid ele só dispor os elementos do jeito que o Mermaid “quer”, e não do jeito que você quer. Há muito tempo ele cria espaços vazios enormes, e é difícil obter o layout desejado

• Ferramentas de diagrama com algoritmos de layout automático eu uso principalmente só quando crio visualizações de depuração de forma programática. Para fins de documentação, prefiro desenhar à mão no OmniGraffle
  Deixar grafos bonitos com ferramentas como graphviz é muito complexo e, no fim, a gente acaba abusando de recursos de forma improvisada para conseguir o visual desejado
  O que realmente é necessário, na minha visão, é um algoritmo de layout de grafos baseado em aprendizado de máquina que consiga levar em conta legibilidade e estética. O que encontrei até agora é mais voltado à exibição de grafos grandes, ficando mais próximo de outra área
  Se o Mermaid estiver coletando todos os pontos de edição que ocorrem na UI, acho que isso poderia virar um dataset bem bom

  • Estamos criando e vendendo um mecanismo de layout desse tipo, e dá para testá-lo aqui: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
    Um exemplo maior está aqui: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
    Não gosto de autopromoção em posts de concorrentes, mas como não competimos com o caminho de o Mermaid criar seu próprio mecanismo de layout, acho que é relevante neste contexto
  • Alguns links interessantes que encontrei enquanto olhava essa área. ELK, uma biblioteca genérica de desenho de grafos parecida com o Graphviz, mas com mais opções e controle: https://eclipse.dev/elk/
    Experimento da equipe da Kiel University que desenvolveu o ELK: https://github.com/kieler/KLighD
    Wiki do projeto Kieler: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
    Biblioteca de desenho de grafos baseada em restrições: https://www.adaptagrams.org/, implementação em JS: https://ialab.it.monash.edu/webcola/
    Também vale ver o artigo do HOLA https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, a demo de Confluent Graphs https://www.aviz.fr/~bbach/confluentgraphs/, o artigo sobre layout ortogonal https://arxiv.org/pdf/1408.4626.pdf e o artigo sobre compressão de power graphs https://arxiv.org/pdf/1311.6996v1.pdf
  • Sou o Dominic, da equipe de produto do Mermaid. Lançamos o Whiteboard para ajudar usuários a obter exatamente o layout que desejam, mas ele ainda está em estágio inicial e estamos melhorando bastante
    Entendo que algoritmos de layout automático são uma grande parte do apelo do Mermaid por darem velocidade, mas o layout atual às vezes pode ficar meio emaranhado
    A ideia de um modelo de aprendizado de máquina é interessante, e fico curioso sobre quais seriam os requisitos básicos de um diagrama legível e bonito. Por exemplo, pode haver critérios como as arestas precisarem ser em ângulo reto ou arredondadas. Se puder compartilhar suas ideias, pedimos que envie um e-mail para [e-mail]
  • Estou criando uma ferramenta que combina uma sintaxe para escrever diagramas como código com uma sintaxe para definir restrições de renderização. Por exemplo, esta parte deve ficar à esquerda daquela, ou esta seta não deve cruzar com aquela seta
    Espero que isso torne muito mais fácil obter uma renderização consistente de diagramas e fazer ajustes até o último pixel. No momento, já funciona uma versão alfa bem inicial do renderizador que usa Cassowary, e estou criando uma boa GUI

• Perdi o interesse imediatamente em “Create your account”. Gostaria de poder testar o editor antes de criar uma conta e salvar no armazenamento local do navegador até decidir que gostei

• Gosto de ver o Mermaid melhorando continuamente. Para diagramas de sequência, acho que https://sequencediagram.org/ é o melhor. Não tenho relação com eles, sou apenas um usuário satisfeito

  • Já usei em uma sessão colaborativa de diagramas no passado e gostei por ser fácil e simples. Mas o ponto central do Mermaid é a portabilidade. O importante é poder incorporá-lo em documentos Markdown e visualizá-lo em vários editores e plataformas
  • Do ponto de vista da equipe de produto do Mermaid Chart, acho que o recurso de diagramas de sequência do Mermaid também se destaca bastante. Fico curioso para saber em que https://sequencediagram.org/ é melhor do que os diagramas de sequência do Mermaid
  • Experimentei outros editores, mas no fim sempre voltei ao sequencediagram.org. Ele simplesmente funciona bem e dá menos trabalho
  • Sinto que o editor de diagramas de sequência do MermaidChart é melhor que o sequencediagram.org
  • O sequencediagram.org provavelmente usa PlantUML, então dá para fazer a mesma coisa localmente, sem o site

• Entendo que a filosofia é diferente, mas seria ótimo se chegasse o dia em que desse para usar Mermaid dentro do LaTeX. No mínimo, se houvesse uma ferramenta para converter Mermaid para TikZ de forma confiável, preparar slides ficaria muito mais fácil
  Também dá para exportar como PNG/JPG, mas em geral se perde muita personalização, e a única coisa que dá para fazer é aumentar ou reduzir o tamanho para caber na página
  Ontem, enquanto eu investigava isso, também vi a nova GUI apresentada neste post e, no fim, acabei sofrendo para exportar como PNG e ajustar ao layout de página do Beamer

• O Draw.io incorpora diagramas Mermaid, e também há VSCode e vários plugins de IDE; fico curioso sobre o que há de especial nisso

  • A integração do Mermaid no Draw.io e os plugins para VSCode/IDE são bons, mas em geral dão suporte principalmente à edição programática de diagramas
    O diferencial do Mermaid Chart é a edição bidirecional. Você pode alterar o diagrama modificando o código e, se alterar o diagrama diretamente, essa mudança é refletida automaticamente no código
    Atualmente, essa edição bidirecional está disponível em diagramas de classe e fluxogramas, e a ideia é expandi-la para outros tipos populares de diagrama no futuro
  • Concorrência é boa para a inovação, e ter opções é bom para todo mundo. Precisa mesmo ser especial?

• A imagem “Theme Customization in Toolbar” não está renderizando

• O projeto em si é bacana, mas tenho dúvidas quanto ao lado filosófico
  O Mermaid pretende ser o Markdown dos diagramas, então o mais importante é poder editar e consumir em texto puro. Se for preciso usar um editor visual, não entendo por que não trazer uma ferramenta mais poderosa e sair de um formato limitado
  Isso é parecido com editores Markdown WYSIWYG. Claro que deve haver um nicho, mas, se for assim, fico pensando se não seria melhor usar Google Docs ou MS Word