Read this post in: de_DEen_USes_ESfr_FRid_IDjapl_PLru_RUvizh_CNzh_TW

Editor Gratuito de Diagramas de Casos de Uso: Suporte ao Mermaid no VPasCode

EDITION REQUIRED|
DESKTOPCommunity
VP ONLINEFree

Diagramas de caso de uso Mermaid agora são suportados no VPasCode

Diagramas de casos de usoajuda as equipes a explicar como pessoas e sistemas externos interagem com as funções que um sistema oferece. Agora você pode criá-los no Mermaid e visualizá-los no VPasCode. Essa nova capacidade expande o suporte do VPasCode a diagramas como código e oferece outra maneira de descrever o comportamento do sistema usando texto, em vez de desenhar cada elemento manualmente.

Já usa o Mermaid para documentação técnica? Agora você pode usar o VPasCode como um editor de diagramas Mermaidpara diagramas de casos de uso, junto com os outros tipos de diagramas suportados. Se você está procurando por um editor gratuito de diagramas de casos de usopara transformar a sintaxe do Mermaid em um diagrama visual, experimente no editor VPasCode.

O que há de novo: Diagramas de casos de uso no Mermaid

O VPasCode já suportava diagramas de casos de uso escritos em PlantUML. Com esta atualização, você também pode escrevê-los na sintaxe usecase-betado Mermaid, disponível no Mermaid 12.0.0 e versões posteriores. A sintaxe representa atores, casos de uso, limites do sistema e as relações entre atores e casos de uso.

Essa adição facilita a manutenção dos modelos de casos de uso no mesmo fluxo de trabalho baseado em texto que seus outros diagramas Mermaid. Edite a fonte, gere uma prévia e revise o diagrama conforme seus requisitos mudam.

Infográfico desenhado à mão mostrando um diagrama de caso de uso Mermaid de ATM no VPasCode

Exemplo: Diagrama de casos de uso do sistema de caixa eletrônico (ATM)

O exemplo abaixo mostra dois atores e as funções do caixa eletrônico (ATM) que eles podem acessar. O limite do sistema agrupa os casos de uso que pertencem ao Sistema ATM.

usecase-beta
direction LR
actor User("Usuário")
actor Technician("Técnico")
systemBoundary "Sistema ATM"
  Withdraw("Sacar Dinheiro")
  Transfer("Transferir Dinheiro")
  Deposit("Depositar Dinheiro")
  SettleBills("Pagar Contas")
  Repair("Reparar ATM")
end
User --> Withdraw
User --> Transfer
User --> Deposit
User --> SettleBills
Technician --> Repair

Aqui, actordeclara as pessoas que interagem com o sistema, e cada caso de uso nomeado representa uma função. O systemBoundaryagrupa essas funções sob o Sistema ATM. As setas mostram quais funções cada ator pode acessar, enquanto direction LRsolicita um layout da esquerda para a direita.

Por que usar o Mermaid para diagramas de casos de uso?

Um diagrama baseado em texto pode ser prático quando você deseja um modelo que seja fácil de revisar junto com requisitos, documentação ou código. Em vez de reposicionar formas manualmente, você pode alterar um rótulo, adicionar um ator ou atualizar uma relação na fonte. Isso torna o Mermaid útil tanto para discussões iniciais de design quanto para manter os diagramas atualizados conforme o sistema evolui.

Diagramas de casos de uso podem ajudar gerentes de produto, analistas de negócios, desenvolvedores, arquitetos e partes interessadas a construir uma visão compartilhada do escopo do sistema. Eles podem facilitar a discussão de questões como:

  • Quem interage com o sistema?
  • Quais funções o sistema oferece?
  • Quais funções estão disponíveis para cada ator?
  • Onde começa e termina o escopo do sistema?

VPasCode: um editor de diagramas como código no seu navegador

VPasCode é uma plataforma online de diagramas como código para desenvolvedores, arquitetos e equipes técnicas. Ele converte linguagens de diagramas baseadas em texto suportadas e dados estruturados em diagramas visuais, tudo dentro de um editor e visualização ao vivo. Foi projetado para tornar simples alternar entre a fonte do diagrama e o resultado renderizado.

Para começar, cole ou escreva o código do seu diagrama no editor. O VPasCode detecta automaticamente os formatos suportados, então você não precisa escolher uma linguagem manualmente. Conforme você edita, a visualização é atualizada em tempo real, ajudando você a identificar alterações e refinar seu diagrama.

Além do Mermaid, o VPasCode suporta PlantUML e outros formatos de diagramas e visualização, incluindo D2, Graphviz, Markmap e ECharts. Ele também funciona com formatos de dados estruturados e linguagens de programação. Isso o torna útil como um único espaço de trabalho para equipes que documentam sistemas em mais de uma notação.

Mais do que uma visualização ao vivo

O VPasCode inclui ferramentas práticas para trabalhar com diagramas após sua renderização:

  • Compartilhar diagramas:Crie URLs compartilháveis, gere códigos QR ou compartilhe por meio de canais sociais suportados.
  • Exportar imagens:Baixe diagramas como SVG ou PNG para documentação, apresentações e outros materiais.
  • Corrigir sintaxe com IA:Com acesso aos recursos premium aplicáveis, use “Corrigir por IA” para reparar erros de sintaxe e revisar uma diferença de código e uma explicação das alterações.
  • Traduzir rótulos de diagramas:Os recursos premium de IA podem traduzir o texto do diagrama para outros idiomas diretamente no editor.
  • Enviar diagramas para OpenDocs:Com o acesso premium aplicável, envie diagramas para o Visual Paradigm OpenDocs para uso em documentação técnica.

Edição básica, renderização ao vivo, exportação de imagens e compartilhamento são gratuitos. Os recursos de IA e a integração com OpenDocs estão disponíveis por meio de planos qualificantes do Visual Paradigm. Para mais informações sobre a plataforma, visite o Visão geral dos recursos do VPasCode.

Experimente diagramas de casos de uso Mermaid no VPasCode

Seja você mapeando serviços de caixas eletrônicos, descrevendo um checkout online ou documentando os atores e capacidades de um produto de software, o VPasCode oferece um local conveniente para escrever e visualizar seu diagrama. Use-o como um editor gratuito de diagramas de casos de usopara a sintaxe Mermaid suportada, ou como um editor de diagramas Mermaidpara um fluxo de trabalho mais amplo de diagramas como código.

Abra o VPasCode e crie um diagrama de caso de uso Mermaid. Para saber mais sobre os formatos e capacidades suportados, consulte o Visão geral do VPasCode.

Scroll to Top