VPasCode amplia o suporte ao Mermaid: Diagramas Ishikawa, Modelagem de Eventos, Diagramas de Venn e Mapas Wardley agora disponíveis

🚀 Visual Paradigm está animado em anunciar que VPasCode – nossa plataforma unificada de diagramas como código – agora suporta quatro tipos adicionais de diagramas Mermaid. Agora você pode criar os seguintes diagramas profissionais usando notação de texto simples:

• 🐟 Diagrama Ishikawa (Osso de Peixe / Causa e Efeito) – Análise de causa raiz tornada fácil
• ⚡ Diagrama de Modelagem de Eventos – Projete fluxos de informações do sistema e cronologias
• 🟡 Diagrama de Venn – Visualize relações entre conjuntos e interseções
• 🗺️ Mapas Wardley – Mapeamento da cadeia de valor estratégica e análise da evolução

Seja você um gerente de produto, arquiteto de software, desenvolvedor ou estrategista, o VPasCode ajuda você a criar diagramas usando a sintaxe que já conhece, com visualização em tempo real, compartilhamento de URL com um clique e exportação gratuita em SVG/PNG.

🔍 O que torna o VPasCode diferente?

VPasCode (abreviação de Visual Paradigm’s asCode plataforma) é um ambiente unificado de texto para diagramas. Ele renderiza PlantUML, Mermaid, Graphviz, e muito mais (com formatos adicionais em desenvolvimento). Você pode alternar livremente entre sintaxes no mesmo editor, sem precisar aprender várias ferramentas.

Esta melhoria foca na sintaxe mais recente do Mermaid (v11.12.3+ e v11.15.0+). Abaixo você encontrará exemplos de código funcionais para cada novo tipo de diagrama – basta copiar e colar no VPasCode.

📌 1. Diagrama Ishikawa (Osso de Peixe) – Análise de Causa Raiz

Também conhecido como diagrama de causa e efeito ou diagrama de osso de peixe. Perfeito para sessões de gestão de qualidade e resolução de problemas.

✅ Exemplo – Análise de Causa Raiz para “Foto Desfocada”

ishikawa-beta
    Foto Desfocada
    Processo
        Fora de foco
        Velocidade do obturador muito lenta
        Filme protetor não removido
        Filtro de beleza aplicado
    Usuário
        Mãos trêmulas
    Equipamento
        LENTE
            Lente inadequada
            Lente danificada
            Lente suja
        SENSOR
            Sensor danificado
            Sensor sujo
    Ambiente
        Objeto se moveu muito rápido
        Muito escuro

💡 Observações sobre a sintaxe: A primeira linha define o problema (a cabeça do peixe). A indentação cria as ramificações hierárquicas de causas (osso de peixe).

📌 2. Diagrama de Modelagem de Eventos – Comportamento do Sistema ao Longo do Tempo

A Modelagem de Eventos descreve como as informações mudam dentro de um sistema ao longo do tempo. Utiliza UI, comandos, eventos e processadores organizados em piscinas. O VPasCode suporta tanto a sintaxe compacta quanto a solta, dados embutidos e blocos de dados externos.

✅ Exemplo Mínimo – Fluxo de Adicionar Item ao Carrinho

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded

✅ Exemplo de Dados Embutidos

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem { description: string }
tf 03 evt ItemAdded { description: string }

✅ Blocos de Dados e Múltiplas Referências

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem [[AddItem01]]
tf 03 evt ItemAdded [[ItemAdded]]
tf 04 cmd AddItem [[AddItem02]]
tf 05 evt ItemAdded [[ItemAdded]]

data AddItem01 {
  description: 'john'
  image: 'avatar_john'
  price: 20.4
}

data AddItem02 {
  description: 'jack'
  image: 'avatar_jack'
  price: 12.5
}

data ItemAdded {
  description: string
  image: string
  price: number
}

✅ Redefinir Quadro

modelagem de eventos

tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded

rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged

💡 Tokens principais: tf (quadro de tempo), rf (quadro de reinício), ui / cmd / evt / pcr / rmo (tipos de entidade). Use namespaces como Inventory.InventoryChanged para criar piscinas separadas.

📌 3. Diagrama de Venn – Relações e Interseções entre Conjuntos

Mostre relações lógicas entre conjuntos usando círculos sobrepostos. Suporta tamanhos personalizados, rótulos, nós de texto e estilização.

✅ Exemplo Básico – Sobreposição de Equipe

venn-beta
  título "Sobreposição de Habilidades da Equipe"
  conjunto Frontend
  conjunto Backend
  união Frontend,Backend["Design de API"]

✅ Exemplo de Tamanhos, Nós de Texto e Estilização

venn-beta
  conjunto A["Equipe Frontend"]:20
    texto A1["React"]
    texto A2["Sistemas de Design"]
  conjunto B["Equipe Backend"]:12
    texto B1["Desenvolvimento de API"]
  união A,B["Habilidades Full-stack"]:3
    texto AB1["Especificação OpenAPI"]
  estilo A preenchimento:#ff6b6b
  estilo A,B cor:#2c3e50
  estilo A1 cor:#e74c3c

💡 Use :número para controlar o tamanho do círculo, texto para adicionar rótulos dentro dos conjuntos, e estilo para cores personalizadas.

📌 4. Mapas de Wardley – Mapeamento da Cadeia de Valor Estratégica

Mapas de Wardley ajudam você a visualizar os componentes de um negócio ou sistema, sua posição na cadeia de valor e seu estágio evolutivo (Gênese → Feito sob Medida → Produto → Commodity). O VPasCode suporta totalmente a sintaxe oficial do Mermaid para Mapas de Wardley usandowardley-beta como o tipo de diagrama.

✅ Exemplo – Pipeline de Desenvolvimento de Software

wardley-beta
título Pipeline de Implantação de Software

ancora "Necessidades do Usuário" [0.95, 0.70]
componente "Implantação Manual" [0.15, 0.25]
componente "Scripts CI/CD" [0.45, 0.50]
componente "Pipeline Automatizado" [0.75, 0.65]
componente "Infraestrutura em Nuvem" [0.30, 0.40]

"Necessidades do Usuário" -> "Pipeline Automatizado"
"Pipeline Automatizado" -> "Scripts CI/CD"
"Scripts CI/CD" -> "Implantação Manual"
"Implantação Manual" -> "Infraestrutura em Nuvem"

evolver "Implantação Manual" 0.20
evolver "Scripts CI/CD" 0.55
evolver "Pipeline Automatizado" 0.85
evolver "Infraestrutura em Nuvem" 0.70

nota "A adoção da nuvem acelera a maturidade do pipeline" [0.40, 0.35]

💡 Os nomes de componentes com espaços devem ser envolvidos por aspas duplas. As coordenadas variam de 0 a 1 em ambos os eixos (visibilidade versus evolução).

🛠️ Experimente o VPasCode Agora

Acesse o VPasCode editor: https://www.vpascode.com/.

Selecione o modo de sintaxe Mermaid, cole qualquer um dos exemplos de código acima e veja seu diagrama renderizado instantaneamente.

Comece gratuitamente – Nenhum cartão de crédito necessário, nenhuma instalação. Tudo o que você precisa é de um navegador.

📖 Documentação Oficial e Referências

• Site Oficial do Visual Paradigm

Visual Paradigm – Modelagem Profissional, Simplificada.
O VPasCode é a plataforma de diagramas como código para equipes que valorizam eficiência, colaboração e diagramação baseada em texto.